# Solved: click photo gallery



## skyhigh007 (Jun 17, 2004)

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 (Apr 15, 2001)

This is a clue..

and this is a tip...

Cheers!


----------



## skyhigh007 (Jun 17, 2004)

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


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> 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:

```
<!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 (Jun 17, 2004)

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


----------



## tomdkat (May 6, 2006)

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

Peace...


----------



## skyhigh007 (Jun 17, 2004)

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

```
<!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 (Jun 17, 2004)

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


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> 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:


```
<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 (Jun 17, 2004)

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 (May 6, 2006)

skyhigh007 said:


> 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 (Jun 17, 2004)

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 (May 6, 2006)

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 (Jun 17, 2004)

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


----------



## tomdkat (May 6, 2006)

Actually, Stu Nicholls has a GREAT example for you to check out.  Here is another example of preloading images using CSS.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Yea, I saw Stu Nicholls work and its great. There's a slide problem with the list I just created. It works fine on my local host, but some how, images are not showing up when i click it on the thumbnails after i upload it to a web hosting server. It's the exact code and images, but one thumbnail is not showing the larger image. hm...


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> Yea, I saw Stu Nicholls work and its great. There's a slide problem with the list I just created. It works fine on my local host, but some how, images are not showing up when i click it on the thumbnails after i upload it to a web hosting server. It's the exact code and images, but one thumbnail is not showing the larger image. hm...


Can you post a link to the site on your server (or send me a link via PM)?

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Nevermind, its fixed. Is it safe for the gallery to be implemented in that way because when I click on the thumbnails, on the bottom of the browser says connecting to " www.yourdomainname,com"... In terms of security is it safe? Can hackers hack the site through gallery?


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> Nevermind, its fixed. Is it safe for the gallery to be implemented in that way because when I click on the thumbnails, on the bottom of the browser says connecting to " www.yourdomainname,com"... In terms of security is it safe? Can hackers hack the site through gallery?


Are you not pre-loading the larger images? If you did, that would eliminate the need for the browser to fetch the image when the thumbnail is clicked.

I see no harm in the browser status area indicating which image is being downloaded when the thumbnail is clicked. I mean since the gallery page is being viewed at the time the thumbnail is clicked, the user already knows the URL of the site and can simply look at the HTML source to see what other URLs are referenced. I don't see how a hacker could hack your site through the gallery since they aren't able to send any information to the server. When they click the thumbnail, yes JavaScript is invoked but only to swap out an image in the local browser.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Thank you! How can you tell if its pre-loaded or not , Im still using your method.
Also, sorry I have another question. Is there a way where you can show to users when they click on the thumbnail, that thumbnail shows clicked or highlighted? In addition, how do you have arrows show up in the larger image when someones mouse hovers over the left adn right of the image?
Ex: http://kotaku.com/photogallery/streetfighterivabel/1000945419

Thank you soo much


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> Thank you! How can you tell if its pre-loaded or not , Im still using your method.


Ok, I didn't do anything with pre-loading images so you'll have to either add CSS to pre-load images or use one of many JavaScript scripts out there to pre-load images for you.



> Also, sorry I have another question. Is there a way where you can show to users when they click on the thumbnail, that thumbnail shows clicked or highlighted?


 You could set a border when they click on the image or do something like that.



> In addition, how do you have arrows show up in the larger image when someones mouse hovers over the left adn right of the image?
> Ex: http://kotaku.com/photogallery/streetfighterivabel/1000945419
> 
> Thank you soo much


I haven't seen that particular site yet but what you describe sounds like the "Light Box" gallery script. Is that what you're after?

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Not the light box, but thanks for the link. I will do more research . If I have more questions, I will let you k now.


----------



## tomdkat (May 6, 2006)

Ok, I see what you mean now. They are using CSS for the arrow effect. When the mouse hovers over a certain area of the image, an arrow will appear.

Study their CSS files to see how the work is done. 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

I'm think instead of putting onlcik function in each list, is there a way where I can use a loop?


----------



## tomdkat (May 6, 2006)

So, you want the larger images to appear automatically (without any action from the user)? In one of Stu Nicholls' galleries, he has the larger image appearing on a mouse hover vs a mouse click.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

What I meant was instead of putting the onclick function in ever list, is there a way to just put the onclick function once for all the lists.


----------



## tomdkat (May 6, 2006)

Nope, you need to "trap" mouse events on a per-element basis with JavaScript. If you were doing it with CSS, you could define a style that could possibly handle multiple elements and even then you might need several styles to deal with each individual image you want displayed, etc.

You can look for gallery software or a script that does most of what you want and just use pre-existing code but that doesn't get around having to handle mouse events on a per-element basis.

Since you're using PHP, you could write a loop to dynamically generate the HTML for gallery and have the PHP script generate the per-element event handling code. That's always an option. 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

You meant, use PHP loop to generate the html list and put the onclick() inside the loop?


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> You meant, use PHP loop to generate the html list and put the onclick() inside the loop?


Yeah. If you're already using PHP to include header and footer sections, which I think you are based on other threads you've started, you can use PHP to generate the HTML for the gallery and have it put the onClick() events where they need to be, etc. I would imagine you would need an array of some kind to associate the larger images with the thumbnails unless you go with a numbering scheme and file naming convention.

Here is a pseudo-code example:

```
$imgNo=1;
$imgMax=20;
for (;imgNo <= imgMax;imgNo++) {
echo "<img src="imgThumb[b]$imgNo[/b].jpg" onClick="swapImg('img[b]$imgNo[/b].jpg','large-img');">\n"
}
```
So, if you had 20 images you wanted in your gallery, you would name them img1.jpg, im2.jog, etc., and the thumbnails would be imgThumb1.jpg and imgThumb2.jpg and so on. As the loop above executed, it would generate this HTML:


























and so on. Of course, the above code won't work exactly as written above (which is why it's pseudo-code) but it illustrates an implementation of the algorithm I have in mind. I'm sure others here with more PHP experience would be able to produce actual PHP code that could be used.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Thank you very much for the hint , the concept and explanation, I will try it out.


----------



## skyhigh007 (Jun 17, 2004)

besides php, can javascript accomplish this?


----------



## tomdkat (May 6, 2006)

If you want to consider JavaScript, I would find a third party gallery and use that instead of "brewing" your own. You'll need to use JavaScript to dynamically generate HTML and that can get complicated, especially if you're using PHP already to generate HTML.

It sounds like you're wanting to save time from manually putting the gallery together. Having PHP generate the HTML would be the most efficient way to do that unless you use your web design tool to help you. Perhaps it has some functions you can use to better handle the repetition involved. With that being said, there's always "copy/paste/update" (where you define one thumbnail, copy it, paste it each time for the others, and update the pasted ones to have the right images).

There's no way to get around doing the work of getting the images setup to function in the gallery. Either you do the work manually or you program a computer to do it. Using PHP will effectively program the server to do the work. Using JavaScript program the local browser to do the work. If you go with a third party script, you're leveraging the work someone else has done to do the work.

Good luck! 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

The thing is I didn't know which method is efficient and I was doubting if PHP can accomplish this. Since you said its php, I will stick with it now!


----------



## tomdkat (May 6, 2006)

Of course, my statement about PHP being more efficient at generating the HTML you need generated is just my opinion and related to the fact, if it is a fact, that you're using PHP already. I figured since you already had PHP in use, why not use it to generate the gallery HTML as well. 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

I will stay with php and I hope I can get it work.


----------



## skyhigh007 (Jun 17, 2004)

I got it working! LOL ok, now, how do i add those arrows


----------



## tomdkat (May 6, 2006)

Great! :up:

Peace...


----------



## skyhigh007 (Jun 17, 2004)

How do you make the image selected when you click on the thumbnail ? Is it possible to add css within the javascript ?


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> How do you make the image selected when you click on the thumbnail ? Is it possible to add css within the javascript ?


Do you mean highlight the thumbnail they clicked in some way? What you can do is add code to the JavaScript "onClick()" event handler to change the border property of the thumbnail element that was clicked to be of the desired size and color you want. That's one way to flag a selected thumbnail. Another might be to have the unclicked thumbnails have an opacity setting that goes away when the thumbnail is clicked.

When can we see what this gallery actually looks like? 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Thank you for the hints! You will see the gallery when I launch the site.


----------



## tomdkat (May 6, 2006)

Sounds goodie. 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

You can put two onClick() in one line ? I'm trying to put the document.getElementById(id).style.border= "1px solid black"; inside the swap function and the larger img gets highlighted.


----------



## tomdkat (May 6, 2006)

That won't do it. What you can do is something like this:










Then, you write a "highlightThumb()" function that sets the border of the thumbnail.

I'll work up an example later tonight. 

Peace...


----------



## tomdkat (May 6, 2006)

Ok, here is some JavaScript you can try:

```
<script type="text/javascript">

