ASP.NET Slideshow Control with jQuery and XML
 
Published: 05 Jan 2010
Unedited - Community Contributed
Abstract
For the past few years, image sliders, slide-shows, and ad rotator scripts have become increasingly popular for web pages. There are thousands of these scripts on the Web but is difficult to find one that can fit your requirements. Ideally, you would want a script that is flexible enough for to use as an ad rotator, for slide-shows, or for image rotators with navigation controls and extract the slides information from XML file. After spending some time researching for it, I found the jQuery based slideshow with navigation controls from Dynamic Drive and the article reading-xml-with-jquery. I have put together a step by step tutorial on how I have accomplished this.
by Bryian Tan
Feedback
Average Rating: This article has not yet been rated.
Views (Total / Last 10 Days): 38934/ 124

Introduction

For the past few years, the image sliders, slide-shows, and Ad Rotator scripts have become increasingly popular for web pages. There are thousands of these scripts on the Web but is difficult to find one that fit my requirements. I want a script that is flexible enough for me to use it as an Ad Rotator, slide-shows or image rotator with navigation controls and extract the slides information from XML file. After spending some time researching for it, I found the jQuery based slideshow with navigation controls from Dynamic Drive and the article reading-xml-with-jquery. I had put together these finding and a brief tutorial "jQuery slideshow with XML". Recently, I decided to encapsulate this into ASP.NET User Controls to increase reusability of code. Now, I can have multiple instances of this control on my page and I can customize the width and height, options to hide or show navigation controls, XML file source, and others setting for each instance. I have put together a step by step tutorial on how I have accomplished this.

Figure 1

 

Check List

·         Simple Controls Gallery v1.3

·         Reading XML with JQuery

·         jquery-1.3.2.min.js

 

Getting Started

Before we begin, make sure to download a copy of the Simple Controls Gallery v1.3 from Dynamic Drive, Reading XML with JQuery and the latest version of jQuery JavaScript Library. Here is the structure of my project. You are welcome to download this demo.

Figure 2

 

Putting everything together

SlideShow.ascx.cs

First, add a Web User Control to the project and create public properties and methods to allow interaction with the control at design-time or programmatically.

Listing 1

//slide div
    public string WrapperID
    {
        get { return this.ClientID + "Div"; }
    }

The WrapperID will return the unique id of the User Control. Every time we drop an ASP.NET User Control on to a page, it will automatically include and ID property that uniquely identifies the control. The ID value is the combination of the tagname and a number. If the tagname of the User Control is "SlideShow", the WrapperID will return SlideShow1Div, SlideShow2Div …SlideShowNDiv.

Listing 2

private int _width =728;
    [DefaultValue(728)]
    public int Width
    {
        set { this._width = value; } get { return this._width; }
    }
    //height of the slide
    private int _height = 95;
    [DefaultValue(95)]
    public int Height
    {
        set { this._height = value; }  get { return this._height; }
    }

Add the Width and Height properties to allow us to adjust the height and width of the div control.

Listing 3

