Click here to Skip to main content
5,785,816 members and growing! (17,849 online)
Email Password   helpLost your password?
Web Development » ASP.NET » Samples     Advanced License: The Code Project Open License (CPOL)

Slideshow XML-Javascript

By Sunasara Imdadhusen

Dynamic Slideshow performing lotsof effects (with XML configuration)
Javascript, XML, Windows, ASP.NET

Posted: 4 Sep 2008
Updated: 4 Sep 2008
Views: 5,451
Bookmarked: 19 times
Note: This is an unedited reader contribution
Announcements
Loading...



Search    
Advanced Search
Sitemap
12 votes for this Article.
Popularity: 4.83 Rating: 4.48 out of 5
0 votes, 0.0%
1
2 votes, 16.7%
2
0 votes, 0.0%
3
0 votes, 0.0%
4
10 votes, 83.3%
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
Slideshow

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

Other screenshot for Slideshow Effect

Slideshow effects

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 India

Other popular ASP.NET articles:

Article Top
Sign Up to vote for this article
You must Sign In to use this message board.
FAQ FAQ Noise ToleranceSearch Search Messages 
 Layout  Per page   
 Msgs 1 to 8 of 8 (Total in Forum: 8) (Refresh)FirstPrevNext
Generalcan you provide flash show ?memberJLKEngine00819:43 23 Sep '08  
GeneralGreat, but.....memberm3jim14:50 8 Sep '08  
GeneralRe: Great, but.....memberSunasara Imdadhusen20:20 10 Sep '08  
GeneralRe: Great, but.....memberSunasara Imdadhusen20:08 26 Oct '08  
GeneralVery Nice !!!!memberAbhijit Jana4:35 5 Sep '08  
GeneralRe: Very Nice !!!!memberSunasara Imdadhusen20:34 10 Sep '08  
GeneralVery Nice [modified]memberJLKEngine0080:52 5 Sep '08  
GeneralRe: Very NicememberSunasara Imdadhusen20:30 10 Sep '08  

General General    News News    Question Question    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

PermaLink | Privacy | Terms of Use
Last Updated: 4 Sep 2008
Editor:
Copyright 2008 by Sunasara Imdadhusen
Everything else Copyright © CodeProject, 1999-2009
Web10 | Advertise on the Code Project