HTML5, CSS3 & JS Experiments

(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"
    }]
}