如何使用Jquery更改图像大小和更改下一个/前一个图像

How to change image size and change next/prev image using Jquery?

本文关键字：图像 一个 Jquery 何使用 下一个      更新时间：2023-09-26

我想开发一个灯箱插件，所以我创建了一些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，当用户单击它时，我在其中显示图像。但我想显示它在大，所以我使用宽度 attr，但它不会改变我。此外，我想添加下一个以前的功能，以改变图像到下一个图像时，用户单击下一个和前。有人能帮忙吗?

试试这个，

$(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);
    });
});

使用 pre伤寒(一个jQuery灯箱克隆)如果你想减少你的工作

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

如果您正在寻找简单的灯箱，然后使用具有$("body").height()的模态蒙版$("body").width(), z-index:5001和opacity:0.3 .然后改变box的css，使其在中心对齐页面，增加.box的z-index为5001，并在其中添加图像

相关文章：