Slideshow XML-Javascript

• 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

     		

Other screenshot for Slideshow Effect

History

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

Thanks.

You must Sign In to use this message board.

FAQ    Noise Tolerance Very HighHighMediumLowVery Low   Layout Expand Posts & RepliesThread ViewNo JavascriptNo JS + Preview   Per page 102550

Msgs 1 to 9 of 9 (Total in Forum: 9) (Refresh) FirstPrevNext

It does not work in Fire fox binodthapa 18:57 12 May '09   It works fine in IE but not work in Fire Fox.Please tell me what is the problem in this source code. Sign In·View Thread·PermaLink can you provide flash show ? JLKEngine008 19:43 23 Sep '08   can you provide flash show ? I suggest reference the example such as http://www.codeproject.com/KB/webforms/FlashAdRotator.aspx this provide how to show flash in AdRotator! I hope you can make it better!! http://www.linjon.cn 成都领君科技有限公司 中国成都 Sign In·View Thread·PermaLink Great, but..... m3jim 14:50 8 Sep '08   Great work, but it doesn't work with Firefox, either version 2 or 3. If it did work, I'd even pay $$'s to get a copy (if it wasn't free). It's that nice of a slideshow. Sign In·View Thread·PermaLink 2.00/5 (1 vote) Re: Great, but..... Sunasara Imdadhusen 20:20 10 Sep '08   Thanks!!! I will try to do javascript code for both Internet Explorer and Mozilla browsers. i had also done in Mozilla but there was a limited effects available. Sunasara Imdadhusen A. +91 99095 44184 +91 02767 284464 Sign In·View Thread·PermaLink Re: Great, but..... Sunasara Imdadhusen 20:08 26 Oct '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 Sign In·View Thread·PermaLink Very Nice !!!! Abhijit Jana 4:35 5 Sep '08   good job !!! keep it up 5 from me cheers, Abhijit Read My Latest Article : IIS 7.0 and Deploying Asp.Net WebSites on IIS 7.0 Sign In·View Thread·PermaLink Re: Very Nice !!!! Sunasara Imdadhusen 20:34 10 Sep '08   Thanks!!! Sunasara Imdadhusen A. +91 99095 44184 +91 02767 284464 Sign In·View Thread·PermaLink Very Nice [modified] JLKEngine008 0:52 5 Sep '08   can you provide flash show ? I suggest reference the example such as http://www.codeproject.com/KB/webforms/FlashAdRotator.aspx this provide how to show flash in AdRotator! I hope you can make it better!! modified on Wednesday, September 24, 2008 12:40 AM Sign In·View Thread·PermaLink Re: Very Nice Sunasara Imdadhusen 20:30 10 Sep '08   Thanks!!! I am happy with your reply but i haven't much kenowledge about ActionScript for Flash. Sunasara Imdadhusen A. +91 99095 44184 +91 02767 284464 Sign In·View Thread·PermaLink

Last Visit: 20:08 9 Jul '09     Last Update: 20:08 9 Jul '09 1