SharePoint 2010: Integrating Jquery Carousel and ThickBox

Article
1/17/2024

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.

https://spcarousel.codeplex.com/ (There is no download Link)
http://sorgalla.com/jcarousel
http://jquery.com/demo/thickbox/

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">

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>

Share via

SharePoint 2010: Integrating Jquery Carousel and ThickBox

Step 1: Create Picture Library and Enable Anonymous Access

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

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

Additional resources