如何在jQuery中放大缩略图？
在我的网站上有一个小缩略图列表（“t1.jpg”，“t2.jpg”，“t3.jpg”，…），我想创建在中心对话框中显示全尺寸的代码图像的版本。 这该怎么做？
例如，当我点击t1.jpg时，我想在中心框中看到一个big1.jpg图像。 动态。 我不想在加载页面时加载所有图像。 它必须是良好的表现。
有人可以给我一些建议吗？ 谢谢。
这是一个非常简单的方法 – Darkbox Gallery的简化版本：
基本上，您将大图像src存储在data-pop属性中。
单击此类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"}); $("![]()
").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; }
有几个jQuery lightbox脚本可以帮助你做到这一点。
以下是一些最好的列表： http ： //line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts
灯箱。 有jQuery插件。 查看官方网站上的“如何使用”标签： http ： //leandrovieira.com/projects/jquery/lightbox/
我认为facebox是个不错的选择。 他们在此页面中有您想要的function示例。
就像一个jquery灯箱？
http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts
单击图像缩略图时，图像将加载到模态中。