Question

我有一个wordpress页面，我想显示一个缩略图，点击后，用全尺寸图像替换，并平滑地放大到新的完整尺寸。我的wordpress函数能够输出缩略图和全尺寸的src，宽度和高度。

我尝试过两个解决这个问题的方法：

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

中

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

他们都工作但过渡并不顺利。我不太确定如何实现从缩略图到fullsize的平滑缩放。有没有人知道如何让这个过渡变得平滑，所以一旦点击缩略图，加载了全尺寸，然后整个框动画并缩放到完整尺寸？

许多人提前多多感谢！

-

尝试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似乎获得了未定义的维值，因为该对象设置为display：none。

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

Answer 1

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

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

Answer 2

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

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

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

感谢您帮助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 - 用fullsize替换缩略图，并平滑地为过渡和缩放设置动画

2 个答案: