jQuery燈箱或具有圖像陣列的燈箱

Question

我試圖實現Lightbox樣式的圖庫，其中單擊文本鏈接將啓動從陣列加載的圖像的幻燈片顯示，而不是頁面上的內聯內容。我可以找到的所有示例都使用一組內聯圖像，這些圖像以某種方式相關（即使用rel標籤或類）。我想在JavaScript數組中使用它們的路徑來定義我的圖像。

任何人都知道解決方案或有任何指針？ TIA。

Answer 1

以下內容適用於您可以從插件網站下載的示例。

演示here

$(function() { 
     $('#testLink').click(dynamicLightBoxinit); 
    }); 

    function dynamicLightBoxinit(){ 
     images = ["photos/image1.jpg", "photos/image2.jpg","photos/image3.jpg","photos/image4.jpg","photos/image5.jpg"]; 
     var imageBuilder=''; 
     for (var i = 0; i < images.length; i++) { 

      imageBuilder += '<a href="'+images[i]+'"><img src="'; 
      imageBuilder += images[i]; 
      imageBuilder += '" \></a>'; 
      } 

      var lb = $(imageBuilder); 
      lb.lightBox(); 
      lb.filter('a:first').click(); 
     } 

Answer 2

我不確定你究竟是什麼，但這是你在找什麼？

images = ["path1.jpg", "path2.jpg"]; 
for (var i = 0; i < images.length; i++) 
    { 
    var img = new Image(); 
    img.src = images[i]; 
    images[i] = img; 
    } 

相當鈍的地方替換的圖像對象的網址，但它寫的較短。

設置src-attribute時，瀏覽器將加載您的圖像，並且可以將其附加到任何正常dom操作的html容器中。

HTH。