Question

当我动态创建图库时，它无法正常工作。在这里，我将动态地将目录中的所有图像添加到表中。它现在还没有完成。

在这里，我想动态创建图库，我是jquery的新手。请参阅下面的部分代码。

对不起。问题是图库没有用。当我点击图像时，它将显示在另一页面中。

in 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'
});

Live Demo

图片库问题jquery

1 个答案: