使用Galleria jQuery插件與一個asp.net ListView

Question

我想用Galleria與一個asp.net ListView，這些圖像上傳後從數據庫中獲取圖像源。以下是我的列表視圖：

 <div id="photoAlbumDiv" class="photoAlbumDiv"> 


     <asp:ListView ID="ListView1" runat="server" DataKeyNames="id" > 
      <AlternatingItemTemplate> 
       <td runat="server" style=""> 
       </td> 
      </AlternatingItemTemplate> 
      <EditItemTemplate> 
       <td runat="server" style=""> 
       </td> 
      </EditItemTemplate> 
      <EmptyDataTemplate> 
       <table style=""> 
        <tr> 
         <td> 
          No data was returned.</td> 
        </tr> 
       </table> 
      </EmptyDataTemplate> 
      <InsertItemTemplate> 
       <td runat="server" style=""> 

       </td> 
      </InsertItemTemplate> 
      <ItemTemplate> 
       <td runat="server" style=""> 
        <img id="photoAlbumPhotos" src='<%# Eval("img") %>' alt="Image Not Found" class="photoAlbumPhotos" /> 
       </td> 
      </ItemTemplate> 
      <LayoutTemplate> 
       <table runat="server" border="0" style=""> 
        <tr ID="itemPlaceholderContainer" runat="server"> 
         <td ID="itemPlaceholder" runat="server"> 
         </td> 
        </tr> 
       </table> 
       <div style=""> 
       </div> 
      </LayoutTemplate> 
      <SelectedItemTemplate> 
       <td runat="server" style=""> 
        id: 
        <asp:Label ID="idLabel" runat="server" Text='<%# Eval("id") %>' /> 
        <br /> 
        img: 
        <asp:Label ID="imgLabel" runat="server" Text='<%# Eval("img") %>' /> 
        <br /> 
       </td> 
      </SelectedItemTemplate> 
     </asp:ListView> 

    </div> 

這裏是我的jQuery：

     <script type="text/javascript"> 
         Galleria.loadTheme('Scripts/themes/classic/galleria.classic.min.js'); 
         $("#photoAlbumDiv").galleria({ 
          height: 1000, 
          width: 1000 
         }); 
         </script> 

能不能做到，感謝

Answer 1

你處理事情的錯誤的方式，使之更加困難比它需要。該廣場預計插件的HTML如下安排：

<div> 
    <img /> 
    <img /> 
    <img /> 
    ... 
    <img /> 
</div> 

正如你所看到的，只不過是一個div中的圖像。你有一個不能工作的表結構。使用下面的代碼來運行一個快速示例，你會看到它是多麼容易。

的Javascript

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="galleria/galleria-1.2.4.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); 
     $("#gallery").galleria({ 
      width: 200, 
      height: 300 
     }); 
    });   
</script> 

ASPX

<asp:ListView runat="server" ID="lvw"> 
    <LayoutTemplate> 
     <div id="gallery"> 
      <asp:PlaceHolder ID="itemPlaceholder" runat="server"></asp:PlaceHolder> 
     </div> 
    </LayoutTemplate> 
    <ItemTemplate> 
     <img id="photoAlbumPhotos" src='<%# Eval("img") %>' alt="Image Not Found" class="photoAlbumPhotos" /> 
    </ItemTemplate> 
</asp:ListView> 

C＃

protected void Page_Load(object sender, EventArgs e) 
{ 
    lvw.DataSource = //Build datasource from database; 
    lvw.DataBind(); 
} 

就是這樣。您應該在瀏覽器中運行一個簡單的Galleria畫廊。