如何使用 Jquery 更改图像大小和更改下一个/上一个图像？答案

【问题标题】：How to change image size and change next/prev image using Jquery?如何使用 Jquery 更改图像大小和更改下一个/上一个图像？
【发布时间】：2013-05-29 07:10:58
【问题描述】：

我想开发一个灯箱插件，所以我创建了一些 css 并在下面制作了这个脚本

$(function (){
   $("img").click(function() {
   var imp = $(this).attr('src');
   var i=700;
   var j=700;
   $(".box").html($("<img>").attr("width", i));
   $(".box").html($("<img>").attr("width", j));
   $(".box").html($("<img>").attr("src", imp));


  });
});


css

.box
        {
            position:absolute;
            top:20%;
            left:20%;
            width:auto;
            height:auto;
            background:#ffffff;
            z-index:999999;
            padding:10px;
            box-shadow:0px 0px 5px #444444;
            display:none;
        }

这里 .box 是当用户点击它时我在其中显示图像的类 div。但我想以大的方式显示它，所以我使用了 width attr 但对我来说并没有改变。我还想添加下一个上一个功能，以在用户单击下一个和上一个时将图像更改为下一个图像。有人可以帮忙吗？

【问题讨论】：

标签： javascript jquery jquery-plugins lightbox wordpress

【解决方案1】：

试试这个，

$(function (){
    $("img").click(function() {
    var imp = $(this).attr('src');
    var i=700;
    var j=700;
    $img=$("<img>");
    $(".box").html($img);
    $img.width(i);
    $img.attr('src',imp);
    });
});

【讨论】：

你在工作。我如何通过单击下一个按钮移动到下一个图像，你知道吗？

【解决方案2】：

如果您想减少工作，请使用 prettyPhoto(a jQuery lightbox clone)。

您将获得灯箱及其图库的代码。

如果您正在寻找简单的灯箱，请使用具有$("body").height() 的模态掩码和 $("body").width(),z-index:5001 和 opacity:0.3 。然后更改框的 css 使其与页面居中对齐，将 .box 的 z-index 增加到 5001 并在其中附加图像。

【讨论】：