Feed jQuery slideshow with slides from ASP.NET web service

Home Articles Downloads Links About

Introduction

You can easily create a dynamic slideshow by using the SlideShow Extender that comes with the AJAX Control Toolkit. However, many people consider the Microsoft AJAX script library bulky and bandwidth-costly.  Therefore, if you need more light-weighted solution and a slideshow that can be hosted on a HTML page, the Microsoft Slideshow Extender is not an option.

For providing the slides I am using a JSON serialized ASP .NET web service.

To request the slides I am using a simple jQuery AJAX request.
In this article I am using a jQuery base slideshow from dynamic drive web site http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

Creating JSON serialized ASP .NET web service

The JSON serialize web service is a regular ASP.NET web service class that has assigned the attribute System.Web.Script.Services.ScriptService. This attribute makes it accessible by the AJAX POST request. In the example bellow the service is called DataAPI. The web method that returns the slide information is called GetFadeSlideShowData. The image information can be read from a database, xml file or the file system. But for simplicity, I have just created a several slide objects with the information for images that are situated in the images folder of my site.

[WebService(Namespace = "http://kralevsoftware.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public
class DataAPI : System.Web.Services.WebService {
    public DataAPI () {
        //Uncomment the following line if using designed components

        //InitializeComponent();

    }

    [WebMethod]
    public FadeSlide[] GetFadeSlideShowData()
    {

        // Create slide array

        FadeSlide[] slides = new FadeSlide[5];

        // Initialize the slide array with samle slides

        slides[0] = new FadeSlide("images/thmb_space_wallpaper.png", "images/Space_wallpaper.jpg", "_new", "Sample space wallpaper");

        slides[1] = new FadeSlide("images/thmb_eye-nebula.png", "images/Eye-nebula.jpg", "_new", "Eye nebula");

        slides[2] = new FadeSlide("images/thmb_Hubble-Wallpaper.png", "images/Hubble-Wallpaper.jpg", "_new", "Hubble Wallpaper");

        slides[3] = new FadeSlide("images/thmb_RomulanLikeNebula.png", "images/RomulanLikeNebula.jpg", "_new", "Romulan like nebula");

        slides[4] = new FadeSlide("images/thmb_spiral-galaxy.png", "images/Spiral-galaxy.jpg", "_new", "Spiral galaxy");

        // return the slides

        return slides;
    }
}

The method return an array of the slide objects that I have created.

The slide class is just a simple data class that has attribute Serializable. (This is in order objects to be able serialized to JSON). Also it has public properties for the slide data: ImagePath (url of the image to be displayed), Url (An url which should be open when the user click at the slide), LinkTarget (Target of the link), Description (Slide description). 

NOTE: For the slideshow that I use in the example only the ImagePath is required (All other properties are optional)

/// <summary>
///
Fade Gallery slide data class
///
</summary>

[Serializable]

public class FadeSlide
{

    #region [fields]

    string _ImagePath;
    string _Url;
    string _LinkTarget;
    string _Description;

    #endregion

    #region [Constructors]

    public FadeSlide(string imagepath, string url, string linktarget, string description)
    {
        _ImagePath = imagepath;
        _Url = url;
        _LinkTarget = linktarget;
        _Description = description;
    }

    #endregion

    #region [Properties]

    public string ImagePath
    {
        get { return _ImagePath; }
        set { _ImagePath = value; }
    }

    public string Url
    {
        get { return _Url; }
        set { _Url = value; }   
    }

    public string LinkTarget
    {
        get { return _LinkTarget; }
        set { _LinkTarget = value; }
    }

    public string Description
    {
        get { return _Description; }
        set { _Description = value; }
    }
    #endregion
}

Client-Side

In my example I host the slideshow in a simple HTML page. In order to be able to work the slideshow and call to the web service, at your page it has to be included the JavaScript files of jQuery and the Slideshow:

<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>   

<script type="text/javascript" src="JS/fadeslideshow.js">
   
/***********************************************

    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)

    * This notice MUST stay intact for legal use

    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

    ***********************************************/
</
script>

Calling web service using jQuery

To retrieve that slide information client-side I prepare a jQuery AJAX request. It makes a POST request to the web service method: DataAPI.asmx/GetFadeSlideShowData

If the request is successful I call the JavaScript function AjaxSucceded. Otherwise I call the AjaxFailed function which displays an error message:

// AJAX request to the ASP.NET web service 

     jQuery.ajax({
                  type: "POST",
                  url: "DataAPI.asmx/GetFadeSlideShowData",
                  contentType: "application/json; charset=utf-8",
                  data: "{}",
                  dataType: "json",
                  success: AjaxSucceeded,
                  error: AjaxFailed
      });

function AjaxFailed(result) {

          alert(result.status + ' ' + result.statusText);
      }

Creating the jQuery slideshow

Upon successful request in the AjaxSucceded function I process the slide information received from the web service and initialize the jQuery slideshow script.

// If the request is successfull build the gallery with the slides

      function AjaxSucceeded(result) {
         var imagearray = [];
         var slides = [];
         // Build array with the image information

         for (var FadeSlide in result) {
            var slide = [];
             slide.push(result[FadeSlide].ImagePath,
                        result[FadeSlide].Url,
                        result[FadeSlide].LinkTarget,
                        result[FadeSlide].Description);
            // store the slide data in the array

            imagearray.push(slide)

        }

        // Create fade slide show gallery

        var mygallery=new fadeSlideShow({
                  wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
                  dimensions: [250, 188], //width/height of gallery in pixels. Should reflect dimensions of largest image
                  imagearray: imagearray, //image array with slides data
                  displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
                  persist: false, //remember last viewed slide and recall within same session?
                  fadeduration: 500, //transition duration (milliseconds)
                  descreveal: "always", //always show description
                  togglerid: "fadeshow1toggler" //slide navigation
            })

        }

Also in the HTML body I create the following div elements:

fadeshow1 host the slideshow

fadeshow1toggler for navigating to the previous or next slide.

 

<div id="fadeshow1"></div>

<div id="fadeshow1toggler" style="width:250px; text-align:center; margin-top:10px">

<a href="#" class="prev"><img src="images/nav_left.gif" style="border-width:0" alt="Previous" /></a>  <span class="status" style="margin:0 50px; font-weight:bold"></span>

<a href="#" class="next"><img src="images/nav_right.gif" style="border-width:0" alt="Next" /></a>

</div>

That’s it.

To see the entire code download the example. 

NOTE: Visual Studion runs the web service by default (NOT the html page with the code). To see the example in your VS set FadeSliderShow.htm as start page. 

For questions or sujections please write to kralevsoftware@gmail.com 


Google Ads