// autoplay true|false 
    private bool _autoPlay = true;
    [DefaultValue(true)]
    public bool AutoPlay
    {
        get { return this._autoPlay; }  set { this._autoPlay = value; }
    }
 
    // Show Navigation Control true|false
    private bool _showNavigation = true;
    [DefaultValue(true)]
    public bool ShowNavigation
    {
        get { return this._showNavigation; } set{ this._showNavigation = value; }
    }
 
    private int _delay_btw_slide = 10000;
    /// delay between slide in miliseconds 
    [DefaultValue(10000)]
    public int Delay_btw_slide
    {
        set { this._delay_btw_slide = value; }   get { return this._delay_btw_slide; }
    }
 
    private int _fadeDuration = 2000;
    /// transition duration (milliseconds) 
    [DefaultValue(2000)]
    public int FadeDuration
    {
        set { this._fadeDuration = value; }  get { return this._fadeDuration; }
    }
    private int _cycles_before_stopping = 99;
    /// cycles befote stopping
    [DefaultValue(99)]
    public int Cycles_before_stopping
    {
        set { this._cycles_before_stopping = value; } 
        get { return this._cycles_before_stopping; }
    }
 
    // previous button
    private string _btnPrevious = "~/images/previous.gif";
    [Category("Appearance"), Localizable(true)]
    [Description("Previous button"), DefaultValue("~/images/previous.gif"), Bindable(true)]
    [Editor("System.Web.UI.Design.ImageUrlEditor, System.Design, 
Version=2.0.0.0, Culture=neutral, 
PublicKeyToken=b03f5f7f11d50a3a", typeof(UITypeEditor))]    
[UrlProperty]
    public string BtnPrevious
    {
        get { return this._btnPrevious; } set { this._btnPrevious = value;}
    }
    // Next button
    
 
    // Play button 
    
// Pause button 
    

AutoPlay - true = start the slide show automatically without pressing the play button and vice versa.

ShowNavigation - true = show the navigation control or false = hide the navigation control

Delay_btw_slide - get or set the delay between each image slide.

FadeDuration - get or set the fade duration between each slide.

Cycles_before_stopping - get or set the number of rotation before stopping the rotation. If we set 99, it will rotate 99 times and stop until we hit the play button again.

BtnPrevious, BtnNext, BtnPlay, BtnPause - get or set the image for previous, next, play and the pause button respectively. These properties accept relative URL or absolute URL path to the button images. Make sure to place the images folder at the root directory of the application if you are using relative URL.

Listing 4

//xml file
    private string _xmlSource = "~/xml/sites.xml";
    [UrlProperty]
    [Bindable(true)]
    [DefaultValue("~/xml/sites.xml")]
    public string XMLSource
    {
        get { return this._xmlSource; } set { this._xmlSource = value; }
    }
//xPath
    private string _xPath = "site";
    [DefaultValue("site")]
    public string xPath
    {
        get { return this._xPath; }  set { this._xPath = value; }
    }
    

Add a property to get and set the XML source path. The default path is set to ~/xml/sites.xml. This property accepts relative URL or absolute URL path to the XML file. Make sure to place the XML folder at the root directory of the application if you are using relative URL. Then add another property, XPATH, to navigate through elements and attributes in the XML document.

 

Listing 5

void CreateScript()
    {
        StringBuilder ssScript = new StringBuilder(string.Empty);
        string arrName = "myArray" + this.WrapperID;
 
        //read XML
        ssScript.Append("var " + arrName+ "= [];");
        ssScript.Append("$(document).ready(function() {");
        ssScript.Append(" $.ajax({");
        ssScript.Append("type: \"GET\",");
        ssScript.Append("url: '" + ResolveUrl(XMLSource) + "',");
        ssScript.Append("cache: true,");
        ssScript.Append("dataType: \"xml\",");
        ssScript.Append("success: function(xml) {");
        ssScript.Append("var count = 0;");
        ssScript.Append("$(xml).find('" + xPath + "').each(function() {");
 
        ssScript.Append(" var url = $(this).find('url').text();");
        ssScript.Append("var target = $(this).find('target').text();");
        ssScript.Append("var imageURL = $(this).find('imageURL').text();");
        ssScript.Append("var alt = $(this).find('alt').text();");
 
        ssScript.Append(arrName + "[parseInt(count)] = new Array(imageURL, url, 
            target, alt); ");
        ssScript.Append("count++;");
        ssScript.Append("});");
 
        //slide-shows
        ssScript.Append(" var mygallery"+this.WrapperID+" = new simpleGallery({");
        ssScript.Append(" wrapperid: '" + this.ClientID + "_" + this.WrapperID + "',");
        ssScript.Append("dimensions: [" + Width.ToString() + ","+ 
            Height.ToString()+"],"); //width/height of gallery in pixels. Should reflect 
            dimensions of the images exactly
        ssScript.Append("imagearray: "+arrName+","); //array of images
        ssScript.Append("navimages: ['" + ResolveUrl(BtnPrevious) + "', '" + 
            ResolveUrl(BtnPlay) + "', '" + ResolveUrl(BtnNext) + "', '" +
            ResolveUrl(BtnPause) + "'],");
        ssScript.Append("showpanel: '" + ShowNavigation.ToString().ToLower() + "',");
        ssScript.Append(" autoplay: [" + AutoPlay.ToString().ToLower() + "," +  
            Delay_btw_slide.ToString() + "," + Cycles_before_stopping.ToString() + "],");  
            //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
        ssScript.Append(" persist: true,");
        //transition duration (milliseconds)
        ssScript.Append(" fadeduration:" + FadeDuration.ToString() + ","); 
        ssScript.Append(" oninit: function() {"); 
        //event that fires when gallery has initialized/ ready to run
        ssScript.Append("  },");
        // event that fires after each slide is shown
        ssScript.Append("  onslide: function(curslide, i) {"); 
        //curslide: returns DOM reference to current slide's DIV 
        //(ie: try alert(curslide.innerHTML)
        //i: integer reflecting current image within collection being shown 
        //(0=1st image, 1=2nd etc)
        ssScript.Append("   }");
        ssScript.Append("  })");
        ssScript.Append("  }");
        ssScript.Append("   });");
        ssScript.Append(" });");
 
        ClientScriptManager jScript = Page.ClientScript;
        jScript.RegisterClientScriptBlock(this.GetType(), 
            Guid.NewGuid().ToString(), ssScript.ToString(), true);
    }

Then add a method to render the JavaScript programmatically. The main purpose of this JavaScript is to read the slide information from the XML file into an array and initialize the slide-show properties. The key items of this JavaScript are the array variable, HTML div control and the slide-shows variable. In order to have multiple instances of the slide-shows on the page, we have to ensure that the unique ids and name are being assigned to the mentioned key items. We can utilize the WrapperID property to create a unique names and ids for each instance. Note that ResolveUrl method is being utilized so that the browser can resolve the URL of the images and XML file. The rest of the code is very straight forward; you can download the original code from Dynamic Drive to compare the changes.

 

Listing 6

void CreateDiv()
    {
        System.Web.UI.HtmlControls.HtmlGenericControl ssDivWrapper = new 
            System.Web.UI.HtmlControls.HtmlGenericControl("div");
        ssDivWrapper.ID = this.WrapperID;
        ssDivWrapper.Style.Add("background", "white none repeat scroll 0% 0%");
        ssDivWrapper.Style.Add(HtmlTextWriterStyle.Overflow, "hidden");
        ssDivWrapper.Style.Add(HtmlTextWriterStyle.Position, "relative");
        ssDivWrapper.Style.Add(HtmlTextWriterStyle.Visibility, "visible");
        ssDivWrapper.Style.Add(" -moz-background-clip""border");
        ssDivWrapper.Style.Add("-moz-background-origin", "padding");
        ssDivWrapper.Style.Add("-moz-background-inline-policy", "continuous");
 
        this.Controls.Add(ssDivWrapper);
    }

The CreateDiv method will generate the HTML div on the page dynamically.

Listing 7

//load the javascript
    internal void LoadJScript()
    {
        ClientScriptManager script = Page.ClientScript;
        //prevent duplicate script
        if (!script.IsStartupScriptRegistered(this.GetType(), "JQuerySlideShowJS"))
        {
            script.RegisterClientScriptBlock(this.GetType(), "JQuerySlideShowJS",
            "<script type='text/javascript' src='" + 
            ResolveUrl("~/SlideShowControl/js/jquery-1.3.2.min.js") + "'></script>");
        }
 
        if (!script.IsStartupScriptRegistered(this.GetType(), "SimpleGalleryJS"))
        {
            script.RegisterClientScriptBlock(this.GetType(), "SimpleGalleryJS",
            "<script type='text/javascript' src='" + 
            ResolveUrl("~/SlideShowControl/js/simplegallery.js") + "'></script>");
        }
    }

The purpose of the LoadJScript method is to load the jquery-1.3.2.min.js and simplegallery.js dynamically with no duplicates. With that being said, if we drag 10 slide-shows controls on to a page, it will only add the JavaScript once on to the ASP.NET page. This will help avoid unnecessarily assembling the client-side script.   

 

simplegallery.js

I'm not going to post the whole contents of this JavaScript here but I'll list the changes that I have made.

1.    Removed the static image buttons properties from the simpleGallery_navpanel interface since the image buttons will be assigned dynamically through the CreateScript method.

2.    Modified the script to read the image buttons properties from different interface.

3.    Added logic to hide and display the navigation control through the ShowNavigation property.

4.    Added alternate text to the image buttons.

   

Using the Code:

Listing 8

&lt;uc1:SlideShow ID="SlideShow2" runat="server" />
 
Drag and drop the User Control on to the page. Here is the default setting of the User control.

Figure 3:

 

Listing 9

 
&lt;uc1:SlideShow ID="SlideShow5" runat="server" 
      BtnNext="~/images/nav-arrow-right.gif" 
      BtnPrevious="~/images/nav-arrow-left.gif" AutoPlay="false" />
 

Above is an example on how to set the image buttons and AutoPlay property.

Listing 10

&lt;uc1:SlideShow ID="SlideShow7" runat="server" XPath="site500x281"  
      Width="500" Height="281" ShowNavigation="true" 
      XMLSource="~/xml/500x281.xml"/>
 

The above example demonstrates on how to set the width, height of the HTML div control. The control is getting the images information from the 500x821.xml file and selecting the site500x281 nodes. By default, the ShowNavigation attribute is set to true.

 

Listing 11 - More sample usage

 
&lt;uc1:SlideShow ID="SlideShow6" runat="server" BtnNext="~/images/nav-arrow-right.gif" 
        BtnPrevious="~/images/nav-arrow-left.gif" 
            XMLSource="~/xml/120x600.xml" XPath="site120x600" 
         Width="120" Height="600" />
 
&lt;uc1:SlideShow ID="SlideShow1" XPath="site120x60" Width="120" Height="60"
                        ShowNavigation="false" 
                        runat="server" XMLSource="~/xml/sites2.xml"  />

 

Conclusion

 

If you are not sure of the relative path to the images or XML file, I would suggest using absolute links. Please keep in mind that the links to the XML files have to be in the same domain, no cross-domain calls. Also, try not to place all the images information in one XML file for multiple slide-shows controls. Imagine, if we have a XML file of 50KB in size, 10 slide-shows control on the page and each of them consume the identical XML source. It will cost us 500KB bandwidths and degrade the loading speed. I hope someone will find this tutorial useful and share some thoughts with me on how to make it better.

 

Tested on IE 6.0/7.0/8.0, Google Chrome and Firefox 3.0.13.

 

References



User Comments

Title: asp   
Name: jek
Date: 2011-08-26 11:30:53 AM
Comment:
not enough
Title: User Experience   
Name: Steve
Date: 2010-01-12 11:32:45 AM
Comment:
From a UX perspective, this control has a few issues. First, one has no idea that they can hover over the image to control anything... it's mystery navigation. Granted, the slide in and out looks nice, but there should probably be some sort of indication that the user is able to do things other than watch the images fly by. Second, the tooltip that pops up after hovering over the image doesn't really describe much. This may simply be just a function of the fact that this is a demo, but in production use, the tooltip should probably indicate exactly where the user will be whisked off to after they click.

Just a few thoughts. Otherwise, great tute, and terrific of you to take the time to author this.
Title: The wrong Sample!   
Name: Wagi
Date: 2010-01-12 9:11:56 AM
Comment:
Hey, nice Tutorial but it is the wrong Download Sample!

Product Spotlight
Product Spotlight 





Community Advice: ASP | SQL | XML | Regular Expressions | Windows


©Copyright 1998-2020 ASPAlliance.com  |  Page Processed at 2020-08-08 10:07:47 PM  AspAlliance Recent Articles RSS Feed
About ASPAlliance | Newsgroups | Advertise | Authors | Email Lists | Feedback | Link To Us | Privacy | Search