Heltblank

Tutorial: jQuery Coverslide integrated with Umbraco

This tutorial show how to integrate the jQuery Coverslide found here: http://dev.jqueryui.com/browser/branches/labs/powella/coverslide?rev=2701, with Umbraco.

First you need to download the zip file, you’ll need almost all the files.

Add the following files to your “scripts” folder:

• jquery-1.3.2.min.js (if you haven’t jquery allready)
• jquery.bounds.js
• jquery-ui-1.7.1.custom.min.js
• ui.coverslide.js

Copy the folowing file to your css folder:

• base.css

Add the references to your head section of your master.

Then create a usercontrol looking like this, let’s call it “coverslide.ascx”:

<asp:Repeater  ID="rep" runat="server">     
<HeaderTemplate>         
<div class="ui-coverslide ui-coverslide-stack">            
 <ul id="stack">    
 </HeaderTemplate>     
<ItemTemplate>        
 <li>            
 <img src='<%#  Eval("FilePath") %>' alt='<%# Eval("Text") %>' />        
 </li>     
</ItemTemplate>     
<FooterTemplate>        
 </ul>
 </div>         
<div id="scrollbar">         </div>     
</FooterTemplate>
 </asp:Repeater>

The codebehind should look identical to to the codebehind file described earlier in “MediaFolderContent”:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using umbraco.presentation.nodeFactory;
using umbraco.cms.businesslogic.media;

namespace HeltBlank.UmbracoModules
{
    public partial class MediaFolderContent : System.Web.UI.UserControl
    {
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);

            Media med = new Media(MediaFolderID);

            var lst = from p in med.Children
                      where p.getProperty("umbracoFile") != null
                      orderby p.Text
                      select new { Text = p.Text, FilePath = p.getProperty("umbracoFile").Value };

            rep.DataSource = lst;
            rep.DataBind();

        }

        public int MediaFolderID { get; set; } //type: mediaCurrent
    }
}

 Then in umbraco do the following:

• Create a macro with the usercontrol you just created
• Add a property to the macro called MediaFolderID, type: mediaCurrent
• Add the macro to your template or the rich text editor
• Select a folder containing images
• Save, and you’re good to go

Sources: http://dev.jqueryui.com/browser/branches/labs/powella/coverslide?rev=2701