Solved: click photo gallery

skyhigh007 · 10-Mar-2008, 09:08 PM #1

Hi

I've created a list of thumb nails and I want to display a larger image of that tumbnail when someone CLICKS on it. I know you can't do it with css, but how do you do it with javascript ?
I know theres a function called onClickfunction(). Any hints, clues?

Thanks

Sequal7 · 11-Mar-2008, 01:18 AM #2

This is a clue..

and this is a tip...

Cheers!

skyhigh007 · 11-Mar-2008, 01:54 AM #3

Oh Thank you for the links, but I want the larger image to be displayed below the thumbnails.

tomdkat · 02:29 PM

Quote:

Originally Posted by skyhigh007

I've created a list of thumb nails and I want to display a larger image of that tumbnail when someone CLICKS on it. I know you can't do it with css, but how do you do it with javascript ?
I know theres a function called onClickfunction(). Any hints, clues?

Here's a hint: use the "onClick()" function to change the src location of a target image to be the larger view of the thumbnail. It's really easy, actually.

I'll work up an example in a bit.

EDIT: Ok, here is some sample HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>gallery</title>
  <script type="text/javascript">
function imgSwap(imgid, newimg) {
document.getElementById(imgid).src=newimg;
}
  </script>
</head>
<body>
<br>
<br>
<br>
<table
 style="width: 500px; text-align: left; margin-left: auto; margin-right: auto;"
 border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="text-align: center;"><img
 style="width: 100px; height: 75px;" alt="Pic #1"
 src="pic1-thumb.jpg"
 onclick="imgSwap('large-img','pic1-large.jpg');"></td>
      <td style="text-align: center;"><img
 style="width: 100px; height: 75px;" alt="Pic #2"
 src="pic2-thumb.jpg"
 onclick="imgSwap('large-img','pic2-large.jpg');"></td>
      <td style="text-align: center;"><img
 style="width: 100px; height: 80px;" alt="Pic #3"
 src="pic3-thumb.jpg"
 onclick="imgSwap('large-img','pic3-large.jpg');"></td>
    </tr>
    <tr>
      <td style="text-align: center;" colspan="5"><img
 style="border: 5px ridge red; max-width: 500px;" id="large-img"
 alt="" src="filler.gif"></td>
    </tr>
  </tbody>
</table>
<br>
</body>
</html>

Attached are screenshots of the page in action.

Basically, this is what I did. I created a 10x10 transparent GIF called "filler" which is designed to provide a spot for the larger versions of the thumbnails. By NOT specifying the height and width attributes of the filler image, the image area will be automatically resized to the size of the larger image. The 500px max-width I have set is NOT needed and something I did to keep my test images "small" in size.

Now, the JavaScript function, imgSwap, swaps the source of the filler image to be the specified image. In this case, the specified image is the larger version of the thumbnail. Each time someone clicks a thumbnail, the new image is swapped in and sized appropriately.

Here's a step-by-step explanation of the process:

User loads page. The "filler" GIF is loaded.
User clicks a thumbnail, imgSwap is called with the id of the "filler" GIF and the filename of the image to be displayed (i.e. the large version of the thumbnail). The new image appears.
User clicks another thumbnail and step #2 repeats.

This is a working "proof of concept" of what it sounds like you're looking for. Good luck!

EDIT #2: Using a HTML table for this isn't necessary. The same kind of thing can be done using DIVs or some combination of DIVs and tables, etc.

Peace...

skyhigh007 · 12-Mar-2008, 12:52 AM #5

OMG, thank you so much!, now I've to try to get it work. LOL

tomdkat · 12-Mar-2008, 12:54 AM #6

You're welcome. Study the HTML above. The JavaScript is really, once you wrap your brain around it.

Peace...

skyhigh007 · 12-Mar-2008, 04:55 PM #7

Hi
Thanks, I did it with Div, css, and list by following your concept.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>gallery</title>
<link href="gallery.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function imgSwap(imgid, newimg) {
document.getElementById(imgid).src=newimg;
}
  </script>
