如何从jQuery中的缩略图放大图像？

Posted 2023-05-08

技术标签:

【中文标题】如何从jQuery中的缩略图放大图像？【英文标题】：How to enlarge image from thumbnail in jQuery? 【发布时间】：2012-11-14 12:46:59 【问题描述】：

在我的网站上有一个小缩略图列表（“t1.jpg”、“t2.jpg”、“t3.jpg”、...），我想创建在居中对话框中显示的代码图像的全尺寸版本。如何做到这一点？

例如，当我单击 t1.jpg 时，我想在居中的框中看到一个 big1.jpg 图像。动态地。我不想在页面加载时加载所有图像。这一定是很好的表现。

谁能给我一些建议？谢谢。

【问题讨论】：

就个人而言，我建议您发布您的（相关/SSCCE）html、CSS 和 javascript/jQuery。然后我们可以看看我们如何能够提供帮助。发布直播 JS Fiddle 或类似的演示也会有很大帮助。如果您不需要自己编写所有代码，也可以使用 jQuery Lightbox 之类的东西。我没有密码。只是一个 HTML 图像列表。我不需要你给我写所有的代码行。只是一个建议 - 图书馆使用什么或方法。 【参考方案1】：

这是一个非常简单的方法 - Darkbox Gallery 的简化版本：

基本上，您将大图像 src 存储在 data-pop 属性中。单击此类data-pop 元素时会调用弹出窗口。 CSS 非常简单，甚至 jQuery 也不应该很复杂 - 除了计算当前窗口大小的部分之外，为了定义弹出窗口的背景图像应该是 CSS3 contain 还是 auto - 其中 "auto" 用于较小的图像（因此它们不会缩放）：

/* POP BOX */
;(function() 

  var $pop = $("#pop");

  $(document).on("click", "[data-pop]", function() 

    var popSrc= $(this).data("pop"),
        docW= Math.max(document.documentElement.clientWidth, window.innerWidth || 0),
        docH= Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

    $pop.addClass("visible loading").css(backgroundImage:"none");

    $("<img/>").on("load", function() 
      var bigger = (this.width > docW || this.height > docH)
      $pop.removeClass("loading").css(
        backgroundSize: bigger ? "contain" : "auto",
        backgroundImage: "url(" + this.src + ")"
      );
    ).attr("src", popSrc);

  );

  $("#popClose").on("click", function() 
    $pop.removeClass("visible loading");
  );

());

/* 
POP BOX 
*/
#pop 
  position: fixed;
  z-index: 999999;
  color: #fff;
  background: rgba(0, 0, 0, 0.6) none no-repeat 50% 50%;
  box-shadow: 0 0 0 24px rgba(0, 0, 0, 0.6);
  left: 24px;
  top: 24px;
  right: 24px;
  bottom: 24px;
  transition: 0.3s;
  visibility: hidden;
  opacity: 0;


#pop.loading:after 
  content: "Loading...";
  position: absolute;
  top: 50%;
  left: 44%;


#pop.visible 
  visibility: visible;
  opacity: 1;


#popClose 
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  font-size: 2em;

<!-- POP BOX -->
<div id="pop"><a id="popClose">&times;</a></div>

<!-- USE EXAMPLE -->
<img src="http://placehold.it/50x50/0bf" data-pop="http://placehold.it/860x590/0bf"  />
<img src="http://placehold.it/50x50/f0b" data-pop="http://placehold.it/590x860/f0b"  />



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：

【参考方案2】：

有几个 jQuery 灯箱脚本可以帮助您做到这一点。

这里列出了一些最好的：http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

【讨论】：

【参考方案3】：

灯箱。有 jQuery 插件。查看官方网站上的“如何使用”标签： http://leandrovieira.com/projects/jquery/lightbox/

【讨论】：

【参考方案4】：

我认为facebox 是一个不错的选择。他们在此页面中提供了您想要的功能的示例。

【讨论】：

【参考方案5】：