// Variable to save previously clicked thumbnail element
  var oldThumb=null;

// imgSwap() replaces the designated large image element
// with the specified new image.
// Parameters: 
// imgid:        id of the large image element that is to be replaced
// newimg:     URL of the new image to use
// thumbNail:  The thumbNail element that was clicked
function imgSwap(imgid, newimg,thumbNail) {

    // Replace the large image with the specified image
    document.getElementById(imgid).src=newimg;

    // Change the border of the thumbnail element that was clicked
    thumbNail.style.border="5px dotted blue";

    // Remove the border from the previously clicked thumbnail element, if
    // this wasn't the first thumbnail clicked.
    if (oldThumb!=null) {
        oldThumb.style.border="none";
    }

    // Save the thumbnail element that was clicked for later use.
    oldThumb=thumbNail;
}
  </script>
```
 To use this new code, add a "this" parameter to your existing calls to "imgSwap()", like this:


```
<td style="text-align: center;"><img
 style="width: 100px; height: 75px;" alt="Pic #1"
 src="pic1-thumb.jpg"
 [b]onclick="imgSwap('large-img','pic1-large.jpg'[u],this[/u]);[/b]"></td>
```
See if that does what you want. 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Thank you very much for the code. I came up my own way of doing it.

```
<script type="text/javascript">
var previousid =0;
function swap(id,largeimg){
if (previousid > 0 ) {
document.getElementById(previousid).className = "default";
}
document.getElementById(id).className = "imgSelected";
document.getElementById("largeid").src=largeimg;
previousid = id;
}

