CodeProject: Slideshow XML-Javascript. Free source code and programming help

Report Article

Discuss

Send to a friend

12 votes for this Article.

Popularity: 4.83 Rating: 4.48 out of 5

Note: This is an unedited contribution. If this article is inappropriate, needs attention or copies someone else's work without reference then please Report This Article

Download SlideShow - 1.43 MB

Introduction

This slideshow is to create a professional look like flash slideshow.
Now you dont want to install any flash player or add-ons to run this slideshow, because its used simple Javascript code.

Background

This slideshow has to need following prerequisite are follows

1. \Images folder [contains Images should defined in details.xml]
2. settings.xml [all global setting of slideshow]
3. details.xml [contains all the description of each slide like Title, Heading, Description,Navigate URL,Image URL etc..]
XML File hase following details

1. The XML will contain the following data (also see box at the bottom of this document for exampleXML)

image URL
link URL
text title
text description

2. Application will have a separate, external config file with the following values

Number of seconds to pause on each slide
Number of seconds for transition between each slide
Slideshow width and height
Starting x and y position of text area
Width and max height of text area
Text background box transparency (0-100%)
Text box padding (between box edge and text)

3. Application must rotate through a variable number of slides

The number of slides is determined by the number of entries in the XML file
X second alpha transition between slides (controlled from an external config file, separate from the XML file)
Pause x seconds per slide (controlled from an external config file, separate from the XML file)

4. The entire background of each slide will be an image

5. Each entire slide will be a hyperlink.

Each slide will link to only one location
Each unique slide will link to a unique location

6. Application contains buttons in the bottom right corner

Boxes are clickable and allow user to manually move between slides
Application should alpha transition between slides when making a manual selection
Boxes will become white with dark text to indicate the current slide
The number of boxes will change dynamically based on the number of slides in the XML file

Using the code

A brief description of how to use the article or code. The class names, the methods and properties, any tricks or tips.

Blocks of code should be set as style "Formatted" like this:

			 //for XML
    var xmlDoc,
        xmlDescription;
    //for Slide
    var slideHeight = "250",
        slideWidth = "450",
        appliedFielter = "blendTrans(duration=1)";
    //for Images
    var dimages=new Array(),
        arrDesc=new Array();
    //for Other
    var starterKey,
        currentPage=0;
    //for Pagging
    var strPaging,
        containerPaging,
        _previousPage=null,
        _currentPage = null,
        totalPages=0,
        Loop=true,
        slideSpeed = 5000,
        pageStyle = "number",
        pagecellpadding = "2px",
        pagecellspacing = "2px",
        pageBackground = "darkgray",
        selectedpageBackground = "red",
        pageFontcolor = "white",
        pageCursor = "pointer",
        pageAlign= "center";
    //for description
    var descTransparent = 40,
        descLeft = 250,
        descTop = 50,
        descWidth = 290,
        descHeight = 120,
        deschFont = "verdana",
        deschFontColor = "black",
        deschFontSize = "12pt",
        deschFontWeight = "bold",
        descdFont = "verdana",
        descdFontColor = "darkgray",
        descdFontSize = "10pt",
        backgroundIMG = "",
        descdFontWeight = "normal";
    var txtPaddingLeft = "4px",
        txtPaddingRight = "4px",
        txtPaddingTop = "4px",
        txtPaddingBottom = "4px";

    function getFielter()
    {
        appliedFielter = document.getElementById('drpFilter').value;
    }
    function preload()
    {
       //for Slide
       var slide = document.getElementById("imgFilter");
       slide.height = slideHeight;
       slide.width = slideWidth;
       var Description = document.getElementById("divDescription");
       with(Description.style)
       {
           background="url("+ backgroundIMG +")";
           left = descLeft;
           top = descTop;
           width = descWidth;
           height = descHeight;
           filter = "alpha(opacity="+ descTransparent +")";
       }
       var _head = document.getElementById('divsihead');
       with(_head.style)
       {
           fontFamily = deschFont;
           color = deschFontColor; 
           fontSize =  deschFontSize; 
           fontWeight = deschFontWeight; 
       }
       var _desc = document.getElementById('divsidesc');
       with(_desc.style)
       {
           fontFamily = descdFont; 
           color = descdFontColor; 
           fontSize =  descdFontSize; 
           fontWeight = descdFontWeight; 
       }
       var _tblDescription = document.getElementById('tblDescription');
       with(_tblDescription.style)
       {
           paddingTop = txtPaddingTop;
           paddingRight = txtPaddingRight;
           paddingBottom = txtPaddingBottom;
           paddingLeft = txtPaddingLeft;
       }

//for complete source code please Download SlideShow - 1.43 MB

History

If it is helpfull for you, please give your feedback/rate and review to me.

Thanks.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

About the Author

Sunasara Imdadhusen

Aspiring for a challenging carrier wherein I can learn, grow, expand and share my existing knowledge in meaningful and coherent way.

Occupation:	Software Developer (Senior)
Company:	Indusa Infotech Services Pvt. Ltd Ahmedabad-Gujrat
Location:	India

Other popular ASP.NET articles:

Multiple File Upload With Progress Bar Using Flash and ASP.NET
How to use Flash to upload multiple files in a medium-trust hosting environment
CAPTCHA Image
Using CAPTCHA images to prevent automated form submission.
10 ASP.NET Performance and Scalability Secrets
10 easy ways to make ASP.NET and AJAX websites faster, more scalable and support more traffic at lower cost
Paging of Large Resultsets in ASP.NET
An article about optimization and performance testing of MS SQL Server 2000 stored procedures used for paging of large resultsets in ASP.NET
File Upload with ASP.NET
This article shows you how work with uploading of the files using ASP.NET and C#.