Icon Header

Wednesday, July 08, 2009

Create a Timed Slideshow with JQuery SlideViewerPro

JQuery can be used to create timed, image slideshows such as on this webpage with the SlideViewerPro and Timer plugins.  

Step 1: The HTML Content

In Step 1, we add the HTML markup for the slides' contents within the <body> of the webpage. There is no limit on the number of slides. In this example, there are 3 images as the 3 slides.

<!-- Timed Slideshow HTML –>

<div id="banner" class="svwp">
  <ul>
   <li><img src="banner1.jpg" alt="" title=""/></li>
   <li><img src="banner2.jpg" alt="" title=""/></li>
   <li><img src="banner3.jpg" alt="" title=""/></li>
  </ul>
</div>

<!-- Slideshow HTML ->

 

Step 2: The CSS Content

The next step, is to add the CSS content within the <head> element of the webpage that consists of the slideshow style rules. These rules can be modified according to the need; for example, the height and width rules of the slide images should be changed in the CSS rule for #banner to reflect the size of the images (also make sure all images are of the same size which gives the slideshow a consistent look and feel).

<style type="text/css">
<!--

.svwp {
    width: 50px;
    height: 20px;
}         /*preloader stuff. do not modify!*/

.svwp ul {
    position: relative;
    left: -999em;
}         /*preloader stuff. do not modify!*/

.slideViewer {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: #fff;
}

.slideViewer ul {  /*your list of images*/
    position: relative;
    left: 0;
    top: 0;
    width: 1%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.slideViewer ul li {
    float:left;
}

/* Banner Animation Styles */
#banner {
    height:303px;
    width:988px;
}
.panelwrappers {
    overflow:hidden;
}

-->
</style>

 

Step 3: The JavaScript content

In this step, we insert the JavaScript code to manipulate the DOM for the slideshow effect. Our code is dependent on the JQuery JavaScript library as well as the SlideViewerPro and Timer JavaScript libraries of JQuery, therefore these libraries will be linked as well.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.slideViewerPro.1.0.js"></script>
<script type="text/javascript" src="jquery.timers.js"></script>

<script type="text/javascript">
        $(function() {
        $("div#banner").slideViewerPro({
            galBorderWidth: 0,
            autoslide: true,
            thumbsVis: false,
            shuffle: true
            });
        $("#tree").treeview({
            collapsed: false,
            animated: "medium",
            control:"#sidetreecontrol",
            prerendered: true,
            persist: "location"
            });
        });
</script>

 

Step 4: Customizing SlideViewerPro

The SlideViewerPro plugin is completely customizable with the following options and their default values when not explicitly assigned a value in the JavaScript code:

// slideViewerPro options (defaults)
galBorderWidth: 6,  // the border width around the main images


thumbsTopMargin: 3, // the distance that separates the thumbnails and the buttons from the main images


thumbsRightMargin: 3, // the distance of each thumnail respect to the next one


thumbsBorderWidth: 3, // the border width of each thumbnail. Note that the border in reality is above, not around


buttonsWidth: 20, // the width of the prev/next buttons that commands the thumbnails


galBorderColor: "#ff0000", // the border color around the main images


thumbsBorderColor: "#d8d8d8", // the border color of the thumbnails but not the current one


thumbsActiveBorderColor: "#ff0000", // the border color of the current thumbnail


buttonsTextColor: "#ff0000", //the color of the optional text in leftButtonInner/rightButtonInner


thumbsBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0


thumbsActiveBorderOpacity: 1.0, // could be 0, 0.1 up to 1.0


easeTime: 750, // the time it takes a slide to move to its position


asTimer: 4000, // if autoslide is true, this is the interval between each slide


thumbs: 5, // the number of visible thumbnails


thumbsPercentReduction: 12, // the percentual reduction of the thumbnails in relation to the original


thumbsVis: true, // with this option set to false, the whole UI (thumbs and buttons) are not visible


leftButtonInner: "-", //could be an image "<img src='images/larw.gif' />" or an escaped char as "&larr";


rightButtonInner: "+", //could be an image or an escaped char as "&rarr";


autoslide: false, // by default the slider do not slides automatically. When set to true REQUIRES the jquery.timers plugin


typo: false, // the typographic info of each slide. When set to true, the ALT tag content is displayed


typoFullOpacity: 0.9, // the opacity for typographic info. 1 means fully visible.


shuffle: false // the LI items can be shuffled (randomly mixed) when shuffle is true

 

The timed slideshow is now ready.

posted by Dan at 11:16 AM

1 Comments:

Anonymous Anonymous said...

How to show NUMBER list instead of image thumbs (like Slideviewer 1.2)?

April 30, 2010 at 3:28 PM  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home