CODEWITHSUNDEEP
jquerycssajaxhtml
Ash Asley
Ash Asley

Reputation: 23

How can I display the image clicked on another div in jquery

How can I show an image clicked on another div that has larger size to display the image?

I have tried this many times and through many logics but after hours of hardwork i though to post it here. Below is my code :

I need to display a clicked image in smaller slide to a large div display class named largerimage.

$(document).ready(function(){
    $("img").onclick(function()
    {
        $(".largerimage").show($this);
    });
});

Upvotes: 1

Views: 3440

Answers (3)

eylay
eylay

Reputation: 2160

This works:

$(document).ready(function(){
  var height1 = $("div.first").height();
  var width1 = $("div.first").width();
  var area1 = height1*width1;
  var height2 = $("div.second").height();
  var width2 = $("div.second").width();
  var area2 = height2*width2;

  if (area1>area2) {
    $("div.first").click(function(){
      $("img").show();
    });
  }
  if (area2>area1) {
    $("div.second").click(function(){
      $("img").show();
    });
  }
});

check this fiddle

Upvotes: 0

Parveen Kumar
Parveen Kumar

Reputation: 342

Try This, It may help you 

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script>
      $(document).ready(function(){
        $('img').click(function(){
          $largeimage = $(this).clone().css({height:"300", width:"300"});
          $(".largerimage").html($largeimage);
        });
      });
    </script>
  </head>
  <body>
    <img width="50" src="C:\Users\buffer\Pictures\a.jpg" />
    <img width="100" src="C:\Users\buffer\Pictures\b.png" />
    <img width="200" src="C:\Users\buffer\Pictures\c.png"/>
    <div class="largerimage"></div>
  </body>
</html>

There are three images with unequal width that are showed as fixed width in larger div.

Upvotes: 1

rrk
rrk

Reputation: 15846

I think this will do.

$("img").click(function(){
  $img = $(this).clone();
  $(".largerimage").show().html($img.removeAttr('width'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img width="100" src="http://dummyimage.com/300x200/000/fff"/>
<div class="largerimage"></div>

Upvotes: 1

Related Questions