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

admin

Administrator
Staff member
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 - <a href="http://jsbin.com/inuxej/8" rel="nofollow">http://jsbin.com/inuxej/8</a>

2) Thumbnail is next to hidden (display: none) full-size - <a href="http://jsbin.com/ogasic" rel="nofollow">http://jsbin.com/ogasic</a>

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!

--

<strong>Attempt 1:</strong>

JSBIN:
<a href="http://jsbin.com/inuxej/8" rel="nofollow">http://jsbin.com/inuxej/8</a>

Javascript:

Code:
$(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:

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

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

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

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

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

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

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

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.

<strong>Attempt 2:</strong>

JSBIN: <a href="http://jsbin.com/ogasic" rel="nofollow">http://jsbin.com/ogasic</a>

Javascript:

Code:
$(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:

Code:
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
&lt;meta charset=utf-8 /&gt;
&lt;title&gt;JS Bin&lt;/title&gt;
&lt;!--[if IE]&gt;
  &lt;script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
&lt;![endif]--&gt;
&lt;style&gt;
  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;
  }

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