CODEWITHSUNDEEP
javascripthtmlimage
Spencer May
Spencer May

Reputation: 4505

Javascript get image source and inject into another image source

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>

Upvotes: 0

Views: 15522

Answers (5)

Josh Mein
Josh Mein

Reputation: 28645

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;
}​

Upvotes: 1

Lincoln
Lincoln

Reputation: 785

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...

Upvotes: 0

jbduzan
jbduzan

Reputation: 1126

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.net/jbduzan/b7adx/1/

Upvotes: 0

Kaf
Kaf

Reputation: 33829

here 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>

Upvotes: 1

Farhan Ahmad
Farhan Ahmad

Reputation: 5198

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.

Upvotes: 1

Related Questions