Change IMG SRC onclick -- need to take it to the next level

http://208.106.137.37/gallery.php?cat=9&ID=94

If you take a look at this example (See link above) -- I already have some functionality in place to change out the IMG SRC attribute of the large image when you click on the smaller thumbnail images.  

I need to somehow take this one step further.  More specifically, ... I also need to change out the IMG SRC attributes of the thumbnail images that are clicked.

In my application, a product can have up to 3 images associated with it -- the main image (the large one that's displayed by default) .. and up to 2 additional images (initially represented by thumbnail images).  

A small thumbnail image is created for each of these product images that are uploaded (including the main one) .. and I recently realized that there is currently no way to display the default image again after one of the thumbnail images has been clicked, .. unless the page is refreshed.  

What I'd like to have happen is ... when you click on one of the thumbnail images, .. the IMG SRC attribute of the thumbnail image that was just clicked would be changed to the thumbnail image representing whichever of the large product images was just previously displayed on the left -- in addition to changing out the IMG SRC attribute of the large image (this is how it's currently functioning).

Here's a more visual description of what we'd like to achieve
(upper case = large image & lower case = thumbnail image):

IMAGE1 .. image2   image3

click on image2 = IMAGE2 .. image1   image3

click on image3 = IMAGE3 .. image1   image2

click on image1 = IMAGE1 .. image3   image2


So basically, .. if there are a total of 3 image associated with a product, each of those 3 product images should always be visable/clickable on the page, .. as either a large image or a thumbnail image.

How might I accomplish this using javascript?  Is it even possible?

Thanks in advance,
- Yvan
IDEASDesignAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
Here. I think this is what you meant
<HTML>
<HEAD>
<TITLE></TITLE>
 
<script>
<!--
var lastThumb = 'thumb1';
function clickIt(imgName) {
  var temp = document.images['image1'].src.replace('img','th');
 
  if (imgName!='image1') lastThumb = imgName;
  
  document.images['image1'].src=document.images[lastThumb].src.replace('th','img');
  document.images[lastThumb].src=temp;
  
  return false;
  
    
 
}
//-->
</script>
 
</HEAD>
 
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" BACKGROUND="?">
 
<a href="#" onClick="return clickIt('image1')"><img name="image1" src="img1.jpg" border="0" /></a>
 
&nbsp;&nbsp;&nbsp;
 
<a href="#" onClick="return clickIt('thumb1')"><img name="thumb1" src="th2.jpg" border="0" /></a><a href="#" onClick="return clickIt('thumb2')"><img name="thumb2" src="th3.jpg" border="0" /></a>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
Please make the big images exactly the same width - right now the page moves when clicking...

So you want this:









<script>
var thumbArr1 = ["thA1.gif","thA2.gif","thA3.gif"]
var imageArr1 = ["imgA1.gif","imgA2.gif","imgA3.gif"]
var cnt1 = 1;
var thumbArr2 = ["thB1.gif","thB2.gif","thB3.gif"]
var imageArr2 = ["imgB1.gif","imgB2.gif","imgB3.gif"]
var cnt2 = 1;
var thumbArr3 = ["thC1.gif","thC2.gif","thC3.gif"]
var imageArr3 = ["imgC1.gif","imgC2.gif","imgC3.gif"]
var cnt3 = 1;
function click(idx) {
  var thArr = eval('thumbArr'+idx);
  var imgArr = eval('imageArr'+idx);
  var cnt = eval('cnt'+idx);
  document.images['image'+idx].src=imgArr[cnt]
  cnt++; if (cnt>=thArr.length) cnt=0;
  document.images['thump'+idx].src=imgArr[cnt]
  return false;
}
</script>
 
<img name="image1" src="imgA1.gif">
<a href="#" onClick="return click(1)"><img name="thumb1" src="thA1.gif" border="0" /></a>
<img name="image2" src="imgB1.gif">
<a href="#" onClick="return click(1)"><img name="thumb2" src="thB1.gif" border="0" /></a>
<img name="image3" src="imgC1.gif">
<a href="#" onClick="return click(1)"><img name="thumb3" src="thC1.gif" border="0" /></a>

Open in new window

0
 
IDEASDesignAuthor Commented:
Thank you for your response and comments.  I'm a little confused by what you're suggesting, however.  Your example incorporates a total of 18 different images (9 thumbnail images and 9 large images) -- whereas my application only uses a maximum of 6 images:

