HTML5, CSS3 & JS Experiments

By Martin Ivanov

Image Slider

Demo

Slider Populated from Local DTO

Slider Populated from AJAX DTO

Register the Class

<script src="AcidJs.Slider/lib/jquery-1.10.2.min.js"></script>
<script src="AcidJs.Slider/classes/Slider.js"></script>

Usage and Code Insight

(function() {
            
    "use strict";

    // Create a slider, popuplated from local data object
    window.slider1 = new window.AcidJs.Slider({
        boundingBox: $("#slider-01"), // {jQueryDomObject} [required] rendering node of the widget
        width: 480, // {Number} [optional] default: "100%"; width of the widget
        height: 400, // {Number} [optional] default: 480; height of the widget
        target: "_blank", // {String} [optional] default: "_blank"; slider links target
        defaultSelectedItem: 2, // {Number} default: 0; default selected item by index
        // {Array} [optional] default: []; additional CSS classes array, which will be applied to the bounding box
        cssClasses: [ 
            "additional-css-class-01",
            "additional-css-class-02",
            "additional-css-class-03"
        ],
        // {Array} Slider items
        items: [{
            title: "B.C. Rich Stealth",
            tagline: "Image 01",
            url: "http://wemakesites.net/#!/gallery?data={%22src%22%3A%22images%2Fmusic%2Fguitar-thumbs%2Fbc-rich-stealth.jpg%22%2C%22width%22%3A232%2C%22height%22%3A321%2C%22target%22%3A%22_self%22%2C%22title%22%3A%22B.C.%20Rich%20Stealth%22%2C%22caption%22%3A%22B.C.%20Rich%20Stealth%22%2C%22description%22%3A%227-string%20Marc%20Rizzo%20TNT%22%2C%22cssClasses%22%3A%22%22%2C%22folder%22%3A%22bc-rich-stealth%22}",
            imageUrl: "http://wemakesites.net/images/music/bc-rich-stealth/image-01.jpg"
        },{
            title: "B.C. Rich Stealth",
            tagline: "Image 02",
            url: "http://wemakesites.net/#!/gallery?data={%22src%22%3A%22images%2Fmusic%2Fguitar-thumbs%2Fbc-rich-stealth.jpg%22%2C%22width%22%3A232%2C%22height%22%3A321%2C%22target%22%3A%22_self%22%2C%22title%22%3A%22B.C.%20Rich%20Stealth%22%2C%22caption%22%3A%22B.C.%20Rich%20Stealth%22%2C%22description%22%3A%227-string%20Marc%20Rizzo%20TNT%22%2C%22cssClasses%22%3A%22%22%2C%22folder%22%3A%22bc-rich-stealth%22}",
            imageUrl: "http://wemakesites.net/images/music/bc-rich-stealth/image-02.jpg"
        },{
            title: "B.C. Rich Stealth",
            tagline: "Image 03",
            url: "http://wemakesites.net/#!/gallery?data={%22src%22%3A%22images%2Fmusic%2Fguitar-thumbs%2Fbc-rich-stealth.jpg%22%2C%22width%22%3A232%2C%22height%22%3A321%2C%22target%22%3A%22_self%22%2C%22title%22%3A%22B.C.%20Rich%20Stealth%22%2C%22caption%22%3A%22B.C.%20Rich%20Stealth%22%2C%22description%22%3A%227-string%20Marc%20Rizzo%20TNT%22%2C%22cssClasses%22%3A%22%22%2C%22folder%22%3A%22bc-rich-stealth%22}",
            imageUrl: "http://wemakesites.net/images/music/bc-rich-stealth/image-03.jpg"
        },{
            title: "B.C. Rich Stealth",
            tagline: "Image 04",
            url: "http://wemakesites.net/#!/gallery?data={%22src%22%3A%22images%2Fmusic%2Fguitar-thumbs%2Fbc-rich-stealth.jpg%22%2C%22width%22%3A232%2C%22height%22%3A321%2C%22target%22%3A%22_self%22%2C%22title%22%3A%22B.C.%20Rich%20Stealth%22%2C%22caption%22%3A%22B.C.%20Rich%20Stealth%22%2C%22description%22%3A%227-string%20Marc%20Rizzo%20TNT%22%2C%22cssClasses%22%3A%22%22%2C%22folder%22%3A%22bc-rich-stealth%22}",
            imageUrl: "http://wemakesites.net/images/music/bc-rich-stealth/image-04.jpg"
        },{
            title: "B.C. Rich Stealth",
            tagline: "Image 05",
            url: "http://wemakesites.net/#!/gallery?data={%22src%22%3A%22images%2Fmusic%2Fguitar-thumbs%2Fbc-rich-stealth.jpg%22%2C%22width%22%3A232%2C%22height%22%3A321%2C%22target%22%3A%22_self%22%2C%22title%22%3A%22B.C.%20Rich%20Stealth%22%2C%22caption%22%3A%22B.C.%20Rich%20Stealth%22%2C%22description%22%3A%227-string%20Marc%20Rizzo%20TNT%22%2C%22cssClasses%22%3A%22%22%2C%22folder%22%3A%22bc-rich-stealth%22}",
            imageUrl: "http://wemakesites.net/images/music/bc-rich-stealth/image-05.jpg"
        }]
    });

    // Create a slider, popuplated from async data object
    window.slider2 = new window.AcidJs.Slider({
        boundingBox: $("#slider-02"),
        target: "_blank",
        width: 480,
        height: 400,
        items: "pages/acidjs-css3-slider/example/data/slider-02.json" // URL of the items data file
    });
})();
/*
 * Slider
 * @namespace window.AcidJs
 * @class Slider
 * @version 1.0
 * @author Martin Ivanov
 * @url developer website: http://wemakesites.net/
 * @url developer twitter: https://twitter.com/#!/wemakesitesnet
 * @url developer blog http://acidmartin.wordpress.com/
 **/

(function() {
    
    "use strict";
    
    /*
     * @namespace window.AcidJs
     **/
    if(undefined === window.AcidJs) {
        window.AcidJs = {};
    }
    
    /*
     * @namespace window.AcidJs
     * @class Slider
     * @constructor
     * @param config {Object} [required]
     * {
     *  boundingBox {jQueryDomObject} [required] rendering node of the widget
     *  width: {Number} [optional] default: "100%"; width of the widget
     *  height: {Number} [optional] default: 480; height of the widget
     *  target: {String} [optional] default: "_blank"; slider links target
     *  defaultSelectedItem: {Number} default: 0; default selected item by index
     *  cssClasses: {Array} [optional] default: []; additional CSS classes array, which will be applied to the bounding box
     *  items: [{
     *      url: {String} slide link URL
     *      title: {String} slide title
     *      tagline: {String} slide tagline
     *      imageUrl: {String} URL for the slide image
     *  }]
     * }
     * @return {Object}
     **/
    function Slider(config) {
        
        config = config || {};
        
        for(var property in config) {
            if(config.hasOwnProperty(property)) {
                this[property] = config[property];
            }
        }
        
        if("object" === typeof(this.items)) {
            return this.render();
        }
        this.getAsyncData();
    }
    
    /*
     * @constants 
     **/
    var
        $ = window.$;
    
    /*
     * @class Slider
     * @prototype Slider 
     **/
    Slider.prototype = {
        
        /*
         * Developer and application information
         * @object MANIFEST
         * @public
         **/
        MANIFEST: {
            version: "1.0",
            name: "Image Slider",
            description: "CSS3 and JavaScript Image Slider",
            developer: "Martin Ivanov",
            websites: {
                personal: "http://wemakesites.net",
                portfolio: "http://acidjs.wemakesites.net",
                blog: "http://acidmartin.wordpress.com/",
                rss: "http://feeds.feedburner.com/acidmartin",
                twitter: "https://twitter.com/#!/wemakesitesnet"
            },
            email: "acid_martin@yahoo.com"
        },
        
        /*
         * Default widget height
         * @number height 
         **/
        height: 480,
        
        /*
         * Slider items
         * @array items 
         **/
        items: [],
        
        /*
         * Rendering node of the widget
         * @object boundingBox 
         **/
        boundingBox: null,
        
        /*
         * Slider links target
         * @string target 
         **/
        target: "_self",
        
        /*
         * Additional CSS classes array, which will be applied to the bounding box
         * @array target 
         **/
        cssClasses: [],
        
        /*
         * Default selected item by index
         * @object defaultSelectedItem
         * @public
         **/
        defaultSelectedItem: 0,
        
        /*
         * CSS classes used by the class
         * @object CSS_CLASSES
         * @public
         **/
        CSS_CLASSES: {
            base: "acidjs-css3-slider"
        },
        
        /*
         * HTML templates used by the class
         * @object HTML_TEMPLATES
         * @public
         **/
        TEMPLATES: {
            base: [
                '
', '
    {{items}}
', '
' ], item: [ '
  • ', '', '', '', '', '{{title}}', '{{tagline}}', '', '', '
  • ' ] }, /* * Render the widget * @method render * @public * @return void **/ render: function() { var formName, that = this, items = this.items, boundingBox = this.boundingBox, id = boundingBox.attr("id"), classes = this.CSS_CLASSES, base = classes.base, cssClasses = [classes.base], itemsHtml = []; if(!boundingBox || !boundingBox.length || !id || boundingBox.hasClass(base)) { return; } formName = classes.base + "-" + boundingBox.attr("id"); $.each(items, function(i) { var item = items[i]; item.url = item.url || "#"; item.itemName = formName + "-" + i; item.target = that.target; if(!item.title) { item.title = ""; } if(!item.tagline) { item.tagline = ""; } itemsHtml.push(that.compile("item", item)); }); itemsHtml = itemsHtml.join(""); cssClasses = cssClasses.concat(this.cssClasses); cssClasses = cssClasses.join(" "); boundingBox.addClass(cssClasses).html(that.compile("base", { width: this.width ? this.width + "px" : "100%", height: this.height, formName: formName, items: itemsHtml })); boundingBox.find('input:eq(' + this.defaultSelectedItem + ')').prop("checked", true); }, /* * Dispose the widget * @method render * @public * @return void **/ destroy: function() { this.boundingBox.removeClass(this.CSS_CLASSES.base).empty(); }, /* * Compile a template and return the HTML * @method compile * @public * @param name {String} [required] name of the template that will be used * @param data {Object} [required] key/value pairs of template placeholders and values that should be replaced against these placeholders * @return String **/ compile: function(name, data) { var html = this.TEMPLATES[name] || []; data = data || {}; html = html.join(""); for(var key in data) { if(data.hasOwnProperty(key)) { var value = data[key], regexp = new RegExp("{{" + key + "}}", "g"); html = html.replace(regexp, value); } } return html; }, /* * Get async DTO for the slider * @method getAsyncData * @public * @return void **/ getAsyncData: function() { var that = this; $.ajax({ url: this.items, dataType: "json", success: function(data) { var items = data.items; if(items) { that.items = items; that.render(); } } }); } }; /* * add to the window.AcidJs namespace **/ window.AcidJs.Slider = Slider; })();
    <h2>Slider Populated from Local DTO</h2>
    <div id="slider-01"></div>
    
    <h2>Slider Populated from AJAX DTO</h2>
    <div id="slider-02"></div>
            
    /*
     * Slider
     * @namespace window.AcidJs
     * @class Slider
     * @version 1.0
     * @author Martin Ivanov
     * @url developer website: http://wemakesites.net/
     * @url developer twitter: https://twitter.com/#!/wemakesitesnet
     * @url developer blog http://acidmartin.wordpress.com/
     **/
    
    .acidjs-css3-slider form,
    .acidjs-css3-slider input,
    .acidjs-css3-slider label
    {
        position: relative;
    }
    
    .acidjs-css3-slider span,
    .acidjs-css3-slider input,
    .acidjs-css3-slider input ~ a
    {
        opacity: 0;
    }
    
    .acidjs-css3-slider span,
    .acidjs-css3-slider input,
    .acidjs-css3-slider input ~ a
    {
        position: absolute;
    }
    
    .acidjs-css3-slider span,
    .acidjs-css3-slider input ~ a,
    .acidjs-css3-slider label
    {
        transition: opacity 500ms cubic-bezier(.41, .01, .57, 1.01);
    }
    
    .acidjs-css3-slider label:hover,
    .acidjs-css3-slider input:checked + label
    {
        opacity: .9;
    }
    
    .acidjs-css3-slider input:checked ~ a,
    .acidjs-css3-slider input:checked ~ a span
    {
        opacity: 1;
    }
    
    .acidjs-css3-slider a *,
    .acidjs-css3-slider label
    {
        display: block;
    }
    
    .acidjs-css3-slider b,
    .acidjs-css3-slider strong
    {
        padding: 4px 8px;
        background: rgba(0, 0, 0, .25);
        font: normal 26px/32px Helvetica, Arial, Sans-serif;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }
    
    .acidjs-css3-slider span,
    .acidjs-css3-slider input ~ a
    {
        width: 100%;
    }
    
    .acidjs-css3-slider,
    .acidjs-css3-slider:empty
    {
        display: none;
    }
    
    .acidjs-css3-slider li,
    :root .acidjs-css3-slider
    {
        display: inline-block;
    }
    
    .acidjs-css3-slider *
    {
        margin: 0;
        padding: 0;
        border: 0;
        font-weight: normal;
        outline: none;
    }
    
    :root .acidjs-css3-slider
    {
        text-align: center;
    }
    
    .acidjs-css3-slider form
    {
        border: solid 1px #666;
    }
    
    .acidjs-css3-slider input
    {
        z-index: 1;
    }
    
    .acidjs-css3-slider input ~ a
    {
        top: 0;
        left: 0;
        height: 100%;
        text-align: left;
        text-decoration: none;
        color: #fff;
        text-shadow: 1px 1px 1px rgba(54, 54, 54, .6);
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        pointer-events: none;
    }
    
    .acidjs-css3-slider input:checked ~ a
    {
        pointer-events: all;
    }
    
    .acidjs-css3-slider label
    {
        z-index: 5;
        width: 16px;
        height: 16px;
        margin: 8px 4px;
        background: #fff;
        border-radius: 100%;
        cursor: pointer;
        opacity: .5;
    }
    
    .acidjs-css3-slider strong
    {
        font-size: 18px;
    }
    
    .acidjs-css3-slider span
    {
        opacity: 0;
        bottom: 0;
        transition-delay: 500ms;
    }
    {
        "items": [{
            "title": "Aurellia 'That Girl' Universe",
            "tagline": "Image 01",
            "url": "http://wemakesites.net/#!/gallery?data={%22src%22%3A%22images%2Fmusic%2Fguitar-thumbs%2Faurellia-that-girl-universe.jpg%22%2C%22width%22%3A232%2C%22height%22%3A321%2C%22target%22%3A%22_self%22%2C%22title%22%3A%22Aurellia%22%2C%22caption%22%3A%22Aurellia%22%2C%22description%22%3A%22Custom%20Custom%20Aurellia%20%27That%20Girl%27%20guitar%22%2C%22cssClasses%22%3A%22%22%2C%22folder%22%3A%22aurellia-that-girl-universe%22}",
            "imageUrl": "http://wemakesites.net/images/music/aurellia-that-girl-universe/image-01.jpg"
        },{
            "title": "Aurellia 'That Girl' Universe",
            "tagline": "Image 02",
            "url": "http://wemakesites.net/#!/gallery?data={%22src%22%3A%22images%2Fmusic%2Fguitar-thumbs%2Faurellia-that-girl-universe.jpg%22%2C%22width%22%3A232%2C%22height%22%3A321%2C%22target%22%3A%22_self%22%2C%22title%22%3A%22Aurellia%22%2C%22caption%22%3A%22Aurellia%22%2C%22description%22%3A%22Custom%20Custom%20Aurellia%20%27That%20Girl%27%20guitar%22%2C%22cssClasses%22%3A%22%22%2C%22folder%22%3A%22aurellia-that-girl-universe%22}",
            "imageUrl": "http://wemakesites.net/images/music/aurellia-that-girl-universe/image-02.jpg"
        },{
            "title": "Aurellia 'That Girl' Universe",
            "tagline": "Image 03",
            "url": "http://wemakesites.net/#!/gallery?data={%22src%22%3A%22images%2Fmusic%2Fguitar-thumbs%2Faurellia-that-girl-universe.jpg%22%2C%22width%22%3A232%2C%22height%22%3A321%2C%22target%22%3A%22_self%22%2C%22title%22%3A%22Aurellia%22%2C%22caption%22%3A%22Aurellia%22%2C%22description%22%3A%22Custom%20Custom%20Aurellia%20%27That%20Girl%27%20guitar%22%2C%22cssClasses%22%3A%22%22%2C%22folder%22%3A%22aurellia-that-girl-universe%22}",
            "imageUrl": "http://wemakesites.net/images/music/aurellia-that-girl-universe/image-03.jpg"
        },{
            "title": "Aurellia 'That Girl' Universe",
            "tagline": "Image 04",
            "url": "http://wemakesites.net/#!/gallery?data={%22src%22%3A%22images%2Fmusic%2Fguitar-thumbs%2Faurellia-that-girl-universe.jpg%22%2C%22width%22%3A232%2C%22height%22%3A321%2C%22target%22%3A%22_self%22%2C%22title%22%3A%22Aurellia%22%2C%22caption%22%3A%22Aurellia%22%2C%22description%22%3A%22Custom%20Custom%20Aurellia%20%27That%20Girl%27%20guitar%22%2C%22cssClasses%22%3A%22%22%2C%22folder%22%3A%22aurellia-that-girl-universe%22}",
            "imageUrl": "http://wemakesites.net/images/music/aurellia-that-girl-universe/image-04.jpg"
        }]
    }