</script>
```
I will try out yours now and see if its better and im sure it will. Can you identify any flaws in my code? Cause when i test it out in the Opera browser, the selected works well when you move from left to right, but it doesn't work well when you start from right to left.


----------



## tomdkat (May 6, 2006)

The "previousid > 0" might be what caused an issue in Opera. In my version, I tested to see if the element was null. My code works fine in Opera 9.5b and Firefox 2.0.0.13 (both on Linux) regardless of how you click the thumbnails. I haven't tried IE yet.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Im testing it on the windows and your code also has the same problem in Opera 9.25, Besides that, I.E, firefox, Safari and Netscape are all fine! The problem is when you click from right to left, all the thumbnails that was previously clicked will stay in selected.

Anyway, I fix it by changing the border="none" to 1px solid white. Thank you very much. By the way, are you going to sue me If im using your code on a website?

now the last part of the gallery, adding arrows on the larger image.


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> Im testing it on the windows and your code also has the same problem in Opera 9.25, Besides that, I.E, firefox, Safari and Netscape are all fine! The problem is when you click from right to left, all the thumbnails that was previously clicked will stay in selected.


I tested in Opera 9.5b on Windows and I didn't have access to Opera 9.2. I've got access to Opera 9.2 now so I'll see what my local test case does. 

EDIT: Ok, I just did a test in Opera 9.27 on Windows XP and my test case works as is. I'll change the images and will send you a link to a server you can run against to see for yourself. 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

You are right, looks like might be the way I list the thumbnails.


----------



## skyhigh007 (Jun 17, 2004)

After searching and searching ,I still don't have clue on how to add navigational buttons on the large image. any hints?


----------



## tomdkat (May 6, 2006)

Actually, one idea I *just* had is to use a DIV with a transparent GIF as a background that will overlay the large image.

Let me cobble up a working example to show you. 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Thank you, I just added navigation buttons when use hover the large image, but I dont know how its going to move to the previous or next larger image when you click on the previous or next button.


----------



## tomdkat (May 6, 2006)

Well, I appear to have hit a brick wall. I've got some arrows appearing when you hover over the large image and I've got links working for the arrows but I'm having problems getting the links for the arrows updating properly when you click them.

EDIT: This is what I've come up with in case someone else has some ideas:


```
<!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>Photo Gallery</title>

  <script type="text/javascript">
var prevThumb=null;
function swapImg(newImg,thumbNail,nextImg,prevImg) {
document.getElementById('large-img').src=newImg;
if (prevThumb!=null) {
prevThumb.style.border='none';
}
thumbNail.style.border='1px solid red';
prevThumb=thumbNail;
document.getElementById('left-nav').href='#'+prevImg;
document.getElementById('right-nav').href='#'+nextImg;
}

