I'm working on a project to swap thumbnail images to a larger image when the thumbnail is selected and it's working ok however, I would now like the end users to be able to click on the larger image to show it in jquery.lightbox-0.5. The problem is that after selecting the thumbnail the loaded image does not have a href. I was hoping that I could pass the images src to the href using an onclick event, but I can't figure out how to make this work.
Here's my code
<script type="text/javascript">
function swaphref(image) {
document.getElementById('image').setAttribute('href', this.src);
//window.alert(document.getElementById('image').src);
}
</script>
<body>
<div class="productimage" id="gallery"><a onclick="swaphref(this)"><img id="image" img src="product_images/<?php echo $targetID; ?>/<?php echo $targetID; ?>.jpg" width="253" height="378" border="0" /></a></div>
</body>
I'm working on a project to swap thumbnail images to a larger image when the thumbnail is selected and it's working ok however, I would now like the end users to be able to click on the larger image to show it in jquery.lightbox-0.5. The problem is that after selecting the thumbnail the loaded image does not have a href. I was hoping that I could pass the images src to the href using an onclick event, but I can't figure out how to make this work.
Here's my code
<script type="text/javascript">
function swaphref(image) {
document.getElementById('image').setAttribute('href', this.src);
//window.alert(document.getElementById('image').src);
}
</script>
<body>
<div class="productimage" id="gallery"><a onclick="swaphref(this)"><img id="image" img src="product_images/<?php echo $targetID; ?>/<?php echo $targetID; ?>.jpg" width="253" height="378" border="0" /></a></div>
</body>
- Why do you want to set the "href" attribute of an "img" element? The interesting attribute is "src", not "href", unless I'm missing something about the lightbox plugin. – Pointy Commented Jun 13, 2011 at 12:09
- because the onclick is on the a, "this" will refer to the a element not the image. – Matthew Riches Commented Jun 13, 2011 at 12:11
- Should the following work.... – Jason Commented Jun 13, 2011 at 13:12
- Should the following work.... <script type="text/javascript"> function swaphref(image) { document.getElementById('image').setAttribute('src', this.href); window.alert(document.getElementById('image').src); window.alert(document.getElementById('image').href); } </script> <body> <a ><img src="product_images/1.jpg" name="image" width="340" height="480" id="image" /></a> <p><a href="href.php" onclick="swaphref(this)">add href</a></p> </body> I get undefined on the href alter, why? – Jason Commented Jun 13, 2011 at 13:19
4 Answers
Reset to default 3Ok. I got this working. The 'a' was missing an id.
Here's the code.....
<script type="text/javascript">
function swaphref(imagehref) {
document.getElementById('imagehref').setAttribute('href', image.src);
//window.alert(document.getElementById('image').src);
//window.alert(document.getElementById('imagehref').href);
}
</script>
<body>
<div class="productimage" id="gallery"><a href="#" id="imagehref" onclick="swaphref(this)"><img id="image" img src="product_images/<?php echo $targetID; ? >/<?php echo $targetID; ?>.jpg" width="253" height="378" border="0" /></a></div>
</body>
Thank you to everyone who tried to help.
I think you're confusing the href and src attributes. Looking at your code I see two things:
document.getElementById('image').setAttribute('href', this.src); //window.alert(document.getElementById('image').src);
You're setting the image's href-attribute, which should src, and your getting the src-attribute from the link, which should be href. The odd thing is that your correct in the window.alert
So:
document.getElementById('image').setAttribute('src', this.href'); window.alert(document.getElementById('image').src
Should work.
var image = document.getElementById('image');
image.setAttribute('href', image.src);
Should work.
change this line
document.getElementById('image').setAttribute('href', this.src);
to this way
document.getElementById('image').setAttribute('src', this.href);