This project is read-only.

Example using JSON rather than Data.xml files?

Jan 10, 2008 at 5:41 AM
I'm trying to pass my data to the SlideShow control via JSON rather than using a data file (long story) but I can't figure out how to do it. I've looked through the available examples but although 'Transparent' uses JSON it doesn't contain any images. Can someone please provide an example?
Many thanks in advance,
Tim.
Jan 10, 2008 at 6:21 AM
Edited Jan 10, 2008 at 4:13 PM
The native format for data used by the Slide.Show control is already JSON. To customize it, the best way would be to write your own data provider. For example, the FlickrDataProvider class provided in the source code builds the necessary JSON from the results of calling the Flickr API.

Here's the code for a minimal data provider:

/*******************************************
* class: SlideShow.MyDataProvider
*******************************************/
SlideShow.MyDataProvider = function(control, options)
{
    /// <summary>Provides custom album/slide data.</summary>
    /// <param name="control">The Slide.Show control.</param>
    /// <param name="options">The options for the provider.</param>
    
    SlideShow.MyDataProvider.base.constructor.call(this, control);
    
    SlideShow.merge(this.options,
    {
        // add configurable options here...
    });
    
    this.setOptions(options);
};
 
SlideShow.extend(SlideShow.DataProvider, SlideShow.MyDataProvider,
{
    getData: function(dataHandler)
    {
        /// <summary>Retrieves the data and calls the specified event handler (with the data).</summary>
        /// <param name="dataHandler">The event handler to be called after the data is retrieved.</param>
 
        var data = { transition: "CrossFadeTransition", album: [{ title: "Album #1", slide: [{ image: "Slide1A.jpg" }, { image: "Slide1B.jpg" }] }, { title: "Album #2", slide: [{ image: "Slide2A.jpg" }] }] };
        dataHandler(this, { data: data });
    }
});

Then, either in your configuration file or in the JSON configuration for the control, refer to your data provider like this:

<script type="text/javascript">
   new SlideShow.Control({ dataProvider: { type: "MyDataProvider" }}); // set options if your data provider supports them
</script>
I wrote this code off the top of my head, so there's likely to by a typo or two. If you get stuck, check out the FlickDataProvider class in the DataProvider.js file. This should give you some useful tips if you need to create the JSON programmatically. Good luck and please let us know how it goes!
Feb 28, 2008 at 12:02 AM

billyzkid wrote:
The native format for data used by the Slide.Show control is already JSON. To customize it, the best way would be to write your own data provider. For example, the FlickrDataProvider class provided in the source code builds the necessary JSON from the results of calling the Flickr API.

Here's the code for a minimal data provider:

/*******************************************
* class: SlideShow.MyDataProvider
*******************************************/
SlideShow.MyDataProvider = function(control, options)
{
    /// <summary>Provides custom album/slide data.</summary>
    /// <param name="control">The Slide.Show control.</param>
    /// <param name="options">The options for the provider.</param>
    
    SlideShow.MyDataProvider.base.constructor.call(this, control);
    
    SlideShow.merge(this.options,
    {
        // add configurable options here...
    });
    
    this.setOptions(options);
};
 
SlideShow.extend(SlideShow.DataProvider, SlideShow.MyDataProvider,
{
    getData: function(dataHandler)
    {
        /// <summary>Retrieves the data and calls the specified event handler (with the data).</summary>
        /// <param name="dataHandler">The event handler to be called after the data is retrieved.</param>
 
        var data = { transition: "CrossFadeTransition", album: [{ title: "Album #1", slide: [{ image: "Slide1A.jpg" }, { image: "Slide1B.jpg" }] }, { title: "Album #2", slide: [{ image: "Slide2A.jpg" }] }] };
        dataHandler(this, { data: data });
    }
});

Then, either in your configuration file or in the JSON configuration for the control, refer to your data provider like this:

<script type="text/javascript">
   new SlideShow.Control({ dataProvider: { type: "MyDataProvider" }}); // set options if your data provider supports them
</script>
I wrote this code off the top of my head, so there's likely to by a typo or two. If you get stuck, check out the FlickDataProvider class in the DataProvider.js file. This should give you some useful tips if you need to create the JSON programmatically. Good luck and please let us know how it goes!


Hey billyzkid,
I have tried your example and it didn't work for me. Not sure why.
In my case i'd like to pass folder Name/URL where to read pictures and populate them.
I have not tried Web service solution, it's kind of complicated for me, since it's in C# and i couldn't find any examples how to call it.

Any feedback would be appreciated.

Thanx All.