[skyhigh007]

besides php, can javascript accomplish this?

[tomdkat]

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]

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]

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]

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

[skyhigh007]

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

[tomdkat]

Great!

Peace...

[skyhigh007]

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

[tomdkat]

Originally Posted by skyhigh007

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]

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

[tomdkat]

Sounds goodie.

Peace...

[skyhigh007]

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]

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

<img src="..." onClick="swapImg([parameters]); highlightThumb({thumbnail img id});">

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

I'll work up an example later tonight.

Peace...

[tomdkat]

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"
 onclick="imgSwap('large-img','pic1-large.jpg',this);"></td>

See if that does what you want.

Peace...

[skyhigh007]

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.