Jump to content

File reference for image swap


kurt.santo
 Share

Recommended Posts

Having the following funtion:

function show_big(src) {document.getElementById('big_image').src = src;}

and applying it to my html via

<img src="Furniture/ShanghaiTh.jpg" width="100" height="68" onclick="show_big('furniture/Shanghai.jpg')" class="thumb"><img src="Furniture/Shanghai-Th-2.jpg" width="100" height="68" onclick="show_big('furniture/Shanghai-2.jpg')" class="thumb" /><img src="Furniture/Shanghai-Th-3.jpg" width="100" height="68" onclick="show_big('furniture/Shanghai-3.jpg')" />

Is there a way to have

onclick="show_big('furniture/Shanghai-3.jpg')"

reference whatever there is in the img src but replace a bit of the name? I am working on this product template, which obviously will have in each situation different images in it. I thought I might have a naming scheme as ProductName-Th-1, ProductName-Th-2, ProductName-Th-3 for the thumbs, ProductName-1, ProductName-2, ProductName-3 for the main images and ProductName-Big-1, ProductName-Big-2, ProductName-Big-3 for the enlarged versions (I also plan for a pop-up with an enlarged version). I am open for different naming schemes if my suggestion is not a good idea. Also, if you know a good way to get the reference for the appropriate files let me know...Kurt

Link to comment
Share on other sites

I don't know if this is the best way to do that, but you could head in this direction:

<img src="ProducttName-Th-1.jpg" onclick="showbig(this);" /><img src="ProducttName-Th-2.jpg" onclick="showbig(this);" /><img src="ProducttName-Th-3.jpg" onclick="showbig(this);" />

<script>function showbig(element){	var src = element.src;	src = src.replace("Th-","");	//document.getElementById('big_image').src = src;	// for debugging:	alert(src);}</script>

Link to comment
Share on other sites

What is the difference between show_big(src) and show_big(element)? Kurt
Less typing. :)Rather than having to type, show_big('ProducttName-Th-1.jpg'), you could just type show_big(this) and get at the src by using this.src. That way, you don't have to change the javascript/html if you change the src of the image.
Link to comment
Share on other sites

Less typing. :)Rather than having to type, show_big('ProducttName-Th-1.jpg'), you could just type show_big(this) and get at the src by using this.src. That way, you don't have to change the javascript/html if you change the src of the image.
Oh, thats the one... Cheers, mate:-) Still biting my teeth out with that JavaScript image swap... When I search Google it seems no one has done such a thing, what is a bit weird as all the big sites, which sell hundreds of products seem to do it (I am guessing, could not imagine they are giving a reference to each product photo they have). Is this maybe a thing for PHP? Found one site where someone has done sth with PHP in that direction...Kurt
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...