Estro Slider Test

Test to set width and height to all slider images

by Marventus

HTML

<div id="container">
    <div id="bgd">
        <canvas>
        </canvas>
    </div>
    <div id="slides">
        <div id="s0">
            <a href="http://elblawg.com/wp-content/uploads/2012/08/screenshots_32785.jpg">
                <img src="http://elblawg.com/wp-content/uploads/2012/08/screenshots_32785.jpg" alt="s0" />
            </a>
            <p class="trigger">Color Vortex
            </p>
        </div>
            <div id="s1">
            <a href="http://elblawg.com/wp-content/uploads/2012/08/screenshots_abstract-2100.jpg">
                <img src="http://elblawg.com/wp-content/uploads/2012/08/screenshots_abstract-2100.jpg" alt="s1" />
            </a>
                <p class="trigger">Fire &amp; Ice
                </p>
        </div>
        <div id="s2">
            <a href="http://elblawg.com/wp-content/uploads/2012/08/screenshots_32759.jpg">
                <img src="http://elblawg.com/wp-content/uploads/2012/08/screenshots_32759.jpg" alt="s2" />
            </a>
            <p class="trigger">Light Speckles
            </p>
        </div>
        <div id="s3">
            <a href="http://elblawg.com/wp-content/uploads/2012/08/screenshots_32776.jpg">
                <img src="http://elblawg.com/wp-content/uploads/2012/08/screenshots_32776.jpg" alt="s3" />
            </a>
            <p class="trigger">Abstractly Pink
            </p>
        </div>
        <div id="s4">
            <a href="http://elblawg.com/wp-content/uploads/2012/08/screenshots_32772.jpg">
                <img src="http://elblawg.com/wp-content/uploads/2012/08/screenshots_32772.jpg" alt="s4" />
            </a>
            <p class="trigger">Vertical Rainbow
            </p>
        </div>
        <div id="s5">
            <a href="http://elblawg.com/wp-content/uploads/2012/08/screenshots_abstract-2097.jpg">
                <img src="http://elblawg.com/wp-content/uploads/2012/08/screenshots_abstract-2097.jpg" alt="s5" />
            </a>
            <p...

CSS

a{
    cursor:default;
}
canvas{
    height:300px;
    position:absolute;
    width:100%;
}
img{
    min-width:100%;
}
#bgd canvas{
    background:#000;
}
#container{
    overflow:hidden;
    height:300px;
    position:relative;
}
#s6 img{
    margin-top:-105px;
}
#slides{
    overflow:visible;
}
#start canvas{
    background:#777;
}
#slides div{
    position:absolute;
    width:100%;
}
p{
    background:rgba(50,50,50,0.5);
    box-shadow:3px 3px 3px rgba(0,0,0,0.5);
    font:bold 16px Helvetica, Arial, sans-serif;
    padding:17px 15px 13px;
    text-shadow:2px 2px 0 rgba(0,0,0,0.7);
    text-transform:uppercase;
}

.trigger{
    border-radius:5px;
    border:1px solid rgba(255,255,255,0.7);
    color:rgba(255,255,255,0.8);
    cursor:pointer;
    position:absolute;
}
.trigger:hover{
    color:#fff;
}
.warning{
    border-color:rgba(255,255,255,0.5);
    border-radius:0 0 10px 10px;
    border-style:solid;
    border-width:0 1px 1px;
    color:rgba(255,255,255,0.7);
    font-size:14px;
    position:absolute;
}

JavaScript

/* OVERRIDE LINKS */
$("a").click(function(event) {
    event.preventDefault();
});

/* SLIDER */
// Variable Declaration
var c = '#container';
var cH = $(c).outerHeight(true);
var cW = $(c).outerWidth(true);
var s = '#slides';
var sd = '#slides div';
var sdF = '#slides div:first';
var sdL = '#slides div:last';
var st = '#start';
var t = 'p.trigger';
var d = 500;
var sdC = ($(sd).size()) - 1;
var wn = 'p.warning';
// Set Label Position
$(t).each(function() {
    $(this).offset({
        left: (cW - $(this).outerWidth(true)) / 2,
        top: (cH - $(this).outerHeight(true)) - 10
    });
});
$(wn).offset({
    left: (cW - $(wn).outerWidth(true)) / 2
});
// Hide Slides
$(sd).css({
    display: 'none',
    opacity: '0'
});
// Slide on Click
$(t).click(function() {
    if ($(this).is(':animated')) {
        return false;
    } else {
        var elm1 = $(this).closest(st).length ? st : sdL;
        var elm2 = $(this).closest(st).length ? sdL : sd + ':nth-child(' + sdC + ')';
        $(elm1).animate({
            opacity: '0'
        }, d, 'linear', function() {
            setTimeout(function() {
                $(elm2).css({
                    display: 'block'
                });
                $(elm2).animate({
                    opacity: '1'
                }, d, 'linear', function() {
                    if (elm1 === st) {
                        $(elm1).remove();
                    } else {
                        $(elm1).prependTo(s);
                        $(sdF).css({
                            opacity: '0',
                            display: 'none'
                        });
                    }
                });
            }, d);
        });
        if ($(this).siblings(wn).length) {
            $(wn).animate({
                opacity: '0'
            }, d, 'linear', function() {
                $(this).remove();
            });
        }
    }
});

// SET IMAGE DIMENSIONS 
// Set height and width to all images (<img>...