WonderBanner

Banner script that animates using a template and CSS with a single script capable of multiple animations.

by CheapSk8

HTML

<script type="text/javascript">
        $(document).ready(function() {
            // this triggers the banner using the template below

            $('#banner').wonderBanner({
                source: $('#bannerSrc .slideDiv'), 
                autoScroll: true, // auto animation
                autoPaging: false, // use custom paging
                pageSource: '.pageThumb',     // div class in slide 
                prevNext: false, // do not add prev/next buttons
                animateInSpeed: 1500, // animation speed
                async: 100,
                preLoad: true
            }).init();

        });

    </script>
<div id="banner" class="banner">

        <div class="bannerSlides">

            <div class="bannerBG" rel="banner-img"></div>
            <div class="bannerTitle" rel="banner-title"></div>

            <div class="bannerLink" rel="banner-link"></div>            

        </div>

        <div id="bannerPaging" class="paging"></div>

    </div>

    <div id="bannerSrc">    

        <div class="slideDiv">

            <div class="banner-img"><img src="https://wallpapercave.com/wp/btQqYay.jpg" alt="Dedicating Weber Hall" border="0"/></div>
            <div class="banner-title"><p>Uniting the Canadian Accounting Profession</p></div>

            <div class="banner-link"> 

                <a href="#" target="_blank">
                Click here to read more
                </a>

            </div>
            <div class="pageThumb"><img src="images/slide1Thumb.jpg" /></div>
        </div>
        <div class="slideDiv">

            <div class="banner-img"><img src="images/slide2.jpg" alt="Dedicating Weber Hall" border="0"/></div>
            <div class="banner-title"><p>Scoring Above Average</p></div>

            <div class="banner-link"> 

                <a href="#" target="_blank">
                Find out more about us
                </a>

            </div>
            <div class="pageThumb"><img src="images/slide2Thumb.jpg" /></div>
...

CSS

#extSrc {

        display: none;

    }

    .banner { 

        background: url("images/bannerBase.jpg") no-repeat scroll 0 bottom transparent;
        font-family: Arial,Helvetica,sans-serif;
        height: 214px;
        max-width: 719px;
        position: relative;
        width: 719px;
        z-index: 5;
        overflow: hidden;

    }
    .banner p {
        margin: 0;
    }

    .bannerSlides {

        border-style: solid;
        border-width: 1px 1px 0;
        height: 195px;
        position: absolute;
        top: 0;
        width: 717px;
        z-index: 6;

    }

    .bannerBG {

        opacity: 1;

        filter: alpha(opacity=100);    /* d for ie */

        position: absolute;

        top: 0;

        z-index: 7;
        object-fit: cover;
width: 100%;
height: 100%;
    }

    .bannerBG-stepIn {

        opacity: 0;

        filter: alpha(opacity=0);    /* for ie */

        position: absolute;

        top: 0;
margin-top: -100%;
        z-index: 7;

    }

    .bannerBG-stepOut {

        opacity: 0;

        filter: alpha(opacity=0);    /* for ie */

        position: absolute;

        top: 0;
        margin-bottom: -100%;

        z-index: 7;

    }

    .bannerImg {

        left: 400px;

        opacity: 1;

        filter: alpha(opacity=100);    /* for ie */

        position: absolute;

        top: 60px;

        z-index: 8;

    }

    .bannerImg-stepIn {

        left: 400px;

        opacity: 0;

        filter: alpha(opacity=0);    /* for ie */

        position: absolute;

        top: 60px;

        z-index: 8;

    }

    .bannerImg-stepOut {

        left: 400px;

        opacity: 0;

        filter: alpha(opacity=0);    /* for ie */

        position: absolute;

        top: 60px;

        z-index: 8;

    }

    .bannerLink {

        bottom: 120px;
        display: block;
        height: 25px;
        opacity: 1;

        filter: alpha(opacity=100);
        position: absolute;
        right: 75px;
        top: 100px;
 ...

JavaScript

/* wonderBanner plugin - v1.4.1
 * 
 * Copyright 2011, Daved Artemik
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 * 
 * Rev 1.4.1 
 * Fixed: Wrapped css function in try...catch to avoid cross domain security error
 * Updated: Modified Async animateOut for smoother, tighter animation
 *
 * Rev 1.4
 * Added: Ability to preload images before starting animation
 * Added: Async animateIn/Out allows for blended animations 
 * Fixed: Resolved issue with custom paging index
 * 
 * Rev 1.2
 * Added: Custom paging selector
 * Added: Ability to toggle prev and next buttons
 * Added: Ability to toggle scrolling/slideshow
 * Updated: Simplified animation functions
 * Fixed: Paging bug 
 * TODO: Add image caching - (preLoad)
 * TODO: Add blending effect - (async)
 *
 * Rev 1.0
 * Initial Build
 * TODO: Allow custom paging
 * TODO: Update and clean up animation funcs. 
 */

(function($) {
    var wonderBanner = function(e,options) {
        var s = $.extend({
            source: null,            // source selector or jQuery object for slide elements
            inCss : 'stepIn',        // css for animate in
            outCss: 'stepOut',        // css for animate out
            eleDelay: 0,        // time between animating each item
            slideDelay: 3500,        // time between slide transitions
            animateInSpeed: 700,        // animation speed of slide appearing - only animation speed for async 
            animateOutSpeed: 300,        // animation speed of slide hiding
            autoScroll: true,            // toggle automatic slideshow effect
            autoPaging: true,        // create paging buttons
            pageSource: null,        // specifies selector for page indicator per slide
            prevNext: true,        // true/false for previous and next arrows - or specify selectors {prevBtn:'', nextBtn: ''}
            preLoad: true,            // load all slide images before starting
            async:...