Click here to Skip to main content
Click here to Skip to main content

Slideshow using XML and JavaScript

, 4 Sep 2008
Rate this:
Please Sign up or sign in to vote.
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:

//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)

About the Author

Sunasara Imdadhusen
Software Developer (Senior) 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. 1st Best Asp.Net article of SEP 2010
  2. 2nd Best Asp.Net article of MAY 2011
 
Read More Articles...
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
GeneralMy vote of 5 PinmemberPhoenixKashyap15-Jan-12 23:34 
GeneralRe: My vote of 5 PinpremiumSunasara Imdadhusen22-Apr-14 2:45 
Questionnewspaper website Pinmembertranghuynh_meocon25-Dec-11 18:03 
AnswerRe: newspaper website PinmemberSunasara Imdadhusen23-Feb-12 23:12 
GeneralIt does not work in Fire fox Pinmemberbinodthapa12-May-09 17:57 
AnswerRe: It does not work in Fire fox PinmemberSunasara Imdadhusen5-Oct-09 1:47 
Questioncan you provide flash show ? PinmemberJLKEngine00823-Sep-08 18:43 
AnswerRe: can you provide flash show ? PinmemberSunasara Imdadhusen3-Feb-11 18:25 
GeneralGreat, but..... Pinmemberm3jim8-Sep-08 13:50 
GeneralRe: Great, but..... PinmemberSunasara Imdadhusen10-Sep-08 19:20 
GeneralRe: Great, but..... PinmemberSunasara Imdadhusen26-Oct-08 19:08 
hi,
Jim
 
I m happy with you are suggestion, and i also starting a IT company in India.
could u tell me please what is best source for outsourcing, and also are you interesting in this business.
 
if you are intrested please mail to
imdadhusen.sunasara@gmail.com or
i_sunasara@yahoo.co.in
 
Regards,
Imdad
 
Sunasara Imdadhusen A.
+91 99095 44184
+91 02767 284464

GeneralVery Nice !!!! PinmemberAbhijit Jana5-Sep-08 3:35 
GeneralRe: Very Nice !!!! PinmemberSunasara Imdadhusen10-Sep-08 19:34 
GeneralVery Nice [modified] PinmemberJLKEngine0084-Sep-08 23:52 
GeneralRe: Very Nice PinmemberSunasara Imdadhusen10-Sep-08 19:30 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 4 Sep 2008
Article Copyright 2008 by Sunasara Imdadhusen
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid