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.
Look at the following URL to Enable anonymous access in SharePoint 2010 http://www.topsharepoint.com/enable-anonymous-access-in-sharepoint-2010
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" %>
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>
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 ....
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
Download the sample application from
gallery.technet.microsoft.com/Integrating-Jquery-e4af0401
Jayant