Switching pictures code - 7 thumbnails, 1 main image

[Disloxic2]

Hi Guys,

I need the following code to allow all common image formats, not just .jpgs, as I now need to display animated .gif images, as well as .jpgs.

How could this be done?

Many thanks,

Dave

ps: the code below uses a loop to count through the 7 images, replacing the ends of the filenames "_1.jpg", "_2.jpg", etc, as each image on the system has been suffixed with this format. I am happy to lose the loop if need be, and just have 7 different functions set up, if that makes it any easier.

how_many_thumbnails=7

	var id="ctl00_ctl00_mainslot_partmedia_nppmblock_imgPart";
	var name=document.getElementById(id).src;
	
	for (i=1;i <= how_many_thumbnails;i++) {
		newsrc=name.replace(/_1.jpg/i, "_"+i+".jpg");
		
		document.getElementById("tn"+i).src=newsrc;
		}
	
	function showpic(number) {
	document.getElementById(id).src=name.replace(/_1.jpg/i, "_"+number+".jpg");
	thePath=document.getElementById(id).src;
	}

[Airshow]

Will they be randomly mixed, some jpgs and some gifs?

If so then you can't do this simply with a rule-based function.

Airshow

[Disloxic2]

Thanks Airshow,

I actually just need the 7th thumbnail to show .gif files.

Is this do-able?

Many thanks

[Airshow]

Disloxic2,

Just edit ".jpg" to ".gif" all through!?

If that's too simple:

onload = function() {
	var how_many_thumbnails = 7;
	var id = "ctl00_ctl00_mainslot_partmedia_nppmblock_imgPart";
	var img = document.getElementById(id);
	var fileExtn = ".jpg";//Edit as required to ".gif" or whatever.
	var pattern = new RegExp("_1" + fileExtn, "i");
	
	// This is slightly tricky - a function that returns a function.
	// We do this to remember src independently for each thumbnail in a "closure" formed by the outer function
	showpic_closure = function(src) {
		return function() {
			img.src = src;
			img.alt = src;//debug
		};
	};

	//load thumbnails
	var newsrc, thumbImg;
	for (i=1; i<=how_many_thumbnails; i++) {
		newsrc = img.src.replace(pattern, '_' + i + fileExtn);
		thumbImg = document.getElementById("tn" + i);
		if(thumbImg) {
			thumbImg.src = newsrc;
			thumbImg.alt = newsrc;//debug
			thumbImg.onclick = showpic_closure(newsrc);
		}
	}
}

I'm not sure this is exactly what you want because the main image will show the same srcs as the thumbnails (as per your original code). Typically, thumbnails show a version of the main image that has been reduced (eg. in Paintshop/Photoshop or by some server-side process). If you want main images to be different from the thumbnails, then (after creating the thumbnails) pass the result-of-some-string-manipulation-on-newsrc to showpic_closure.

You may want to click something in addition to the thumbnails. If so, then create another line like thumbImg.onclick = showpic_closure(newsrc); , to attach an onclick handler to, say, a set of <a>...</a> links.

Airshow

[Disloxic2]

Thanks for doing that code Airshow, but I need the first 6 images to be jpgs and the 7th thumbnail to always be a .gif file.

I have tried this crude method below, but it doesnt work. What am i doing wrong?
Hopefully the below code should help you to understand what I want to acheive?
Many thanks!:

how_many_thumbnails=7

	var id="ctl00_ctl00_mainslot_partmedia_nppmblock_imgPart";
	var name=document.getElementById(id).src;
        var FILETYPE=".jpg";
	
	for (i=1;i <= how_many_thumbnails;i++) {

if (i=7){
FILETYPE=".gif";
}
else{
FILETYPE=".jpg";
}
		newsrc=name.replace(/_1+FILETYPE/i, "_"+i+FILETYPE);
		
		document.getElementById("tn"+i).src=newsrc;
		}
	
	function showpic(number) {
	document.getElementById(id).src=name.replace(/_1+FILETYPE/i, "_"+number+FILETYPE);
	thePath=document.getElementById(id).src;
	}

[Airshow]

Dis..

That's just a very light mod to the code in my last post:

onload = function() {
	var how_many_thumbnails = 7;
	var id = "ctl00_ctl00_mainslot_partmedia_nppmblock_imgPart";
	var img = document.getElementById(id);
	var pattern = /_1.jpg/i;//here .jpg is hard coded
	
	// This is slightly tricky - a function that returns a function.
	// We do this to remember src independently for each thumbnail in a "closure" formed by the outer function
	showpic_closure = function(src) {
		return function() {
			img.src = src;
			img.alt = src;//debug
		};
	};

	//load thumbnails
	var newsrc, thumbImg;
	for (i=1; i<=how_many_thumbnails; i++) {
		var filetype = (i<7) ? '.jpg' : '.gif';//here's the rule for choosing .jpg/.gif
		newsrc = img.src.replace(pattern, '_' + i + filetype);
		thumbImg = document.getElementById("tn" + i);
		if(thumbImg) {
			thumbImg.src = newsrc;
			thumbImg.alt = newsrc;//debug
			thumbImg.onclick = showpic_closure(newsrc);
		}
	}
}

Airshow

[Disloxic2]

Many many thanks, Airshow!

This code works a treat and I am very impressed how you managed to enhance the code without even needing to see the rest of the related code, and how you understood what I needed very easily.

You have really helped me out a great deal and I thank you!