Hi there, on one of my pages I am working on http://www.antobbo.webspace.virginmedia.com/photography/category_1.htm I have a script which works in firefox, opera but it doesn't in chrome and IE.
Now, let me explain first what the script is supposed to do. On the above page if you click on the second thumbnail image the main image changes (and the thumbnail itself changes): then if you click on the third thumbnail the main image changes again as well as the thumbnail, and I was thinking to do the same with the rest of them.
This is the script and the function is called with an onClick from the bullet list:

...
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
<!--
function changeThumbnail_2()
{
var shaded_image = 'images/thumbnail_2_shaded.jpg';
document.thumbnail_3.src= 'images/thumbnail_3.jpg';
document.thumbnail_2.src= shaded_image;
var pic_2 = 'images/category_1_picture_2.jpg';
$(document).ready(function(){
$("#pic_1").fadeOut(1000, function(){
$(this).attr("src", pic_2).fadeIn(1000);
});
});

}

/* CHANGE THUMBNAIL 3*/
function changeThumbnail_3()
{
var shaded_image_3 = 'images/thumbnail_3_shaded.jpg';	
document.thumbnail_2.src = 'images/thumbnail_2.jpg'
document.thumbnail_3.src= shaded_image_3;
var pic_3 = 'images/category_1_picture_3.jpg';
$(document).ready(function(){
$("#pic_1").fadeOut(1000, function(){
$(this).attr("src", pic_3).fadeIn(1000);
});
});
}

//-->
</script>
</head>
...
<body id="page_body">
...
<div class="thumbnails_wrapper"> <!--THUMBNAILS WRAPPER -->
<ul>
<li><a href="#"><img src="images/thumbnail.jpg" alt=" "></a></li>
<li onClick="changeThumbnail_2()"><img src="images/thumbnail_2.jpg" alt=" " id="thumbnail_2"></li>
<li onClick="changeThumbnail_3()"><img src="images/thumbnail_3.jpg" alt=" " id="thumbnail_3"></li>
</ul>

<ul>
<li><a href="#"><img src="images/thumbnail_4.jpg" alt=" "></a></li> <!-- I don't need style="border:0;" because I put that in the overall settings in the container.css -->
<li><a href="#"><img src="images/thumbnail_5.jpg" alt=" "></a></li>
<li><a href="#"><img src="images/thumbnail_6.jpg" alt=" "></a></li>
</ul>

</div> <!--END OF THUMBNAILS WRAPPER -->
</body>

I know that the code is a clunky (I am still a very beginner) but it works ok except in chrome and IE. I think I know where the error is because when I open the page in chrome and run the developer tool -> script tab I get an error for this line document.thumbnail_3.src= 'images/thumbnail_3.jpg'; (and similar lines I suppose) saying: Uncaught typeError:cannot set property 'src' of undefined" but I have no idea what that means and how to fix it.
That line is supposed to make sure that the 3rd thumbnail image is restored if I click on a the 2nd thumbnail.
Is there an easy way to fix that?
thanks

Member Avatar for stbuchok

Try this:

//imageSource will be the image you want to put as the bigImage
function changeToBig(imageSource){
    //since you are using jQuery, use it to reference your elements
    $('#bigImage').attr('src', imageSource);
}

...

<img id="bigImage" src="" />

<img id="thumb1" src="images/thumbnail_small.jpg" onclick="changeToBig('images/thumbnail_big.jpg');" />
<img id="thumb2" src="images/thumbnai2_small.jpg" onclick="changeToBig('images/thumbnai2_big.jpg');" />
<img id="thumb3" src="images/thumbnai3_small.jpg" onclick="changeToBig('images/thumbnai3_big.jpg');" />

stbuchok thanks for that.
I tried to implement your solution but it didn't quite work. That said when you said that my elements need to be referenced, you set my off thinking. I have done some more tests and I realized that the offending lines were

document.thumbnail_3.src= 'images/thumbnail_3.jpg';
document.thumbnail_2.src= shaded_image;

For some reason IE and chrome don't like those lines whereas opera and firefox are fine with that. Anyway after some research I think I understood that they had to be rewritten in a clearer way, so I came up with these lines:

var new_thumb_3 = document.getElementById('thumbnail_3')
new_thumb_3.src = 'images/thumbnail_3.jpg';
var new_thumb_2 = document.getElementById('thumbnail_2')
new_thumb_2.src = 'images/thumbnail_2_shaded.jpg';

so fundamentally I got the element by its id and assigned it to a variable, then I used

.src

to change the image. The thing is that in my script I have to change 3 images: the one in the big box, the thumbnail I click on (from normal to shaded) and the thumbnail I clicked away from (from shaded to normal).
Anyway, it works fine now in all the browsers, thanks a lot for your help!

Violet,

The trick is to avoid the need for one function per thumbnail by writing a generalised function, which I have attempted below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var $main_pic = $("#pic_1");
	var $current_thumbnail = null;
	var current_thumbnail_src = null;

	$(".thumbnails_wrapper a").click(function() {
		var $this = $(this);//the clicked <a> element
		var index = $this.attr('id').replace('thumbnail_', '');//0, 1, 2 etc.
		if($current_thumbnail && current_thumbnail_src) {
			$current_thumbnail.attr('src', current_thumbnail_src);//reset previous thumbnail
		}
		$current_thumbnail = $this.find("img");//the thumbnail just clicked on.
		current_thumbnail_src = $current_thumbnail.attr('src');
		$current_thumbnail.attr('src', 'images/thumbnail_' + index + '_shaded.jpg');
		$main_pic.fadeOut(1000, function() {
			$(this).attr('src', 'images/category_1_picture_' + index + '.jpg').fadeIn(1000);
		)};
	});
});
</script>
</head>

<body id="page_body">

<div class="thumbnails_wrapper">
	<ul>
		<li><a href="#" id="thumbnail_0"><img src="images/thumbnail_0.jpg" alt=""></a></li>
		<li><a href="#" id="thumbnail_1"><img src="images/thumbnail_1.jpg" alt=""></a></li>
		<li><a href="#" id="thumbnail_2"><img src="images/thumbnail_2.jpg" alt=""></a></li>
	</ul>
	<ul>
		<li><a href="#" id="thumbnail_3"><img src="images/thumbnail_4.jpg" alt=""></a></li>
		<li><a href="#" id="thumbnail_4"><img src="images/thumbnail_5.jpg" alt=""></a></li>
		<li><a href="#" id="thumbnail_5"><img src="images/thumbnail_6.jpg" alt=""></a></li>
	</ul>
</div>

</body>
</html>

(untested)

You will see that I have changed the HTML as well as the javascript.

Airshow

Thanks Airshow,
I will give it a go, I must admit that using a function for each image is not the best thing to do!
thanks

Violet,

Thanks Airshow,
I will give it a go, I must admit that using a function for each image is not the best thing to do!
thanks

It's not wrong as such, just bulky and "inelegant" :icon_wink:.

Airshow

Its a nice one..!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.