当前位置： 文江博客话题详情

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

发布于 2024-12-08 08:47:12 字数 6889 浏览 0 评论 0原文

我有一个 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>
原文

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

梦行七里 2024-12-15 08:47:12

用户单击缩略图后，您可以将缩略图替换为完整图像，缩小到缩略图的大小（在替换之前确保它已加载）。然后，您可以使用 jQuery 的 animate() 将过渡动画设置为完整尺寸。

您也可以仅替换 src="" 属性中的路径（在预加载完整图像之后），然后对大小进行动画处理。

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.

回复 原文
陈独秀 2024-12-15 08:47:12

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

如何使用 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;
    });

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;
    });
回复 原文
~没有更多了~

关于作者

奈何桥上唱咆哮

暂无简介

文章
评论
468 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

卷耳

文章 0 评论 0

佚名

文章 0 评论 0

℉服软

文章 0 评论 0

qq_2gSKZM

文章 0 评论 0

凉宸

文章 0 评论 0

gyhjy

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文