javascript - 图片库问题jQuery

当我动态创建图像库时，它不起作用。在这里，我将目录中的所有图像动态添加到表中。现在还没有完成。

在这里，我想动态创建图片库，并且对jquery还是陌生的。请参阅下面的部分代码。

抱歉。问题是图片库无法正常工作。当我单击图像时，它将显示在另一页中。

在html中

<table id="tbl1">
</table>

在js中

<script type="text/javascript">
  $(document).ready(function() {
    var bss = $('a[rel=blogslideshow]').bsShow({
      effect: 'Ladder',
      direction: 'horizontal'
    });
    var arr1 = ["sample_fussen.jpg", "sample_zakopane.jpg", "sample_wurzburg.jpg", "sample_keukenhof.jpg"];
    var cnt = 0;
    var festname = "slides";
    alert(arr1.length);
    var rows = arr1.length / 5; //here's your number of rows and columns
    var cols = 5;
    for (var r = 0; r < rows; r++) {
      var tr = $('<tr>');
      for (var c = 0; c < cols; c++) {
        if (cnt == arr1.length)
          break;
        var path = festname + '/' + arr1[cnt];
        $("<td><img src="
          "+path+"
          " width="
          100 " height="
          100 " alt="
          "/><h3><label><input type="
          radio " name="
          radio1 " value="
          ">Select Image</label></h3></td>").appendTo(tr);

        cnt++;
      }
      $('#tbl1').last().after(tr);
    }
    table.appendTo('body');
  })
</script>

我正在使用参考链接。

https://code.google.com/p/blogslideshow/downloads/list

最佳答案

首先，您尝试初始化未添加到表中的锚标记。其次，您正在初始化插件，然后再附加到正文，该插件由于DOM中不存在而无法正常工作。

因此，请尝试在td中添加定位标记，然后将图像包装到定位标记，例如，

$("<td><a rel='blogslideshow' title='Your title' href='"+path+"'><img src='"+path+"' width='100'"+
      "height='100' alt=''/></a>"+
      "<h3><label><input type='radio'"+
      "name='radio1' value=''>Select Image</label>"+
      "</h3></td>").appendTo(tr);

after appending the data you need to re-initialize your plugin

var bss = $('a[rel=blogslideshow]').bsShow({
  effect: 'Ladder',
  direction: 'horizontal'
});

Live Demo

关于javascript - 图片库问题jQuery，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29247807/