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

将图片对象的url原位替换为urx，但写入的时间更短。

设置src属性后，浏览器将加载您的图像，并且可以按照正常的dom操作将其附加到任何html容器中。

HTH。

jQuery Lightbox或与图像数组等效的

2 个答案: