javascript - how to show an image in another div after clicking the image in jquery - Stack Overflow

admin管理员组

文章数量:1331702

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>

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>

• javascript
• jquery

Share Improve this question Follow asked Mar 26, 2014 at 8:27 VickyVicky 98222 gold badges1111 silver badges3030 bronze badges 1

• Working fine!! jsfiddle/kunknown/pb4US – Kiran Commented Mar 26, 2014 at 8:31

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

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./images?q=tbn:ANd9GcTgAVjAiDPV-oy-o9mvdHEsVoACUKJIuFcn08RJ5kRYINY4oqjPcA"></div>

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

<div>click me </div>
<img src="https://encrypted-tbn2.gstatic./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);
  });
});

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.

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.

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

If you try width this code or here bination 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 bination 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.

本文标签： javascripthow to show an image in another div after clicking the image in jqueryStack Overflow