图片库问题jQuery

Question

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

在这里，我想动态创建图片库，并且对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

Answer 1

首先，您尝试初始化未添加到表中的锚标记。 其次，您要在将插件附加到正文之前初始化您的插件，该插件由于在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'
});

现场演示