Image gallery issue jquery

Question

While I'm creating image gallery dynamically it isn't working. Here I'm adding all the images from a directory to a table dynamically. Its not completed now.

Here, I want to create image gallery dynamically and I'm new to jquery. see the partial code below.

sorry. The issue is image gallery is not working. while i clicking on a image it is going to displayed in another page.

in html,

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

in 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>

I'm using reference link.

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

Answer 1

First, you are trying to initialize the anchor tag which you are not adding in table. Second, you are initializing your plugin before appending to body which never works because it is not present in DOM.

So try to add anchor tag in td and wrap your image to anchor tag like,

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