Question

在我的网站上有一个小缩略图列表（“t1.jpg”，“t2.jpg”，“t3.jpg”，...），我想创建在居中对话框中显示的代码图像的完整版本。怎么做？

例如，当我点击t1.jpg时，我想在居中的框中看到一个big1.jpg图像。动态。我不想在页面加载时加载所有图像。它必须是出色的表现。

任何人都可以给我一些建议吗？感谢。

Answer 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" alt="" />
<img src="http://placehold.it/50x50/f0b" data-pop="http://placehold.it/590x860/f0b" alt="" />



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

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

以下列出了一些最佳：http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

Answer 3

像jquery灯箱一样？

http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

单击图像缩略图时，图像会以模态加载。

Answer 4

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

Answer 5

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

如何在jQuery中放大缩略图？

5 个答案: