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

Popular posts from this blog

iphone - Dismissing a UIAlertView -

intellij idea - Update external libraries with intelij and java -

javascript - send data from a new window to previous window in php -