2015-03-25 71 views
1

雖然我動態創建圖庫,但它不起作用。在這裏,我將動態地將目錄中的所有圖像添加到表格中。它現在還沒有完成。圖片庫問題jquery

在這裏,我想動態創建圖片庫,我是新來的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

+1

你說的'不Working'是什麼意思?你面臨的問題是什麼?如果你可以擺弄你的代碼會更好:http://jsfiddle.net/ – 2015-03-25 05:05:08

+0

對不起。問題是圖庫不工作。而我點擊一個圖像時,它將顯示在另一個頁面上。 – Satya 2015-03-25 05:07:10

回答

0

首先,您要初始化你沒有在表中添加錨標記。其次,在附加到不可用的主體之前,您正在初始化您的插件,因爲它不存在於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

+0

然後如何將圖像路徑添加到單元格。 – Satya 2015-03-25 05:14:18

+0

對不起,如何將超鏈接添加到圖像。這是一樣的方式。 – Satya 2015-03-25 05:30:55

+0

如果您需要在點擊圖片時打開一個頁面,則只能在'anchor tag'中添加超鏈接,然後您需要使用'window.location.href =「頁面打開」'like'' – 2015-03-25 05:34:42