Solved

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

Posted on 2008-06-17
13
1,406 Views
Last Modified: 2011-10-03
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
0
Comment
Question by:IDEASDesign
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 4
13 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21810907
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
 

Author Comment

by:IDEASDesign
ID: 21813186
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21814411
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
MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21814417
And adjust the thA1.gif... and imgA1.gif... to the names of your images
0
 

Author Comment

by:IDEASDesign
ID: 21814911
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21815649
Yes, ONE thumb called name="thumb1"

and not TWO
0
 

Author Comment

by:IDEASDesign
ID: 21815795
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21826160
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
 

Author Comment

by:IDEASDesign
ID: 21830793
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 21836473
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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 21837632
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

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

739 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question