function doNav(navElement) {
alert(navElement.href);
start=navElement.href.indexOf("#");
newLoc=navElement.href.substring(start+1,99);
alert(newLoc);
document.getElementById('large-img').src=newLoc;
}
  </script>

  <style type="text/css">
#navigation {
border: 5px ridge #66cccc;
display: block;
width: 500px;
position: absolute;
padding-top: 0px;
top: 0px;
height: 400px;
margin-left: 57px;
margin-top: 150px;
color: white;
}
#large {
border-style: solid;
border-width: 1px;
display: block;
width: 500px;
height: 400px;
position: relative;
margin-top: 0px;
padding-top: 0px;
top: 0px;
}
div#navigation:hover {
background-image: url(nav-back.png);
background-repeat: no-repeat;
}
.nav-col {
display: block;
height: 100%;
width: 35px;
}
.left-nav {
display: block;
float: left;
}
.right-nav {
display: block;
float: right;
}
div#navigation a {
width: 100%;
height: 100%;
display: block;
}
a {
color: white;
text-decoration: none;
}
  </style>
</head>

<body>
<table style="width: 550px; text-align: left; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td style="text-align: center;"><img onclick="swapImg('pic1.jpg',this,'pic2.jpg','pic4.jpg');" style="width: 150px; height: 113px;" alt="Thumbnail #1" src="pic1t.jpg"></td>
      <td style="text-align: center;"><img onclick="swapImg('pic2.jpg',this);" style="width: 150px; height: 113px;" alt="Thumbnail #2" src="pic2t.jpg"></td>
      <td style="text-align: center;"><img onclick="swapImg('pic3.jpg',this);" style="width: 150px; height: 113px;" alt="Thumbnail #3" src="pic3t.jpg"></td>
      <td style="text-align: center;"><img onclick="swapImg('pic4.jpg',this);" style="width: 150px; height: 113px;" alt="Thumbnail #4" src="pic4t.jpg"></td>
    </tr>
    <tr align="center">
      <td style="height: 425px;" colspan="4">
      <div id="large"><img style="width: 500px; height: 400px;" id="large-img" alt="Large image" src="filler.jpg"></div>
      <div id="navigation">
      <div class="nav-col left-nav"><a href="#" id="left-nav" onclick="doNav(this);">#</a></div>
      <div class="nav-col right-nav">
      <a href="#" id="right-nav">#</a></div>
      </div>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>
```
Peace...


----------



## skyhigh007 (Jun 17, 2004)

Thank you for coding up an example. I will look into that code and test it out.


----------



## tomdkat (May 6, 2006)

Ok. Keep in mind the code above doesn't fully work but using it, you can see how much progress I made.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Thank you very much! I will keep working on it!


----------



## skyhigh007 (Jun 17, 2004)

Oh by the way, I just find out that there are 60 thumbnails or more and all of them cant fit on one page, so I was thinking to have multiple lists. What I want to accomplish is when a user clicks on an "set 1" it will load a list. Everything has to be on one page. How do you approach to write onClick for set1 ?


```
<ul>
    <li><a href="#">set 1</a>
       <ul>
           <li><img src="1.jpg"></li> 
           <li><img src="2.jpg"></li>
       </ul>
    </li>   
   <li><a href="#">set 2</a>
       <ul>
           <li><img src="1.jpg"></li> 
           <li><img src="2.jpg"></li>
       </ul>
    </li> 
</ul>
```


----------



## tomdkat (May 6, 2006)

I would number each thumbnail sequentially and NOT reset the numbering for each set.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

What I have right now is just a list, the thumbnails I have cant fit on a fixed space, So I what I'm thinking is to to have multiple sets of thumbnails and the display for the larger image stays the same. The code was just an example to illustrate the structure. How do you make the onclick() for set1 ?


----------



## tomdkat (May 6, 2006)

If you number the images sequentially, the code you have now won't have to change.

```
<ul>
    <li><a href="#">set 1</a>
       <ul>
           <li><img src="1.jpg"></li> 
           <li><img src="2.jpg"></li>
       </ul>
    </li>   
   <li><a href="#">set 2</a>
       <ul>
           <li><img src="[b]3.jpg[/b]"></li> 
           <li><img src="[b]4.jpg[/b]"></li>
       </ul>
    </li> 