1) large image #1
2) thumbnail image #1
3) large image #2
4) thumbnail image #2
5) large image #3
6) thumbnail image #3

Was this an oversight on your part, .. or am I just misunderstanding your example?  Do I need to adjust and re-use the filenames that are in the arrays, perhaps?  If so, how?

- Yvan

0
Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

 
Michel PlungjanIT ExpertCommented:
misunderstanding


<script>
var thumbArr1 = ["thA1.gif","thA2.gif","thA3.gif"]
var imageArr1 = ["imgA1.gif","imgA2.gif","imgA3.gif"]
var cnt1 = 1;
function click(idx) {
  var thArr = eval('thumbArr'+idx);
  var imgArr = eval('imageArr'+idx);
  var cnt = eval('cnt'+idx);
  document.images['image'+idx].src=imgArr[cnt]
  cnt++; if (cnt>=thArr.length) cnt=0;
  document.images['thump'+idx].src=imgArr[cnt]
  return false;
}
</script>
 
<img name="image1" src="imgA1.gif">
<a href="#" onClick="return click(1)"><img name="thumb1" src="thA1.gif" border="0" /></a>

Open in new window

0
 
Michel PlungjanIT ExpertCommented:
And adjust the thA1.gif... and imgA1.gif... to the names of your images
0
 
IDEASDesignAuthor Commented:
Hmm, .. I'm not able to get this to work the way I was expecting.  The changing of the IMG SRC only works the first time you click on any of the thumbnails, and the thumbnail images themselves do not change out the way they're supposed to.  Please take a look at the example that I've tried to program, and let me know if you spot anything obvious:

http://208.106.137.37/test/test.html

Thanks,
- Yvan




0
 
Michel PlungjanIT ExpertCommented:
Yes, ONE thumb called name="thumb1"

and not TWO
0
 
IDEASDesignAuthor Commented:
I don't understand what it is you're saying.  

Also .. are there typos in this line ..?

        document.images['thump'+idx].src=imgArr[cnt]

Shouldn't "thump" be "thumb" ?  And shouldn'nt "imgArr" be "thArr" ?  I've made those minor changes to the javascript, but I'm still not getting the desired effect.  Please advise.

- Yvan


0
 
Michel PlungjanIT ExpertCommented:
Sorry I am not at home so I will not answer quickly

1. yes there is a typo
2. you said you have 1 thumb and 1 big image.
You posted code with TWO thumbs

3. I made the script generic to handle more than one image on the page
Here is the simple working and tested version with one image and one thumb
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<TITLE></TITLE>
 
<script>
<!--
var thumbArr = ["th1.jpg","th2.jpg","th3.jpg"]
var imageArr = ["img1.jpg","img2.jpg","img3.jpg"]
var cnt = 1;
function click() {
  document.images['image1'].src=imageArr[cnt]
  cnt++; if (cnt>=thumbArr.length) cnt=0;
  document.images['thumb1'].src=thumbArr[cnt]
  return false;
}
//-->
</script>
 
</HEAD>
 
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#800000" ALINK="#FF00FF" BACKGROUND="?">
 
<img name="image1" src="img1.jpg">
 
&nbsp;&nbsp;&nbsp;
 
<a href="#" onClick="return click(1)"><img name="thumb1" src="th2.jpg" border="0" /></a>

Open in new window

0
 
IDEASDesignAuthor Commented:
I appreciate your taking the time to try to help me with this, .. . but the code you've provided does not work anything like the way I explained -- and it doesn't do anything at all in any version of Internet Explorer.

http://208.106.137.37/test/test.html

To clarify -- what's supposed to happen is that the thumbnail and large images should SWAP when you click on the thumbnail image (the large image should change to the large version of the thumbnail image that you just clicked on, and vice versa).  Please review my original question once more to get a better handle on what it is that I'm trying to accomplish, as I felt that I explained it pretty comprehensively.  

Thanks,
- Yvan
0
 
Michel PlungjanIT ExpertCommented:
Ok I think I get it now

The reason the code did not work in IE was that I unluckily chose a reserved word for my function
If you change click to clickIt then it will work in all browsers

Please be aware that the points we (volunteer experts) are awarded from EE have no intrinsic value at all other than get us the occasional t-shirt and that this is not answering a question but genuine custom scripting - something I normally charge 50 EUR an hour for.

I will try to fix your script later this weekend
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.