javascript - 图片库问题 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

首先，您尝试初始化未在表中添加的 anchor 标记。其次，您在附加到主体之前初始化您的插件，这永远不会起作用，因为它不存在于 DOM 中。

因此，尝试在 td 中添加 anchor 标记并将图像包装到 anchor 标记中，例如，

$("<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