图片库问题jquery

Image gallery issue jquery

本文关键字：jquery 问题 图片库      更新时间：2023-09-26

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

在这里，我想动态创建图片库，我是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'
});

实时演示

相关文章：