Sorting (rearranging order) of a photo album using jQuery Sortable : The Official Microsoft ASP.NET Forums

Reply

atiqjaved

Member

20 Points

64 Posts

Sorting (rearranging order) of a photo album using jQuery Sortable

Feb 06, 2011 01:02 AM|LINK

Hi,

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 http://www.west-wind.com/rick/photoalbum/demoMaui2006/Default.aspx?Admin=true which is exactly what I need.

The photo are stored in the uploads directory and details in the database. The images are displayed using the ListView as shown below:

<asp:ListView ID="ListView1" runat="server" DataSourceID="SqlDataSource1" GroupItemCount="15">
        <LayoutTemplate>
            <table id="groupPlaceholderContainer" runat="server" border="0" cellpadding="0" cellspacing="0"
                style="border-collapse: collapse; width: 100%;">
                <tr id="groupPlaceholder" runat="server">
                </tr>
            </table>
        </LayoutTemplate>
        <GroupTemplate>
            <tr id="itemPlaceholderContainer" runat="server">
                <td id="itemPlaceholder" runat="server">
                </td>
            </tr>
        </GroupTemplate>
        <ItemTemplate>
            <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# "~/uploads/"+Eval("OriginalFilePath") %>'
                rel="example1" Title='<%# Eval("PhotoName") %>'>
                <div>
                    <asp:Image ID="Image1" runat="server" ImageUrl='<%# "~/uploads/"+Eval("ThumbFilePath") %>'
                        Width="130" Height="150" BorderStyle="None" />
                     <asp:Label ID="lblPhotoTitle" runat="server" Text='<%# Eval("PhotoName") %>' CssClass="photoTitle" ></asp:Label>
                </div>
            </asp:HyperLink>
        </ItemTemplate>

    </asp:ListView>


    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:fpaConnectionString %>"
        SelectCommand="fpa_SP_view_album_list_by_id" SelectCommandType="StoredProcedure">
        <SelectParameters>
            <asp:QueryStringParameter DefaultValue="" Name="photo_album_id" QueryStringField="AlbumID"
                Type="Int32" />
        </SelectParameters>
    </asp:SqlDataSource>
</div>

I would like to rearrange the order of the photos; change the captions and/or delete the photos just like as in the example.

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

I am new to programming, especially jQuery so could you kindly provide/explain the steps that I need to follow.

Any help would be much appreciated.

Thanks

</div>

Reply

raghav_khung...

All-Star

32835 Points

5563 Posts

MVP

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

Feb 06, 2011 03:04 AM|LINK

Hi,

I wrote an article on similiar kind of approach: http://codeasp.net/articles/asp-net/228/reorder-list-using-jquery-and-asp-net . You can refer it , the changes are prerved in database.

Raghav|My Articles|My Blog

Edited by raghav_khunger on Feb 06, 2011 03:05 AM

Reply

asteranup

All-Star

30184 Points

4906 Posts

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

Feb 06, 2011 12:19 PM|LINK

Hi,

See the code below-

