Click here to Skip to main content
6,822,613 members and growing! (20,557 online)
Email Password   helpLost your password?
Web Development » ASP.NET » Samples     Advanced License: The Code Project Open License (CPOL)

Slideshow using XML and JavaScript

By Sunasara Imdadhusen

Dynamic slideshow performing lots of effects (with XML configuration).
C#, Javascript, XML, Windows, .NET, ASP.NET, Dev
Revision:2 (See All)
Posted:4 Sep 2008
Views:13,413
Bookmarked:30 times
printPrint   add Share
      Discuss Discuss   Broken Article?Report  
13 votes for this article.
Popularity: 5.01 Rating: 4.50 out of 5

1
2 votes, 15.4%
2

3

4
11 votes, 84.6%
5

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.


"462" alt="Slideshow effects" src="Slideshow/slideshow-effect.gif" width="511" />


"Caption">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


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

sunaSaRa Imdadhusen
+91 99095 44184
+91 02767 284464

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

Other popular ASP.NET articles:

Article Top
You must Sign In to use this message board.
FAQ FAQ 
 
Noise Tolerance  Layout  Per page   
 Msgs 1 to 10 of 10 (Total in Forum: 10) (Refresh)FirstPrevNext
GeneralIt does not work in Fire fox Pinmemberbinodthapa18:57 12 May '09  
AnswerRe: It does not work in Fire fox PinmemberSunasara Imdadhusen2:47 5 Oct '09  
Generalcan you provide flash show ? PinmemberJLKEngine00819:43 23 Sep '08  
GeneralGreat, but..... Pinmemberm3jim14:50 8 Sep '08  
GeneralRe: Great, but..... PinmemberSunasara Imdadhusen20:20 10 Sep '08  
GeneralRe: Great, but..... PinmemberSunasara Imdadhusen20:08 26 Oct '08  
GeneralVery Nice !!!! PinmemberAbhijit Jana4:35 5 Sep '08  
GeneralRe: Very Nice !!!! PinmemberSunasara Imdadhusen20:34 10 Sep '08  
GeneralVery Nice [modified] PinmemberJLKEngine0080:52 5 Sep '08  
GeneralRe: Very Nice PinmemberSunasara Imdadhusen20:30 10 Sep '08  

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

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

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