</head>
<body>
<div id="wrapper">
<div id="lister">
    <ul>
       <li><a href="#"><img src="thumb_blue.jpg" alt="pic1" title="" border="0" 
	                     onclick="imgSwap('large-img','bigBlue.jpg');"/></a></li>
       <li><a href="#"><img src="thumb_white.jpg" alt="pic2" title="" border="0"
	                     onclick="imgSwap('large-img','bigWhite.jpg');"/></a></li>
       <li><a href="#"><img src="thumb_pink.jpg" alt="pic3" title="" border="0"
	                    onclick="imgSwap('large-img','bigPink.jpg');"/></a></li>
       <li><a href="#"><img src="thumb_red.jpg" alt="pic4" title="" border="0"
	                    onclick="imgSwap('large-img','bigRed.jpg');"/></a></li>
       <li><a href="#"><img src="thumb_pink.jpg" alt="pic5" title="" border="0"
	                    onclick="imgSwap('large-img','bigPink.jpg');"/></a></li>
	 
	   <li id="large"><img id="large-img" src="bigBlue.jpg" alt="background"  border="0" /> </li>                 
    </ul>         
</div>
    
    
</div>
</body>
</html>

skyhigh007 · 12-Mar-2008, 05:23 PM #8

why there is a # behind the html file? it looks like gallery.html# ?

tomdkat · 12-Mar-2008, 08:19 PM #9

Quote:

Originally Posted by skyhigh007

why there is a # behind the html file? it looks like gallery.html# ?

Because of the "#" that is specifed in the "href" parameter of the anchor tag. Since you put the "onClick()" event on the img tag itself, the anchor tags aren't needed:

Code:

    <ul>
       <li><img src="thumb_blue.jpg" alt="pic1" title="" border="0" 
	                     onclick="imgSwap('large-img','bigBlue.jpg');"/></li>
       <li><img src="thumb_white.jpg" alt="pic2" title="" border="0"
	                     onclick="imgSwap('large-img','bigWhite.jpg');"/></li>
       <li><img src="thumb_pink.jpg" alt="pic3" title="" border="0"
	                    onclick="imgSwap('large-img','bigPink.jpg');"/></li>
       <li><img src="thumb_red.jpg" alt="pic4" title="" border="0"
	                    onclick="imgSwap('large-img','bigRed.jpg');"/></li>
       <li><img src="thumb_pink.jpg" alt="pic5" title="" border="0"
	                    onclick="imgSwap('large-img','bigPink.jpg');"/></li>
	 
	   <li id="large"><img id="large-img" src="bigBlue.jpg" alt="background"  border="0" /> </li>                 
    </ul>

This should work and NOT put the "#" at the end of the URL. Give it a whirl and let us know how it goes.

Peace...

skyhigh007 · 12-Mar-2008, 10:19 PM **#10**

Hey, it does work. Is there a way where I can put it in a loop? because I have a lot of images need to put up and It might take a while to load the gallery page.

tomdkat · 12-Mar-2008, 11:13 PM **#11**

Quote:

Originally Posted by skyhigh007

Hey, it does work. Is there a way where I can put it in a loop?

What do you want to put in a "loop"? The loading of images or do you want the gallery "rotate" in some fashion?

Peace...

skyhigh007 · 13-Mar-2008, 01:49 AM **#12**

sorry for not clearing it up. What I want to know is that would it slows down the loading page if I have 20 lists in an UL ?so, if those lists puts in a loop might help speeding it up the loading process?

tomdkat · 13-Mar-2008, 12:02 PM **#13**

Gotcha. The list having those images won't negatively impact the page loading speed by virtue of having the images. The images will have to be loaded as part of the page rendering anyway. What WILL appear to be slow is the loading of the larger images. Since those images will be fetched when the user clicks a thumbnail, there will appear to be a brief lag before the larger image appears. One way to deal with this is to pre-fetch the images using either JavaScript or CSS. That way, when they click the thumbnail the larger image will already be downloaded and ready for display.

If you keep your thumbnails small in file size, they should download quickly.

Peace...

skyhigh007 · 14-Mar-2008, 12:31 AM **#14**

My thumbnail pictures are 50x50 jpg, so its small. How does Pre-fetch work in css?

tomdkat · 14-Mar-2008, 01:10 AM **#15**

Actually, Stu Nicholls has a GREAT example for you to check out.

Here is another example of preloading images using CSS.

Peace...

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)