jQuery - replace thumbnail image with fullsize and smoothly animate the transition and scale

Question

I have a wordpress page where I want to display a thumbnail image which when clicked, is replaced with the fullsize image and scales up smoothly to the new full size. My wordpress function is able to output the src, width and height for both the thumbnail and the fullsize.

I have tried two solutions to this problem:

1) Thumbnail is wrapped in link to full-size - http://jsbin.com/inuxej/8

2) Thumbnail is next to hidden (display: none) full-size - http://jsbin.com/ogasic

They both work but the transition is not smooth. I'm not quite sure how I can achieve a smooth scaling from the thumbnail to the fullsize. Does anyone have an idea how I can make this transition smooth so once the thumbnail is clicked, the fullsize is loaded and then the whole box animates and scales up to the full size?

Many many many thanks in advance!

--

Attempt 1:

JSBIN: http://jsbin.com/inuxej/8

Javascript:

$(document).ready(function(){

// random resize images
$('.portfolio-image img').each(function() {
  var currWidth = $(this).attr("width");
  var currHeight = $(this).attr("height");

  $(this).removeAttr("width");
  $(this).removeAttr("height");

  var transformScale = (Math.floor(Math.random()*60 + 40))/100;

  $(this).width(Math.floor(currWidth*transformScale));
  $(this).height(Math.floor(currHeight*transformScale));
});

// portfolio images - make bigger on click
$('.portfolio-image a').click(function(e) {
  e.preventDefault();

  var smallImageSrc = $(this).children('img').attr("src");
  var bigImageSrc = $(this).attr("href");

  $(this).children('img').removeAttr("width");
  $(this).children('img').removeAttr("height");
  $(this).children('img').attr("src", bigImageSrc);

  $(this).children('img').load(function(){
    $(this).removeAttr("style");
    $('#ajax-loader').fadeOut();
  });
});

});

HTML:

  <!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }

  .portfolio-image {
    float: left;
    margin: 15px;
  }

  a, img {
    border: none;
    text-decoration: none;
  }

</style>
</head>
<body>
  <div class="portfolio-image">
    <a href="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/1-full.jpg">
    <img src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/1-thumb.jpg" height="300" width="200"/>
    </a>
  </div>

  <div class="portfolio-image">
    <a href="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/2-full.jpg">
    <img src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/2-thumb.jpg" height="300" width="200"/>
    </a>
  </div>

  <div class="portfolio-image">
    <a href="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/3-full.jpg">
    <img src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/3-thumb.jpg" height="300" width="200"/>
    </a>
  </div>

  <div class="portfolio-image">
    <a href="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/4-full.jpg">
    <img src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/4-thumb.jpg" height="300" width="200"/>
    </a>  
  </div>
</body>
</html>

I have also tried an alternate solution where wordpress outputs both images and the fullsize is hidden. However, this seems to also cause a problem as jquery seems to obtain dimension values as undefined as the object is set to display: none.

Attempt 2:

JSBIN: http://jsbin.com/ogasic

Javascript:

$(document).ready(function(){

// random resize images
$('.portfolio-image img').each(function() {
  var currWidth = $(this).attr("width");
  var currHeight = $(this).attr("height");

  $(this).removeAttr("width");
  $(this).removeAttr("height");

  var transformScale = (Math.floor(Math.random()*60 + 40))/100;

  $(this).width(Math.floor(currWidth*transformScale));
  $(this).height(Math.floor(currHeight*transformScale));
});

// portfolio images - make bigger on click
$('.portfolio-image').click(function() {

$(this).attr("width", $(this).children(".portfolio-image-display").attr("width"));
$(this).attr("height", $(this).children(".portfolio-image-display").attr("height"));

var bigImageSrc = $(this).children(".portfolio-image-full").attr("src");
var bigImageWidth = $(this).children(".portfolio-image-full").attr("width");
var bigImageHeight = $(this).children(".portfolio-image-full").attr("height");

$(this).children('.portfolio-image-display').attr("src", bigImageSrc);

$(this).children('.portfolio-image-display').load(function(){
    $(this).animate({
        height: bigImageHeight,
        width: bigImageWidth
    }, 1000, function() {
        //after
    });
});
    });


});

HTML:

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }

  .portfolio-image {
    float: left;
    margin: 15px;
  }

  .portfolio-image-full { 
    display: none;
  }

  a, img {
    border: none;
    text-decoration: none;
  }

</style>
</head>
<body>
  <div class="portfolio-image">
    <img class="portfolio-image-display" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/1-thumb.jpg" height="300" width="200"/>
    <img class="portfolio-image-full" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/1-full.jpg" height="600" width="400"/>
  </div>
  <div class="portfolio-image">
    <img class="portfolio-image-display" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/2-thumb.jpg" height="300" width="200"/>
    <img class="portfolio-image-full" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/2-full.jpg" height="600" width="400"/>
  </div>
  <div class="portfolio-image">
    <img class="portfolio-image-display" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/3-thumb.jpg" height="300" width="200"/>
    <img class="portfolio-image-full" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/3-full.jpg" height="600" width="400"/>
  </div>
  <div class="portfolio-image">
    <img class="portfolio-image-display" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/4-thumb.jpg" height="300" width="200"/>
    <img class="portfolio-image-full" src="http://dl.dropbox.com/u/396112/_IMG/_misc/testimages/4-full.jpg" height="600" width="400"/>
  </div>
</body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 12:06

0

Once the users clicks the thumbnail, you could replace the thumbnail with the full image, scaled down to the thumbnail's size (make sure it's loaded before replacing). You then animate the transition to the full size using jQuery's animate().

You can alternatively only replace the paths in the src="" attribute (after preloading the full image) and then animate the size.

edited May 23 '17 at 12:06

Community

1
1

answered Oct 05 '11 at 16:36

hupf

604
1
6
10

Hi, that's my question – I am able to change the src, but I'm unsure of how to get the correct dimensions so I can animate the function once the image is replaced. I'm also not entirely sure how to apply that preloading script. – waffl Oct 05 '11 at 18:12

score 0 · Accepted Answer · edited May 23 '17 at 12:22

OK, I was able to figure it out using an element from this previous question:

How to get image size (height & width) using JavaScript?

The big trick was to create a javascript copy of the image and when that loads, to find the height and width of that image and then change the sources and animate.

Thank you for the help hupf.

$('.portfolio-image').click(function() {

        var $clickedBox = $(this);

        var bigImageSrc = $(this).children(".portfolio-image-full").attr("src");

        var img = new Image();
            img.onload = function() {
            newWidth = this.width;
            newHeight = this.height;

            $clickedBox.children('.portfolio-image-display').attr("width", "100%");
            $clickedBox.children('.portfolio-image-display').attr("height", "100%");
            $clickedBox.children('.portfolio-image-display').attr("src", bigImageSrc);

            $clickedBox.children('.portfolio-image-display').animate({
                height: newHeight,
                width: newWidth
            }, 500, function(){
                // callback
            });
        }

        img.src = bigImageSrc;
    });

jQuery - replace thumbnail image with fullsize and smoothly animate the transition and scale

2 Answers2