Jump to content
xisto Community
fsoftball

Viewing Images Thumbnails to full size

Recommended Posts

Hi,Need help designing a thumbnail page in frontpage. Need to have about six thumbnails aligned on the right hand side, and when you put the mouse over the thumbnail you can preview the image on the same page (as opposed to previewing it in a new window).Does anyone know a good way to do this?

Share this post


Link to post
Share on other sites

You will have to be familiar with javascript because javascript is the one playing the role of switching pictures.
I've created a sample for you according to your specifications.

<html><head><title>New Page 1</title><script language="javascript"> function pictureA  {   document.preview.src = "1.jpg";  }   function pictureB  {   document.preview.src = "2.jpg";  } function pictureC  {   document.preview.src = "3.jpg";  } function pictureD  {   document.preview.src = "4.jpg";  } function pictureE  {   document.preview.src = "5.jpg";  } function pictureF  {   document.preview.src = "6.jpg";  }</script></head><body><table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">  <tr>    <td width="50%" rowspan="6"><img src="" name="preview" width="800" height="600"></td>    <td width="50%"><img src="1.jpg" width="320" height="240" onmouseover="javascript:pictureA();"></td>  </tr>  <tr>    <td width="50%"><img src="2.jpg" width="320" height="240" onmouseover="javascript:pictureB();"></td>  </tr>  <tr>    <td width="50%"><img src="3.jpg" width="320" height="240" onmouseover="javascript:pictureC();"></td>  </tr>  <tr>    <td width="50%"><img src="4.jpg" width="320" height="240" onmouseover="javascript:pictureD();"></td>  </tr>  <tr>    <td width="50%"><img src="5.jpg" width="320" height="240" onmouseover="javascript:pictureE();"></td>  </tr>  <tr>    <td width="50%"><img src="6.jpg" width="320" height="240" onmouseover="javascript:pictureF();"></td>  </tr></table></body></html>

Hope it helps...

Share this post


Link to post
Share on other sites

another code:


<script>           //<!--           //<![CDATA[                      first = 1;           last = 16;           current = 1;                      function nextPicture() {               // Hide current picture               object = document.getElementById('slide' + current);               object.style.display = 'none';                              // Show next picture, if last, loop back to front               if (current == last) { current = 1; }               else { current++ }               object = document.getElementById('slide' + current);               object.style.display = 'block';           }           function previousPicture() {               // Hide current picture               object = document.getElementById('slide' + current);               object.style.display = 'none';                              if (current == first) { current = last; }               else { current--; }               object = document.getElementById('slide' + current);               object.style.display = 'block';           }           //]]>           // --></script>       <div class="slideShow">           <div class="setTitle">Family</div>                      <div id="slide1" class="slides">               <div class="slideTitle">01</div>               <img src="family/01.gif" height="300" width="400" border="0" />           </div>           <div id="slide2" class="slides">               <div class="slideTitle">02</div>               <img src="family/02.gif" height="300" width="400" border="0" />           </div>           <div id="slide3" class="slides">               <div class="slideTitle">03</div>               <img src="family/03.gif" height="300" width="400" border="0" />           </div>           <div id="slide4" class="slides">               <div class="slideTitle">04</div>               <img src="family/04.gif" height="300" width="400" border="0" />           </div>           <div id="slide5" class="slides">               <div class="slideTitle">05</div>               <img src="family/05.gif" height="300" width="400" border="0" />           </div>           <div id="slide6" class="slides">               <div class="slideTitle">06</div>               <img src="family/06.gif" height="300" width="400" border="0" />           </div>           <div id="slide7" class="slides">               <div class="slideTitle">07</div>               <img src="family/07.gif" height="300" width="400" border="0" />           </div>           <div id="slide8" class="slides">               <div class="slideTitle">08</div>               <img src="family/08.gif" height="300" width="400" border="0" />           </div>           <div id="slide9" class="slides">               <div class="slideTitle">09</div>               <img src="family/09.gif" height="300" width="400" border="0" />           </div>           <div id="slide10" class="slides">               <div class="slideTitle">10</div>               <img src="family/10.gif" height="300" width="400" border="0" />           </div>           <div id="slide11" class="slides">               <div class="slideTitle">10</div>               <img src="family/11.gif" height="300" width="400" border="0" />           </div>           <div id="slide12" class="slides">               <div class="slideTitle">10</div>               <img src="family/12.gif" height="300" width="400" border="0" />           </div>           <div class="controls">               <a href="javascript:previousPicture()" style="margin: 10px; color: #888888;">< Previous</a>               <a href="javascript:nextPicture()" style="margin: 10px; color: #888888;">Next ></a>           </div>       </div>   

Kinda confusing, but I like it a ton, but don't use .gif images, use jpg

Share this post


Link to post
Share on other sites

OK...so the error reads "Object expected" for this line: <td width="50%"><img src="5.JPG" width="320" height="240" onmouseover="javascript:pictureE();"></td>And all the other lines that are like it. Any help is totally appreciated.Thanks.

Share this post


Link to post
Share on other sites

If you are referring to Inspiron's code (which is excellent by the way), it's missing () after each called function.

 

function pictureA()
{
  document.preview.src = "1.jpg";
}

As you can see it's perfect if you add () at the end of each called function.

 

Few suggestion I would make is that the small thumbnail images should be on the left hand side with either cell padding or border AND the larger image on the right hand side. I am going to use Inspiron's code. I think I'll modify it so that a function called can have automatic incremental (so I don't have to type 1, 2, 3...it can be unlimited number of pictures and a single if then else would take care of it)

 

nickmealey your coding did not work as requested. Nice coding, however. Keep up the good work!

Share this post


Link to post
Share on other sites

Oh ... Thanks BuffaloHELP for discovering my errors...I didn't know that as I was typing...You know I always like to write my codes up to scratch.. :lol:Hope it helped you, fsoftball...

Share this post


Link to post
Share on other sites

I didn't know that as I was typing...

 

You know I always like to write my codes up to scratch.. :lol:

141291[/snapback]

You are what we (the OG's) used to call, "the free coders." You have all the codes in your head and the fingers cannot just keep up with your mind. LOL.

 

You youngens, write 'em codeboys, write 'em! (spin-off of Ride 'em cowboys).

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.