如何改變圖像大小，並改變使用JQuery的next/prev圖像？

Question

我想開發一個燈箱插件，所以我創造了一些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的這個腳本是在我顯示，當用戶點擊它的圖像類股利。但我想展示它在大，所以我用寬度 attr但它不會改變我。另外我想添加下一個先前的功能，當用戶點擊next和prev時將圖像更改爲下一張圖像。誰能幫忙？

Answer 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); 
    }); 
}); 

Answer 2

使用prettyPhoto(a jQuery lightbox clone)。

您將獲得燈箱代碼以及其畫廊。

如果您正在尋找簡單的燈箱，然後使用具有$("body").height() 和$("body").width()，z-index:5001和opacity:0.3一個modalmask。於是改變框的CSS在這樣一種方式，它就會在中心對齊頁面，增加的z-index將.box設置爲5001，並在其中添加圖像。