Resources For IT Professionals
Post an article
Wikis - Page Details
  • First published by
  • When: 23 Apr 2012 12:30 AM
  • Last revision by (eMicrosoft Partne)
  • When: 15 Aug 2013 4:03 AM
  • Revisions: 3
  • Comments: 3
Options
RSSSubscribe to Article (RSS)
Can You Improve This Article?
Positively! Click Sign In to add the tip, solution, correction or comment that will help other users.

Report inappropriate content using these instructions.
Wiki  >  TechNet Articles  >  SharePoint 2010: Integrating Jquery Carousel and ThickBox

SharePoint 2010: Integrating Jquery Carousel and ThickBox

SharePoint 2010: Integrating Jquery Carousel and ThickBox

Hi all,

In this article, I will show how to integrate SharePoint Image Library to JQuery jcarousel with Thickbox and make very nice UI.  We can use it in many places like to show Employee Images in Home Page of HR Site and Clicking on Image will zoom the image with some animation effect, like


Clicking on any Image will open the Image like

And the Very good thing is Image is coming from SharePoint 2010 Image Library.

For Implementing these effect I am using following Libraries.

though I am using Managed Client Object Model to access SharePoint Library and Client Object Model does not support RunwithElevatedPriviledge, that’s why I am accessing the Image Library anonymously.

Step 1: Create Picture Library and Enable Anonymous Access

Look at the following URL to Enable anonymous access in SharePoint 2010
http://www.topsharepoint.com/enable-anonymous-access-in-sharepoint-2010

Step 2: Create a aspx page which return the URL of Images

How to Read Image URL

WebForm1.aspx.cs

        string RealUrl;
        string FinalURL=string.Empty;
        protected void Page_Load(object sender, EventArgs e)
        {

            string siteUrl = "http://localhost:123";

            ClientContext clientContext = new ClientContext(siteUrl);
            SP.List oList = clientContext.Web.Lists.GetByTitle("PicLibrary"); //PicLibrary is the Name of Document Library.

            CamlQuery camlQuery = new CamlQuery();
            camlQuery.ViewXml = "<View><Query><Where><Geq><FieldRef Name='ID'/>" +
                "<Value Type='Number'>1</Value></Geq></Where></Query><RowLimit>100</RowLimit></View>";
            Microsoft.SharePoint.Client.ListItemCollection collListItem = oList.GetItems((camlQuery));

            clientContext.Load(collListItem,
                listItems => listItems.Include(
                item => item.File,
                item => item.Id,
                item => item["Title"],
                item => item["Description"],
                item => item["ImageCreateDate"]));

            clientContext.ExecuteQuery();

            foreach (Microsoft.SharePoint.Client.ListItem listItem in collListItem)
            {
                string imageUrl = siteUrl + listItem.File.ServerRelativeUrl;

                RealUrl= imageUrl.Substring(0, imageUrl.LastIndexOf('/'));
                RealUrl= LargeImgUrl+ "/_t/" + listItem.File.Name.Replace('.', '_') + ".jpg";

                if (FinalURL== string.Empty)
                {
                    FinalURL = RealUrl;
                }
                else
                {
                    FinalURL = FinalURL + "|" + RealUrl;
                }
            }
           Response.Write(Final);
      }

The above code return the URL of all the Images concatinated with "|".

Note: Remove all the stuffs from Design Page except Page attribute

WebForm1.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication2.WebForm1" %>        


One of the very interesting thing in SharePoint Image Library is when you upload images its path will be like
http://localhost:123/PicLibrary/_t/1.jpg
when you click on image its path will change and image will be zoomed
http://localhost:123/PicLibrary/_w/1.jpg           //Notice _t to _w change

Output:
http://localhost:123/PicLibrary/_t/1_jpg.jpg|http://localhost:123/PicLibrary/_t/10_jpg.jpg|http://localhost:123/PicLibrary/_t/11_jpg.jpg|http://localhost:123/PicLibrary/_t/12_jpg.jpg|http://localhost:123/PicLibrary/_t/13_jpg.jpg|http://localhost:123/PicLibrary/_t/14_jpg.jpg|http://localhost:123/PicLibrary/_t/15_jpg.jpg|http://localhost:123/PicLibrary/_t/2_jpg.jpg|http://localhost:123/PicLibrary/_t/3_jpg.jpg|http://localhost:123/PicLibrary/_t/4_jpg.jpg|http://localhost:123/PicLibrary/_t/5_jpg.jpg|http://localhost:123/PicLibrary/_t/6_jpg.jpg|http://localhost:123/PicLibrary/_t/7_jpg.jpg|http://localhost:123/PicLibrary/_t/8_jpg.jpg|http://localhost:123/PicLibrary/_t/9_jpg.jpg


Step 3: Create a SharePoint Web Part / Application Page which will show the Image Slider and Thick Box


Create a HTML Page with following Code: (You can create Web Part/User Control or Application Pages also)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<link href="../style.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jcarousel/jquery.jcarousel.min.js"></script>
    <link rel="stylesheet" type="text/css" href="jcarousel/tango/skin.css" />

    <script type="text/javascript" src="thickbox/thickbox.js"></script>
    <link rel="stylesheet" type="text/css" href="thickbox/thickbox.css" />
   
    <script type="text/javascript">

function mycarousel_itemLoadCallback(carousel, state)
{
    if (state != 'init')
        return;
    jQuery.get('WebForm1.aspx', function (data) {
        mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, data);
    });
};

function mycarousel_itemAddCallback(carousel, first, last, data) {
    var items = data.split('|');
    for (i = 0; i < items.length; i++) {
        var item = jQuery(mycarousel_getItemHTML(items[i])).get(0);
        tb_init(item);
        carousel.add(i + 1, item);
    }
    carousel.size(items.length);
};

function mycarousel_getItemHTML(item)
{
    var url_m = item.replace(‘/_t’, '_w.jpg');
    return '<a href="' + url_m + '" title="' + url_m + '"><img src="' + url_m + '" width="75" height="75" alt="" border="0"  /></a>';
};

jQuery(document).ready(function ()
{
    jQuery('#mycarousel').jcarousel
    ({
        visible: 6,
        itemLoadCallback: mycarousel_itemLoadCallback
    });
});

</script>

</head>

<body>
    <div id="wrap">
        <ul id="mycarousel" class="jcarousel-skin-ie7">
        </ul>
    </div>
</body>
</html>

, , , [Edit tags]
Leave a Comment
  • Please add 4 and 8 and type the answer here:
  • Post
Wiki - Revision Comment List(Revision Comment)
Wikis - Comment List
Sort by: Published Date | Most Recent | Most Useful
Posting comments is temporarily disabled until 10:00am PST on Saturday, December 14th. Thank you for your patience.
Comments
  • Posted by
    on 6 Jun 2012 8:54 PM

    Could you paint a more story, a lot of incomprehensible for beginners? For example I do not understand how to create a file WebForm1.asps? In Visual Studio? Attach an example. Where are the files and WebForm1.aspx WebForm1.aspx.cs copy? And so on ....

  • Posted by
    on 7 Jun 2012 9:17 AM

    Nescoffe,

    I have already attached the sample with this article, but it not showing.If you click edit this article link,you can see the attachment. anyway, here is the link to download the file...

    skydrive.live.com

  • Posted by
    on 7 Jun 2012 9:21 AM

    Download the sample application  from

    gallery.technet.microsoft.com/Integrating-Jquery-e4af0401

    Jayant

Page 1 of 1 (3 items)