Databases
StackOverflow2013
Postsdbo
POSorting (rearranging order) of a photo album using jQuery Sortable
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSorting (rearranging order) of a photo album using jQuery Sortable
    text
    copied!<p>I have a photo album gallery within my website and would like to allow users to sort the order of their photos within an album. After looking at very different ways I came across this example <a href="http://www.west-wind.com/rick/photoalbum/demoMaui2006/Default.aspx?Admin=true" rel="nofollow">http://www.west-wind.com/rick/photoalbum/demoMaui2006/Default.aspx?Admin=true</a> which is exactly what I need.</p> <p>The photo are stored in the uploads directory and details in the database. The images are displayed using the ListView as shown below:</p> <pre><code> &lt;asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" GroupItemCount="15"&gt; &lt;LayoutTemplate&gt; &lt;table id="groupPlaceholderContainer" runat="server" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; width: 100%;"&gt; &lt;tr id="groupPlaceholder" runat="server"&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/LayoutTemplate&gt; &lt;GroupTemplate&gt; &lt;tr id="itemPlaceholderContainer" runat="server"&gt; &lt;td id="itemPlaceholder" runat="server"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;/GroupTemplate&gt; &lt;ItemTemplate&gt; &lt;asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='&lt;%# "~/uploads/"+Eval("OriginalFilePath") %&gt;' rel="example1" Title='&lt;%# Eval("PhotoName") %&gt;'&gt; &lt;div&gt; &lt;asp:Image ID="Image1" runat="server" ImageUrl='&lt;%# "~/uploads/"+Eval("ThumbFilePath") %&gt;' Width="130" Height="150" BorderStyle="None" /&gt; &lt;asp:Label ID="lblPhotoTitle" runat="server" Text='&lt;%# Eval("PhotoName") %&gt;' CssClass="photoTitle" &gt;&lt;/asp:Label&gt; &lt;/div&gt; &lt;/asp:HyperLink&gt; &lt;/ItemTemplate&gt; &lt;/asp:ListView&gt; &lt;asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="&lt;%$ ConnectionStrings:fpaConnectionString %&gt;" SelectCommand="fpa_SP_view_album_list_by_id" SelectCommandType="StoredProcedure"&gt; &lt;SelectParameters&gt; &lt;asp:QueryStringParameter DefaultValue="" Name="photo_album_id" QueryStringField="AlbumID" Type="Int32" /&gt; &lt;/SelectParameters&gt; &lt;/asp:SqlDataSource&gt; &lt;/div&gt; </code></pre> <p>I would like to rearrange the order of the photos; change the captions and/or delete the photos just like as in the example. </p> <p>So could someone please provide the steps that I need to follow in order to achieve the following: - Firstly to display the photos from the Photo table in the database (can use the above listView) - Rearrange the order; change caption and/or delete the photo(s) - Final to update the changes in the Photo table</p> <p>I am new to programming, especially jQuery so could you kindly provide/explain the steps that I need to follow. </p> <p>Any help would be much appreciated.</p> <p>Thanks</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload