Changing img src

NancyJ

03-08-2012, 10:03 PM

<img src = "/images/boats/large/my-red-pepper---8019812411a.jpg" width = "690" height = "350" id = "main_image" /> <div id = "gallery_thumbs">
<img src = "/images/nav_left.png" alt = "Back" id = "nav_back" /> <div id = "inner_thumbs">
<div style="width:10000px" id="sliding_thumbs">
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019812411a.jpg" /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019712411a.jpg" /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019412411a.jpg" /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019312411a.jpg" /></a>

<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019212411a.jpg" /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019512411a.jpg" /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/my-red-pepper---8019612411a.jpg" /></a>
<a href = "/images/boats/large/my-red-pepper---8019812411a.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" ><img src = "/images/boats/gallery_thumbs/big_my-red-pepper---12411-main.jpg" /></a>
</div>
</div>

Why isn't this working? document.getElementById('main_image').src=this.href;return false;
I originally had this:

$('#sliding_thumbs a').click(function()
{
$('#main_image').attr('src',this.href);
return false;
})

but that didn't work so I put the onclick inline and it still isn't working but I can't fathom why. I have confirmed that the #main_image is being detected correctly (by alerting the src) and that the this.href part contains the url of an image but nothing happens. There is no error and the large image doesn't load in the same window (so the return false part is working!)

DanInMa

03-08-2012, 10:21 PM

I think, perhaps, it's referring to the main_image the way you have "this.href "in there

here's another way

$('#sliding_thumbs a').click(function(e)
{
e.preventDefault();
var myurl= $(this).attr('href');
$('#main_image').attr('src',myurl);
});

also if your defining this before page load in the head, use

$(document).ready(function(){
$('#sliding_thumbs a').click(function(e)
{
e.preventDefault();
var myurl= $(this).attr('href');
$('#main_image').attr('src',myurl);
});
});

DanInMa

03-08-2012, 10:27 PM

if for some reason it doesnt like displaying the new image, you could try recreating it.

$(document).ready(function(){
$('#sliding_thumbs a').click(function(e)
{
e.preventDefault();
var myurl= $(this).attr('href');
var origIMG = $('#main_image')
var newIMG = origIMG.clone().attr("src",myurl)
origIMG.replaceWith(newIMG)
});
});

webdev1958

03-08-2012, 10:50 PM

Why isn't this working?

The way you are doing it is very messy imo. If it's not working then there is a problem somewhere else in your code.

The demo below shows that the concept of what you are trying to do does work.

In the "real world" I would put all the <img> id's and hrefs in an array and then loop through the array on the server to create the html dynamically. That way, if you need to change anything, you need to make the change in just one location and not potentially several.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>
<style type="text/css"></style>
<script type="text/javascript"></script>
</head>
<body>
<div>
<a href = "num1.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" >
<img src="num1.jpg" alt="" />
</a>
<a href = "num2.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" >
<img src="num2.jpg" alt="" />
</a>
<a href = "num3.jpg" onclick = "document.getElementById('main_image').src=this.href;return false;" >
<img src="num3.jpg" alt="" />
</a>
</div>
<div>
<img id="main_image" src="" alt="" />
</div>
</body>
</html>

NancyJ

03-08-2012, 11:42 PM

I am only changing it in one place, the html is generated by php ;) But that isn't really relevant to the question.

I've found the problem - it was staring me right in the face - all the links go the large image that was already there. That's what I get for working late.