I've been working on a Javascript photo gallery and I want it to be very user-friendly. This involves only having to use one image and one link per image. I have it so all the images appear in a scrolling div on the left and onClick it is suppose to change the image source on the right but I can't seem to get javascript to get the image source from the original image and change the second one with it. I've tried a few other ways but this is the way I like and if I could get it to work it would be perfect.
This is inside a table so it is align differently I'm just giving the code needed.
This code was given below but it seems as though he deleted his answer. I think you were much close than me!
Javascript:
<script type="Text/javscript">
function setImage(this) {
document.getElementById("ImageFrame").src = this.childNodes[0].src;
}
</script>
break
<div style="width:275;height:400;overflow-x:scroll;">
<a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0421.jpg" /></a>
<a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0422.jpg" /></a>
<a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0423.jpg" /></a>
</div>
The image being changed.
<div>
<img id="ImageFrame" src="JCF/PICT0421.jpg" width="400" />
</div>
I've been working on a Javascript photo gallery and I want it to be very user-friendly. This involves only having to use one image and one link per image. I have it so all the images appear in a scrolling div on the left and onClick it is suppose to change the image source on the right but I can't seem to get javascript to get the image source from the original image and change the second one with it. I've tried a few other ways but this is the way I like and if I could get it to work it would be perfect.
This is inside a table so it is align differently I'm just giving the code needed.
This code was given below but it seems as though he deleted his answer. I think you were much close than me!
Javascript:
<script type="Text/javscript">
function setImage(this) {
document.getElementById("ImageFrame").src = this.childNodes[0].src;
}
</script>
break
<div style="width:275;height:400;overflow-x:scroll;">
<a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0421.jpg" /></a>
<a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0422.jpg" /></a>
<a href="#" onclick="setImage(this);"><img class="gallery" src="JCF/PICT0423.jpg" /></a>
</div>
The image being changed.
<div>
<img id="ImageFrame" src="JCF/PICT0421.jpg" width="400" />
</div>
5 Answers
Reset to default 1here is a working example. NOTE: a.getElementsByTagName('img')[0].src as different browsers would add nodes to tag before and after the child tag. It is safe to use getElementsByTagName('img')[0].src
<html>
<head>
<script type="text/javascript">
function setImg(a){
//alert(a.getElementsByTagName('img')[0].src);
document.getElementById('ImageFrame').src =
a.getElementsByTagName('img')[0].src
}
</script>
</head>
<body>
<a href="#" onclick="setImg(this);"><img src="JCF/PICT0421.jpg"></a>
<div>
<img id="ImageFrame" src="JCF/PICT0421.jpg" width="400" />
</div>
</body>
</html>
var pic1 = document.getElementById("image1");
var src = pic1.src; // here is the src for image1
var pic2 = document.getElementById("image2");
pic1.src = src; // here we set the src for image2
So this code will take the image src from image1 and put it in image2.
I believe something like this should work for you:
HTML:
<a href="#" onclick="setImage(this);"><img class="gallery" id="image1" src="image1.jpg" /></a>
Javascript:
function setImage(imgParent) {
document.getElementById("ImageFrame").src = imgParent.childNodes[0].src;
}
Live DEMO
The Demo will work better when you actually load in images. However, if you inspect the broken images, you can see that it is loading in the new image correctly.
Edit:
Since Kaf mentioned that he has had issues with childNodes, you may want to try this out instead:
Javascript:
function setImage(imgParent) {
document.getElementById("ImageFrame").src = imgParent.getElementsByTagName('img')[0].src;
}
assuming you can use Jquery
$('.imageClass').click(function(){
var srcToCopy = $(this).attr('src');
$(somewheretoputsrc).attr('src', srcToCopy);
})
this code should work
edit : fiddle edited with working image http://jsfiddle/jbduzan/b7adx/1/
You should go with so called "Unobtrusive JavaScript", i.e. don't mix content with JavaScript and apply the desired behaviors after the window has been loaded. Something like that:
function addDomListener(element, eventName, listener) {
if (element.addEventListener) // most browsers
element.addEventListener(eventName, listener, true);
else if (element.attachEvent) // IE
element.attachEvent('on' + eventName, listener);
}
window.onload = function() {
var elements = getElementsByClassName('thumb-link');
for (int i=0; i < elements.size(); i++) {
var el = elements[i];
addDomListener(el, "click", function () {
setImage(el);
});
}
}
getElementsByClassName still needs an implementation here and every a tag that had onlick previously needs the class 'thumb-link'. But I'm sure you'll figure that out.
Using a library like jQuery or Prototype.js would make it easier here...