Using Galleria jQuery plugin with an asp.net ListView -
Using Galleria jQuery plugin with an asp.net ListView -
i trying utilize galleria asp.net listview gets image sources database after images uploaded. next 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 info 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>
and here jquery:
<script type="text/javascript"> galleria.loadtheme('scripts/themes/classic/galleria.classic.min.js'); $("#photoalbumdiv").galleria({ height: 1000, width: 1000 }); </script>
can done, thanks
you're going things wrong way , making more hard needs be. galleria plugin expect html organized follows:
<div> <img /> <img /> <img /> ... <img /> </div>
as can see, there nil images within of div. have table construction not work. utilize next code run quick sample , you'll see how easy is.
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 database; lvw.databind(); }
and that's it. should have simple galleria gallery running in browser.
jquery asp.net image listview
Comments
Post a Comment