CODEWITHSUNDEEP
jqueryhtmlgallerylightboxphoto-gallery
Olly Sholotan
Olly Sholotan

Reputation: 31

Jquery code that copies one pictures source to another

I plan on eventually making a lightbox but I want to learn my way around javascript. My goal is that when you click one of the images, then it copies that images source and into the div with the id of "copiedTo"

I just cant figure out how my code is wrong. Here is the html:

<body>
    <div id="gallery">
        <ul>
            <li>
                <img src="1.jpg"/>
            </li>
            <li>
                <img src="2.jpg"/>
            </li>
            <li>
                <img src="1.jpg"/>
            </li>
            <li>
                <img src="2.jpg"/>
            </li>
            <li>
                <img src="1.jpg"/>
            </li>
            <li>
                <img src="2.jpg"/>
            </li>
        </ul>
    </div>

    <div id="copiedTo"><img src="#"/></div>
</body>

And my Javascript:

$(document).ready(function () {

            var image = $(this).attr('src');
            $('#gallery ul img').click(function() {
            $('#CopiedTo img').attr('src', image);
        });

        });

Thanks.

Upvotes: 2

Views: 224

Answers (4)

GDW
GDW

Reputation: 238

I'd be more inclined to duplicate the image rather than loading an image tag with no source when the page loads. It will look like you have a missing image on some browsers.

http://jsfiddle.net/ueUwA/

HTML:

<ul>
    <li><img src="http://placehold.it/100x100/e74c3c/ffffff" alt="#" /></li>
    <li><img src="http://placehold.it/100x100/3498db/ffffff" alt="#" /></li>
</ul>
<div class="copied"></div>

jQuery:

$('img').on('click', function(){
    $('.copied').html($(this).parent().html());
});

Here's a simple jQuery lightbox I've written from scratch that loads the images from the href value around the thumbnail.

Upvotes: 0

harshadura
harshadura

Reputation: 234

here's the working jsfiddle: http://jsfiddle.net/mrT7t/ You just had issue with that CopiedTo selector.

<div id="copiedTo"><img id="img2" src="#"/></div> 

$(document).ready(function () {

        var image = $(this).attr('src');

        $('#gallery ul img').click(function() {
            var image = $(this).attr('src');
             $('#img2').attr('src', image);
        });

});

Upvotes: 0

Subodh Ghulaxe
Subodh Ghulaxe

Reputation: 18671

Please update your code to 

$(document).ready(function () {
     $('#gallery ul img').click(function() {
           var image = $(this).attr('src');
           $('#copiedTo img').attr('src', image);
     });
});

Also change your CopiedTo to copiedTo , check working jsfiddle here http://jsfiddle.net/5AGmp/

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337656

You need to set image inside the click handler, otherwise this will refer to the window, not the img element which was clicked on.

$(document).ready(function () {
    $('#gallery ul img').click(function() {
        var image = $(this).attr('src');
        $('#CopiedTo img').attr('src', image);
    });
});

Upvotes: 0

Related Questions