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。