Slideshow (Carousel) in Sharepoint 2010 CQWP

We can do customization the Sharepoint CQWP according to our need. Here is the one of the complex implementation of shideshow using jquery, css and CQWP. The article is well narrated with shreen shots. The Key elments are ItemStyle.xsl and ContentQueryMain.xsl.

https://www.nothingbutsharepoint.com/sites/eusp/Pages/SharePoint-Integrate-a-Slider-with-the-Content-Query-Web-Part-Part-1-What-does-my-Slider-Need-to-Work.aspx

https://www.nothingbutsharepoint.com/sites/eusp/Pages/SharePoint-Integrating-a-Slider-with-the-Content-Query-Web-Part-Part-2-Setting-up-my-Content-Source.aspx

https://www.nothingbutsharepoint.com/sites/eusp/Pages/SharePoint-Integrate-a-Slider-with-the-Content-Query-Web-Part-Part-3-Integration-with-the-CQWP.aspx

Known Issue and Resolution

While Implementing the above slider i had the following Issues.

Error :
"The web part references an untrusted XSL file. Only XSL files contained in this site's Style Library may be referenced"

Cause :
The path was pointing to the wrong location. Instead of "sites/MySiteCollectionName/Style Library/Xsl Style Sheets" location, it is pointing to "/Style Library/Xsl Style Sheets".

Resolution :
Change the properties in the CQWP File (export the web part and open it in notepad). Possibly we need to change the following file path properties
1. ItemXslLink - Example /sites/rd/Style Library/Xsl Style Sheets/Slider/ITemStyle.xsl
2. MainXslLink - Example /sites/rd/Style Library/Xsl Style Sheets/Slider/ContentQueryMain.xsl
3. Xsl

In the ContentQueryMain.xsl file, the following needs to be done
1. Add the jquery file (jquery.min.js) link in the code above the global.css. This may not required if the jquery link is available in Master page.
2. use ../ prefix for the "/Style Library" (if it is hosted in sites/rd)

Yet Another Slideshow with full code

http://chrisstahl.wordpress.com/2011/08/09/image-slideshow-with-cqwp-in-sharepoint-2010/

Item style customization steps

http://www.heathersolomon.com/blog/articles/customitemstyle.aspx

SharePoint with jQuery, SPServices, and the Google Maps API

Use SharePoint with jQuery, SPServices, and the Google Maps API to create a fun solution for end-users to add markers to a map. Find the full code on www.bentedder.com

Sharepoint Brand Designers - MasterPage, CSS, JQuery ..

Sharepoint Brand Designers http://chrisstahl.wordpress.com/

Extending the jQuery Sortable With Ajax & MYSQL

http://wil-linssen.com/entry/extending-the-jquery-sortable-with-ajax-mysql/

Demo : http://demo.wil-linssen.com/jquery-sortable-ajax/

JSON & .NET

using System.Web.Script;

Employee oEmployee1 = new Employee { Name = "Pini", ID = "111", Age = "30" };
Employee oEmployee2 = new Employee { Name = "Yaniv", ID = "Cohen", Age = "31" };
Employee oEmployee3 = new Employee { Name = "Yoni", ID = "Biton", Age = "20" };

List oList = new List() { oEmployee1, oEmployee2, oEmployee3 };

Serialization.JavaScriptSerializer serializer = new Serialization.JavaScriptSerializer();

string jsonString = serializer.Serialize(oList);
List oListNew = new List();

oListNew = serializer.Deserialize>(jsonString);
//ser.Deserialize(new StreamReader(response.GetResponseStream()).ReadToEnd());

JQuery - Found Solution for Nested Droppable items

http://www.designerstalk.com/forums/programming/64268-jquery-droppable-div-created-fly-not-working.html#post777326


$(".myDropClass").droppable(
{
accept: '.myDragClass',
drop: function (event, ui) {
//remove old item
alert('Dropped');
$(this).find(".myDragClassPlaceHolder").remove();

var listHtml = "

" +
"

" +
"New Droppable area" + ui.draggable.text() + "

";
alert('Added1');
$(this).append(listHtml);
alert('Added');
$(this).find('#ontheflyDiv').droppable({
drop: function(event, ui)
{
alert('Set the droppable behavior to the newly created element');
$(this).append("hello");

}
});

}
});