CODEWITHSUNDEEP
javascriptjquery
Vicky
Vicky

Reputation: 982

how to show an image in another div after clicking the image in jquery

I have an image in my webpage i want when the user click on the image the current image also appear in the other div i have in my web page i am totally confuse please help me out here is my code.

<div id="img"><img src="download1.jpg"></div>

<div><img src="" class="img2"></div>

<img src="download1.jpg" alt="" class="imgs" id="the_id" width="180" height="60" />
<script type="text/javascript">
$(document).ready(function() {
  $('.imgs').click(function(){
    var idimg = $(this).attr('id');
    var srcimg = $(this).attr('src');
    alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
    $(".img2").attr('src',srcimg);
  });
});
</script>

Upvotes: 0

Views: 7240

Answers (5)

Mio Tra
Mio Tra

Reputation: 1

If you try width this code or here combination you can get very interesting result.Plz look" . Div element have in self img tag width source image,class "img2". Other image in gallery must have equal id, like is id "the_id". And if we clicking any picture that picture is show in space of div tag. How you can get bouncing effect picture must have equal size. I make combination two div tag where firs have class "img2", and second where is my picture distribute my pictures. With this first code on this page I make nice image gallery. Try and you self, this is not hard.

Upvotes: -1

Jamie Barker
Jamie Barker

Reputation: 8256

If you're looking for a better method, see this JSFiddle

It uses the clone function

$('.imgs').click(function(){
    $(this).clone().appendTo('#LoadImageHere').attr('id', 'ClonedImage');
});

It means you don't have an image with an empty src attribute lying around, and you can add attributes to the cloned image as you wish (I added an ID in the example).

Upvotes: 1

Dropout
Dropout

Reputation: 13866

You can achieve this by setting the destination image's src to the same as the img src in the clicked div. Try:

$('.source-img').on('click', function(){
    var src = $(this).children('img').attr('src');  
    $('#destination').children('img').attr('src', src);
});

Check out this jsFiddle.

If you want the images to not have wrappers, then just change the jQuery targetting and leave out the .children(img) part.

Upvotes: 1

Aitazaz Khan
Aitazaz Khan

Reputation: 1605

your code is perfect and will work check out you jquery library that is loaded correctly or not I have not seen any error in your code.

Upvotes: 2

Yasser Shaikh
Yasser Shaikh

Reputation: 47804

Fiddle

Tried using a fiddle and it works, here is the code which I used.

HTML

<div id="img"><img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA"></div>

<div><img src="" class="img2"></div>

<div>click me </div>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA" alt="" class="imgs" id="the_id" width="180" height="60" />

Jquery

$(document).ready(function() {
  $('.imgs').click(function(){
    var idimg = $(this).attr('id');
    var srcimg = $(this).attr('src');
    alert('ID is: '+ idimg+ '\n SRC: '+ srcimg);
    $(".img2").attr('src',srcimg);
  });
});

Upvotes: 4

Related Questions