</ul>
```
Otherwise, you would need develop another method of getting a "handle" to the thumbnail object you want to "select". Passing "this" is the best way of doing that since each thumbnail can be handled independently and you won't need unique ids for each thumbnail, etc. So, if you wanted to pass the thumbnail that was clicked to the swapImg() function, the call would look like this:


```
<ul>
    <li><a href="#">set 1</a>
       <ul>
           <li><img src="1.jpg" [b]onClick="swapImg('[large image file name or URL]',this);"[/b]></li> 
           <li><img src="2.jpg" [b]onClick="swapImg('[large image file name or URL]',this);"[/b]></li>
       </ul>
    </li>   
   <li><a href="#">set 2</a>
       <ul>
           <li><img src="[b]3.jpg[/b]" [b]onClick="swapImg('[large image file name or URL]',this);"[/b]></li> 
           <li><img src="[b]4.jpg[/b]" [b]onClick="swapImg('[large image file name or URL]',this);"[/b]></li>
       </ul>
    </li> 
</ul>
```
Then swapImg() would be coded like:

```
var oldThumb=null;

function swapImg(largeImg,thumbnail) {

document.getElementById('large-img').src=largeImg;

if (oldThumb != null) {
  oldThumb.border='none';
}

thumbnail.border='1px solid red;';
oldThumb = thumbnail;
}
```
Peace...


----------



## skyhigh007 (Jun 17, 2004)

What I meant was to have onclick on the Set 1, set 2 link


----------



## tomdkat (May 6, 2006)

You mean to have the sets appear when they are clicked? I would put each set in a DIV that is hidden and then exposed when the user clicks. Or, you can use something similar to a collapsing menu, like this.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

yea, I want the sets appear when they are clicked. Do i have to use onclick or it can be done by html ?


----------



## tomdkat (May 6, 2006)

It needs to be done either with JavaScript or with CSS.

Peace...


----------



## namenotfound (Apr 30, 2005)

skyhigh007 said:


> 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?
> ...


Actually, you can do that in CSS 
In CSS you can make it so when someone holds down the mouse button, they see the larger image, then when they release the mouse button the larger image goes away :up:

(I didn't read all 5 pages, just the first, so if this was already mentioned then oh well....)


----------



## skyhigh007 (Jun 17, 2004)

It will be a pain for you to go over 5 pages, but its a learning process for me and thank god tomdkat is helping me and not get frustrated.


----------



## skyhigh007 (Jun 17, 2004)

I'm getting there!


----------



## tomdkat (May 6, 2006)

Great! 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

My client want something like this now! http://dasme.org/imagegal/demo/#

The page1 and page2 links where it loads a set of thumbnails after you click on the link. is it done by displaying a page on a page?


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> The page1 and page2 links where it loads a set of thumbnails after you click on the link. is it done by displaying a page on a page?


That's pretty slick.  That's not done by displaying a page "on a page" but by hiding and displaying DIVs. I've done something like that on a dental site I maintain. Certain DIVs will be displayed based on data entered on a HTML form.

They use JavaScript to hide and display the DIVs based on when "page 1" or "page 2" is clicked.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Do you think the way I implemented using Unorder list can accomplish this? or i have to do displaying a page on a page?


----------



## tomdkat (May 6, 2006)

Well, without seeing _any_ part of the site you're working on I can only guess that you could do what is being done in this other gallery with your unordered lists. Again, that gallery is *not* displaying "page on a page", it's simply hiding and displaying DIVs. In fact, if you look at the HTML source, you'll see BOTH "page 1" and "page 2" defined in that same main gallery page. 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

I send you a PM link for what I have so far.


----------



## tomdkat (May 6, 2006)

Got it. Yep, I think you can do something similar to what that other gallery is doing with your unordered lists.

Peace...


----------



## tomdkat (May 6, 2006)

Dude...... I got a prototype working.... 

I've got an unordered list with different thumbnails that appear as you click on each "page" link.

Boo-yah! :up:

Peace...


----------



## skyhigh007 (Jun 17, 2004)

I forgot to mention, would it work if you put those 1,2,3 under the thumbnail list instead of at the top and center it in the middle of the page with out the word "page" ?


----------



## tomdkat (May 6, 2006)

Of course! 

EDIT: I suppose you _actually_ wanna see that too... 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Yea, SHOW ME!


----------



## tomdkat (May 6, 2006)

Tomorrow. 

It's actually quite simple to code up and the hiding/unhiding of the DIVs is easy enough to almost be considered trivial. The way I coded the page I posted screenshots of above, it will literally be trivial for me to move the navigation and center it, as you requested. 

You won't believe how simple the HTML and CSS is.
You won't believe how simple the page is.
You just won't believe it! 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

If its so simple then why I can't get it done ? Hm....


----------



## tomdkat (May 6, 2006)

I don't know what you're struggling with regarding the new gallery but the one you worked on previously was doing some fairly sophisticated stuff. 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

yea, it was a bit difficult for me.  but now I just want my gallery to be the same as the demo link i send (hide and show DIVs) Maybe I still dont get the concept of that show and hide divs


----------



## tomdkat (May 6, 2006)

Ok, I moved the gallery "navigation" section, as you requested, and added a color coding for the page of the gallery being viewed.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Wow! NICE! You use unoder list within unorder list?


----------



## tomdkat (May 6, 2006)

Nope. I did use unordered lists, however.  I did something similar to the other gallery you sent the link to. I have each set of thumbnails in an unordered list and all THREE are defined in the same HTML file. Then, I hide/unhide them as you click the gallery "page" numbers. When you first view the gallery, the first "page" is unhidden, of course.

Nested unordered lists aren't needed given the hide/unhide technique being used.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Ok, so the thumnails are in a div which are the unorder lists, the place for display a larger image is in a div, and the page(1,2,3) are in a div. Now, Im stuck onClick for the thumbnails.


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> Now, Im stuck onClick for the thumbnails.


How so? That code shouldn't change from before. Why not? Because you're changing the location of the large image and that element can be changed regardless of where it's located and regardless of it being in a DIV or a table cell, etc.

The same goes for the border around the thumbnails (or however else you're identifying the selected thumbnail). You're operating on the thumbnail elements individually so none of that logic should change either. What will be new is how to hide/unhide the thumbnails as they change logical gallery pages.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

It works for page 1 and 2, but it does not work for page 3 when you click on the thumbnail and the larger image wont come up


----------



## tomdkat (May 6, 2006)

Then, you must have broken something. 

I don't have the page I coded in front of me but I believe this is the JavaScript I used and it works on all three of my pages:


```
var oldThumb=null;

