Картинная галерея issue 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><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