Solved

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

Posted on 2008-06-17
13
1,400 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
  • 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…

705 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now