function swapImg(newImg,thumbnail) {
document.getElementById('large-img').src=newImg;

if (oldThumb != null) {
   oldThumb.style.border='none';
}

thumbnail.style.border='1px solid red';
oldThumb=thumbnail;
}
```
That code should look familiar since I believe I posted it on previous pages of this thread.

If you coded your new gallery correctly, the JavaScript you previously wrote should still work.

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Nevermind, I found the error. Two of the 3 lists had same id name thats why one of them doesn't come up. I guess I past it too fast.LOL


----------



## skyhigh007 (Jun 17, 2004)

After 6 pages of posting my gallery is ready! LOL Thank you soooo much Tomdkat and the rest of the Techguys. Just a little question, tomdkat are you going to sue me for the code you provided If i put it on the e-commerce site ? By the way, I will donate after I get paid.


----------



## tomdkat (May 6, 2006)

Great! :up:

Nope, I won't sue you for using any code I posted in this thread. I didn't post the code for the more recent gallery I developed since I wanted to give you a chance to do more of this yourself. 

When can we see the finished product?

Peace...


----------



## skyhigh007 (Jun 17, 2004)

You want to see the gallery or the site?


----------



## tomdkat (May 6, 2006)

I don't know about others but I wanna to see who smash! I wanna see the gallery as implemented on the site.  Since you're doing the work for someone else, I can understand your NOT being able to post links but if possible please show us whatever you can. 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

I will post the link soon.


----------



## tomdkat (May 6, 2006)

Great! 

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Here's the link to the gallery


----------



## tomdkat (May 6, 2006)

Coolness! :up:

Peace...


----------



## skyhigh007 (Jun 17, 2004)

Thank you very much for the help !


----------



## tomdkat (May 6, 2006)

If this issue is done, can you mark the thread solved? 

Peace...


----------



## tomdkat (May 6, 2006)

skyhigh007 said:


> Here's the link to the gallery


I almost forgot, here is what I came up with. 

Peace...


----------

