jQuery - 用全尺寸替换缩略图并平滑地动画过渡和缩放答案

【问题标题】：jQuery - replace thumbnail image with fullsize and smoothly animate the transition and scalejQuery - 用全尺寸替换缩略图并平滑地动画过渡和缩放
【发布时间】：2011-12-01 15:12:33
【问题描述】：

我有一个 wordpress 页面，我想在其中显示一个缩略图，单击该缩略图时，将替换为全尺寸图像并平滑地放大到新的全尺寸。我的 wordpress 函数能够输出缩略图和全尺寸的 src、宽度和高度。

我已经尝试了两种解决这个问题的方法：

1) 缩略图包含在指向全尺寸的链接中 - http://jsbin.com/inuxej/8

2) 缩略图旁边是隐藏的（显示：无）全尺寸 - http://jsbin.com/ogasic

它们都有效，但过渡并不顺利。我不太确定如何实现从缩略图到全尺寸的平滑缩放。有谁知道如何使这种过渡平滑，以便在单击缩略图后加载全尺寸，然后整个框动画并放大到全尺寸？

非常感谢提前！

尝试 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>

我还尝试了另一种解决方案，其中 wordpress 输出两个图像并隐藏全尺寸。但是，这似乎也导致了一个问题，因为 jquery 似乎获得了未定义的维度值，因为对象设置为显示：无。

尝试 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>

【问题讨论】：

标签： jquery image wordpress zooming thumbnails

【解决方案1】：

用户点击缩略图后，您可以将缩略图替换为完整图像，并缩小到缩略图的大小（替换前make sure it's loaded）。然后，您使用 jQuery 的 animate() 将过渡动画设置为完整尺寸。

您也可以只替换 src="" 属性中的路径（在预加载完整图像之后），然后为大小设置动画。

【讨论】：

嗨，这是我的问题——我可以更改 src，但我不确定如何获得正确的尺寸，以便在替换图像后为函数设置动画。我也不完全确定如何应用该预加载脚本。

【解决方案2】：

好的，我能够使用上一个问题中的一个元素来解决这个问题：

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

最大的技巧是创建图像的 javascript 副本，并在加载时找到该图像的高度和宽度，然后更改源和动画。

谢谢你的帮助。

$('.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;
    });

【讨论】：