[SOLVED] Is this possible?

[Dada78]

I have a large image on this one page here http://www.mesquitechristmas.com/local/display.php?id=2 and what I am wanting to do is give the user the opportunity to upload additional images and display them as thumbnails that I will size with inline elements on that page. Then when a user clicks on one of the thumbnails it will display the image as the larger one and so on.

 

An example of what I am wanting to do can be found here. Just mouse over the image and you will see the large image will change. I would like to do something like this with PHP because the js causing conflicts on with the other js on the page. Also the js requires you to use two images, a large and small image. I would just like to use one image which I will resize inline then you click on the thumbnail and it will show the larger image. Is this possible to do with PHP and if some can someone give me an example or point me towards a tutorial of some sorts?

 

http://www.jabezhosting.com/rollover/rollover2.html

 

-Thanks

 

 

 

 

[thepresidentis]

http://flash-here.com/downloads/fhimage.html

there is a php script here similar to waht you are looking for.

I believe it uses a little java in it along with php.

why are you having problems with using 2 or more java elements?

I am not sure if the above script will work for you, You will have to adapt it to fit your needs, because it is written as a standalone page for viewing images.

you can specify the thumbs size etc...

[Dada78]

Because I already have 3 other js running on that page that took my a while to get to play nice and they still don't play nice in all browsers. Also the Js requires you to have two images. I want to be able to use 1 image for the thumbnail and for the main image and just size it with inline elements.  I.E.

 

<img src="<? echo $img; ?>" width="400" height="300"> For the main image then

 

<img src="<? echo $img1; ?>" width="75" height="75"> for the thumbnails and along those lines where each thumbnail will be a different varible. I.E. $img1 $img1 $img2 $img3... Then when you click on the thumbnail it will show the larger image and so on for each image. I need something that is not flash and no Js. If it is Js then it needs to be something I can call from the database only using one picture.

[sasa]

with JS try

<img src="C:\Documents and Settings\All Users.WINDOWS\Documents\My Pictures\Sample Pictures\Sunset.jpg" width="400" height="300" onclick="this.height=400-this.height;this.width=500-this.width">

[Dada78]

I don't think you understand what I am saying. The pictures will be called from the database which is easy. If you look at this page

 

http://www.mesquitechristmas.com/local/display.php?id=2

 

you will see a larger image. I want to put thumbnails below it that when you click on them it will enlarge it where the larger image is now. I need to be able to use the same picture to do both.

 

So is their something like this that can be done with PHP?

[sasa]

is it what you want

<img src="novi.jpg" height="30" width="40" onclick="getElementById('big').src=this.src">
<img src="Sunset.jpg" height="30" width="40" onclick="getElementById('big').src=this.src">
<img src="" width="400" height="300" id="big">
<hr />
<div style="float:left;"><img src="novi.jpg" height="30" width="40" onmouseover="this.height=300;this.width=400" onmouseout="this.height=30;this.width=40"></div>
<div style="float:left;"><img src="Sunset.jpg" height="30" width="40" onmouseover="this.height=300;this.width=400" onmouseout="this.height=30;this.width=40""></div>

[Dada78]

Ok this code below is perfect and what I am looking for. Only one small thing. When It loads it loads the thumbnails. Is their a way to load one of the thumbnails as the default big picture?

 

<table class='fullbox' align="center" width="100%" cellpadding='3' cellspacing='1'>
     <tr>
     <td align="center"><img src="" width="400" height="300" id="big"></td>
  </tr>
  <tr> 
      <td align="center"> <img src="/local/submitted/<? echo $row['imgurl']; ?>" height="50" width="50" onclick="getElementById('big').src=this.src">
<img src="/local/submitted/<? echo $row['imgurl2']; ?>" height="50" width="50" onclick="getElementById('big').src=this.src">
</td>
  </tr>
</table>