HTML-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css"
        rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"
        type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/i18n/jquery-ui-i18n.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#sortable").sortable();
            $("#sortable").disableSelection();
            $("#sortable input[type=text]").width($("#sortable img").width() - 10);
            $("#sortable label").mouseover(function () {
                $(this).parent().children("input[type=text]").show().val($(this).html());
                $(this).hide();
            });
            $("#sortable input[type=text]").mouseout(function () {
                $(this).parent().children("label").show().html($(this).val());
                $(this).hide();
            });
            $(".ContainerDiv").hover(
                function () {
                    $(this).find(".deleteClass").show();
                },
                function () {
                    $(this).find(".deleteClass").hide();
                });
            $(".deleteClass").click(function () {
                $(this).closest("li").remove();
            });
            $("#orderPhoto").click(function () {
                var photos = $.map($("li.ui-state-default"), function (item, index) {
                    var imgDetail = new Object();
                    imgDetail.Id = $(item).find("img").attr("id");
                    imgDetail.Caption = $(item).find("label").html();
                    imgDetail.Order = index + 1;
                    return imgDetail;
                });
                //photos contains all the photo and order and the chhanged caption.
            });
        });
	</script>
    <style>
        #sortable
        {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #sortable li
        {
            position: relative;
            margin: 3px 3px 3px 0;
            padding: 1px;
            float: left;
            text-align: left;
        }
        .deleteClass
        {
            /* PhotoListItem  is relative so relative to it */
            position: absolute;
            top: 1px;
            right: 3px;
            background: black;
            color: Red;
            font-weight: bold;
            font-size: 12px;
            padding: 5px;
            opacity: 0.60;
            filter: alpha(opacity="60");
            margin-top: 3px;
            display: none;
            cursor: pointer;
        }
        .deleteClass:hover
        {
            opacity: 0.90;
            filter: alpha(opacity="90");
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ListView ID="ListView1" runat="server" GroupItemCount="15">
        <LayoutTemplate>
            <ul id="sortable">
                <li id="groupPlaceholder" runat="server">1</li>
            </ul>
        </LayoutTemplate>
        <GroupTemplate>
            <tr id="itemPlaceholderContainer" runat="server">
                <td id="itemPlaceholder" runat="server">
                </td>
            </tr>
        </GroupTemplate>
        <ItemTemplate>
            <li class="ui-state-default">
                <div class="ContainerDiv">
                    <div class="deleteClass">X</div>
                    <img id='<%#Eval("Id")%>' src='<%#Eval("Url")%>' alt="" />
                    <div style="height: 25px; margin-top: 3px">
                        <label>
                            <%#Eval("Caption")%></label>
                        <input type="text" style="display: none" />
                    </div>
                </div>
            </li>
        </ItemTemplate>
    </asp:ListView>
    <input type="button" id="orderPhoto" value="Save change" />
    </form>
</body>
</html>

Code-

   protected void Page_Load(object sender, EventArgs e)
    {
        var objData = (new[] { new { Id=1, Url = "http://www.gallery2c.com/admin/Upload/ThumbNail/moda19.jpg", Caption = "Caption" } }).ToList();
        objData.Add(new { Id = 2, Url = "http://www.gallery2c.com/admin/Upload/ThumbNail/The%20gorge%20in%20fog%20final.jpg", Caption = "Caption" });
        objData.Add(new { Id = 3, Url = "http://www.gallery2c.com/admin/Upload/ThumbNail/NIVWBlueLogoCombiMONTSPARTS.jpg", Caption = "Caption" });
        objData.Add(new { Id = 4, Url = "http://www.gallery2c.com/admin/Upload/ThumbNail/SMAN004.jpg", Caption = "Caption" });
        objData.Add(new { Id = 5, Url = "http://www.gallery2c.com/admin/Upload/ThumbNail/(R)Dbw5548.jpg", Caption = "Caption" });
        objData.Add(new { Id = 6, Url = "http://www.gallery2c.com/admin/Upload/ThumbNail/Venice.jpg", Caption = "Caption" });
        objData.Add(new { Id = 7, Url = "http://www.gallery2c.com/admin/Upload/ThumbNail/Four-Seasons.jpg", Caption = "Caption" });
        objData.Add(new { Id = 8, Url = "http://www.gallery2c.com/admin/Upload/ThumbNail/daltrey.jpg", Caption = "Caption" });
        objData.Add(new { Id = 9, Url = "http://www.gallery2c.com/admin/Upload/ThumbNail/C%20Clift%20-%20_MG_1914.jpg", Caption = "Caption" });
        objData.Add(new { Id = 10, Url = "http://www.gallery2c.com/admin/Upload/ThumbNail/Clifton%20Leaves12x16(12x18).jpg", Caption = "Caption" });
        objData.Add(new { Id = 11, Url = "http://www.gallery2c.com/admin/Upload/ThumbNail/d11.jpg", Caption = "Caption" });
        objData.Add(new { Id = 12, Url = "http://www.gallery2c.com/admin/Upload/ThumbNail/Raquel_Cross_COL.gif", Caption = "Caption" });
        objData.Add(new { Id = 13, Url = "http://www.gallery2c.com/admin/Upload/ThumbNail/China-Beijing-waitresses%20standing%20in%20doorway%20of%20restuarant%5B1%5D%5B1%5D.016..jpg", Caption = "Caption" });
        objData.Add(new { Id = 14, Url = "http://www.gallery2c.com/admin/Upload/ThumbNail/Acoustic-guitar-(b).gif", Caption = "Caption" });
        ListView1.DataSource = objData;
        ListView1.DataBind();

    }

In the click event photos JavaScript variable contains all the images changed caption with order. Using ajax you can save the changes to the database.

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Edited by asteranup on Feb 06, 2011 12:30 PM

Reply

atiqjaved

Member

20 Points

64 Posts

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

Feb 06, 2011 05:17 PM|LINK

Thanks for your prompt reply, this is exactly what I am after. The only problem is that I am problems trying to send this via web Service.

Below is my attempt:

How can I pass the photo array to the webservice.vb?

I apologise for my lack of knowledge.

Thanks

Edited by atiqjaved on Feb 06, 2011 05:19 PM

Reply

asteranup

All-Star

30184 Points

4906 Posts

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

Feb 07, 2011 05:23 AM|LINK

Hi,

Take the updated code. Its in C#-

HTML-

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/themes/base/jquery-ui.css"
    

        rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    <script src="https://github.com/douglascrockford/JSON-js/raw/master/json2.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/jquery-ui.min.js"
        type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.8/i18n/jquery-ui-i18n.min.js"
        type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#sortable").sortable();
            $("#sortable").disableSelection();
            $("#sortable input[type=text]").width($("#sortable img").width() - 10);
            $("#sortable label").mouseover(function() {
                $(this).parent().children("input[type=text]").show().val($(this).html());
                $(this).hide();
            });
            $("#sortable input[type=text]").mouseout(function() {
                $(this).parent().children("label").show().html($(this).val());
                $(this).hide();
            });
            $(".ContainerDiv").hover(
                function() {
                    $(this).find(".deleteClass").show();
                },
                function() {
                    $(this).find(".deleteClass").hide();
                });
            $(".deleteClass").click(function() {
                $(this).closest("li").remove();
            });
            $("#orderPhoto").click(function() {
                var photos = $.map($("li.ui-state-default"), function(item, index) {
                    var imgDetail = new Object();
                    imgDetail.Id = $(item).find("img").attr("id");
                    imgDetail.Caption = $(item).find("label").html();
                    imgDetail.Order = index + 1;
                    return imgDetail;
                });
                var jsonPhotos = JSON.stringify(photos);
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    data: "{photos:" + jsonPhotos + "}",
                    url: "ServiceCompas.asmx/PhotoDetail",
                    dataType: "json",
                    success: function(data) {
                        alert(data.d);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        debugger;
                    }
                });
            });
        });
	</script>
    <style>
        #sortable
        {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #sortable li
        {
            position: relative;
            margin: 3px 3px 3px 0;
            padding: 1px;
            float: left;
            text-align: left;
        }
        .deleteClass
        {
            /* PhotoListItem  is relative so relative to it */
            position: absolute;
            top: 1px;
            right: 3px;
            background: black;
            color: Red;
            font-weight: bold;
            font-size: 12px;
            padding: 5px;
            opacity: 0.60;
            filter: alpha(opacity="60");
            margin-top: 3px;
            display: none;
            cursor: pointer;
        }
        .deleteClass:hover
        {
            opacity: 0.90;
            filter: alpha(opacity="90");
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ListView ID="ListView1" runat="server" GroupItemCount="15">
        <LayoutTemplate>
            <ul id="sortable">
                <li id="groupPlaceholder" runat="server">1</li>
            </ul>
        </LayoutTemplate>
        <GroupTemplate>
            <tr id="itemPlaceholderContainer" runat="server">
                <td id="itemPlaceholder" runat="server">
                </td>
            </tr>
        </GroupTemplate>
        <ItemTemplate>
            <li class="ui-state-default">
                <div class="ContainerDiv">
                    <div class="deleteClass">X</div>
                    <img id='<%#Eval("Id")%>' src='<%#Eval("Url")%>' alt="" />
                    <div style="height: 25px; margin-top: 3px">
                        <label>
                            <%#Eval("Caption")%></label>
                        <input type="text" style="display: none" />
                    </div>
                </div>
            </li>
        </ItemTemplate>
    </asp:ListView>
    <input type="button" id="orderPhoto" value="Save change" />
    </form>
</body>
</html>

Code-

DataClass-

public class PhotoDetail
{
    public int Id { get; set; }
    public int Order { get; set; }
    public string Caption { get; set; }
}

WebMethod(web service)-

    [WebMethod]
    public bool PhotoDetail(List<PhotoDetail> photos)
    {
        //update to database
        return true;
    }

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Marked as answer by Yanping Wang - MSFT on Feb 11, 2011 05:05 AM

Reply

raghav_khung...

All-Star

32835 Points

5563 Posts

MVP

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

Feb 07, 2011 05:28 AM|LINK

Good one! Anup.

Raghav|My Articles|My Blog

Reply

asteranup

All-Star

30184 Points

4906 Posts

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

Feb 07, 2011 10:04 AM|LINK

Thanks raghav

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Reply

atiqjaved

Member

20 Points

64 Posts

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

Feb 07, 2011 11:11 PM|LINK

Thank you very much for all your help Anup, that worked :)

Just one last question, what would be the best approach when deleting the photo?

Reply

asteranup

All-Star

30184 Points

4906 Posts

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

Feb 08, 2011 03:59 AM|LINK

Hi,

You can do the following-

Change Service method-

[WebMethod]
    public bool PhotoDetail(List<PhotoDetail> photos, List<int> idsToDetete)
    {
        //update to database
        return true;
    }

Change delete photo js method-

            var idsToDelete = new Array();
            $(".deleteClass").click(function() {
                if (confirm("Are you sure you want to detete this image?\nSave changes after modification is done.")) {
                    idsToDelete.push($(this).closest("li").find("img[id]").attr("id"));
                    $(this).closest("li").remove();
                }
            });

Change button click js as-

            $("#orderPhoto").click(function() {
                var photos = $.map($("li.ui-state-default"), function(item, index) {
                    var imgDetail = new Object();
                    imgDetail.Id = $(item).find("img").attr("id");
                    imgDetail.Caption = $(item).find("label").html();
                    imgDetail.Order = index + 1;
                    return imgDetail;
                });
                var jsonPhotos = JSON.stringify(photos);
                var deleteIds=JSON.stringify(idsToDelete);
                $.ajax({
                    type: "POST",
                    contentType: "application/json",
                    data: "{'photos':" + jsonPhotos + ",'idsToDetete':"+deleteIds+"}",
                    url: "ServiceCompas.asmx/PhotoDetail",
                    dataType: "json",
                    success: function(data) {
                        alert(data.d);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        debugger;
                    }
                });
            });

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Edited by asteranup on Feb 08, 2011 04:00 AM
Edited by asteranup on Feb 08, 2011 04:02 AM
Marked as answer by Yanping Wang - MSFT on Feb 11, 2011 05:05 AM

Reply

bronxbull

Member

237 Points

255 Posts

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

Nov 24, 2012 07:07 PM|LINK

Hey Anup,

I am using your code and it works like a charm. Thanks for the good work.

Is there any way i can use jQuery Selectable with this?

Sorting (rearranging order) of a photo album using jQuery Sortable RSS

9 replies

atiqjaved

Sorting (rearranging order) of a photo album using jQuery Sortable

raghav_khung...

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

asteranup

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

atiqjaved

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

asteranup

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

raghav_khung...

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

asteranup

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

atiqjaved

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

asteranup

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

bronxbull

Re: Sorting (rearranging order) of a photo album using jQuery Sortable

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft