Click here to Skip to main content
15,868,016 members
Articles / Web Development / ASP.NET

Slideshow using XML and JavaScript

Rate me:
Please Sign up or sign in to vote.
4.94/5 (22 votes)
4 Sep 2008CPOL2 min read 162K   2.2K   50   15
Dynamic slideshow performing lots of effects (with XML configuration).

Slideshow

Introduction

This slideshow is to create a professional look like a Flash slideshow. You need not install the Flash player or add-ons to run this slideshow, because it uses simple JavaScript code.

Background

This slideshow has the following prerequisites:

  1. \Images folder [contains images defined in details.xml].
  2. settings.xml [all global setting for the slideshow].
  3. details.xml [contains the data for each slide like title, heading, description, navigate URL, image URL etc..].

The XML file has the following details:

  • The XML will contain the following data:
    • image URL
    • link URL
    • text title
    • text description
  • 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)
  • The 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)
  • The entire background of each slide will be an image.
  • Each slide will be a hyperlink:
    • Each slide will link to only one location
    • Each unique slide will link to a unique location
  • The application contains buttons in the bottom right corner:
    • Boxes are clickable and allow the user to manually move between slides
    • The application should have an 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

Here is an excerpt of the JavaScript code:

JavaScript
//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 the complete source code, please download the file from the top of this article.

Slideshow effects

Sample screenshot of slideshow effect

Conclusion

If this is helpful 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)


Written By
Technical Lead Infostretch Ahmedabad-Gujarat
India India
Aspiring for a challenging carrier wherein I can learn, grow, expand and share my existing knowledge in meaningful and coherent way.

sunaSaRa Imdadhusen


AWARDS:

  1. 2nd Best Mobile Article of January 2015
  2. 3rd Best Web Dev Article of May 2014
  3. 2nd Best Asp.Net article of MAY 2011
  4. 1st Best Asp.Net article of SEP 2010


Read More Articles...

Comments and Discussions

 
GeneralMy vote of 5 Pin
PhoenixKashyap15-Jan-12 23:34
PhoenixKashyap15-Jan-12 23:34 
GeneralRe: My vote of 5 Pin
Sunasara Imdadhusen22-Apr-14 2:45
professionalSunasara Imdadhusen22-Apr-14 2:45 
Questionnewspaper website Pin
tranghuynh_meocon25-Dec-11 18:03
tranghuynh_meocon25-Dec-11 18:03 
AnswerRe: newspaper website Pin
Sunasara Imdadhusen23-Feb-12 23:12
professionalSunasara Imdadhusen23-Feb-12 23:12 
GeneralIt does not work in Fire fox Pin
binodthapa12-May-09 17:57
binodthapa12-May-09 17:57 
AnswerRe: It does not work in Fire fox Pin
Sunasara Imdadhusen5-Oct-09 1:47
professionalSunasara Imdadhusen5-Oct-09 1:47 
Questioncan you provide flash show ? Pin
JLKEngine00823-Sep-08 18:43
JLKEngine00823-Sep-08 18:43 
AnswerRe: can you provide flash show ? Pin
Sunasara Imdadhusen3-Feb-11 18:25
professionalSunasara Imdadhusen3-Feb-11 18:25 
GeneralGreat, but..... Pin
m3jim8-Sep-08 13:50
m3jim8-Sep-08 13:50 
GeneralRe: Great, but..... Pin
Sunasara Imdadhusen10-Sep-08 19:20
professionalSunasara Imdadhusen10-Sep-08 19:20 
GeneralRe: Great, but..... Pin
Sunasara Imdadhusen26-Oct-08 19:08
professionalSunasara Imdadhusen26-Oct-08 19:08 
GeneralVery Nice !!!! Pin
Abhijit Jana5-Sep-08 3:35
professionalAbhijit Jana5-Sep-08 3:35 
GeneralRe: Very Nice !!!! Pin
Sunasara Imdadhusen10-Sep-08 19:34
professionalSunasara Imdadhusen10-Sep-08 19:34 
GeneralVery Nice [modified] Pin
JLKEngine0084-Sep-08 23:52
JLKEngine0084-Sep-08 23:52 
GeneralRe: Very Nice Pin
Sunasara Imdadhusen10-Sep-08 19:30
professionalSunasara Imdadhusen10-Sep-08 19:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.