simpleSlider Plugin: Build Array from DOM, Build Slideshow from Array

Build Array from DOM, Modify DOM Build Slideshow from Array

by Ian Roberts

HTML

<div class="slideshow">
    <img src="http://placehold.it/401x401" />
    <img src="http://placehold.it/402x402" />
    <div class="video">
    <iframe width="100%" height="100%" src="//www.youtube.com/embed/cbP2N1BQdYc?rel=0" frameborder="0"></iframe>
    </div>
    <img src="http://placehold.it/404x404" />
    <img src="http://placehold.it/405x405" />
    <div class="video">
    <iframe width="100%" height="100%" src="//www.youtube.com/embed/cbP2N1BQdYc?rel=0" frameborder="0"></iframe>    
    </div>
</div>

CSS

.media .video,
.media img { background-color:#fad400; padding:10px; margin:0px; height:100%;}
.slideshow { width:100%; height:400px; }
.media { height:100%; }
/*button settings*/
.slidebtn.prev,
.slidebtn.next {
	display: block;
	position: absolute;
	z-index: 999999;
	opacity: 0;
	top:0px;
}
.slidebtn.prev {
    left: -146px;
}
.slidebtn.next {
    right: -146px;
}

JavaScript

(function ($) {
/*make it global*/
//array w/ multiple media types - .video contains youtube iframes
media = $( ".slideshow img, .slideshow .video" );
//remove items from dom
$( ".slideshow" ).children().remove();
var width = $('.slideshow').width()
//let's define a custom ease value
//use to make more - http://www.timotheegroleau.com/Flash/experiments/easing_function_generator.htm
//be sure to add the x to pass along
$.easing.easearoni = function(x, t, b, c, d) {
    var ts=(t/=d)*t;
    var tc=ts*t;
    return b+c*(-4*tc*ts + 15*ts*ts + -20*tc + 10*ts);
}
$.easing.sweep = function(x, t, b, c, d) {
    var ts=(t/=d)*t;
    var tc=ts*t;
    return b+c*(-4.25*tc*ts + 16*ts*ts + -21.5*tc + 11*ts + -0.25*t);
}

// end make globes
//MAKES
//make .media div
$(".slideshow").append("<div class='media'></div>");
//use first and .html() into .media
$(".media").html(media[0]);
//make .slidebtn.prev
    $( ".slideshow" ).prepend( "<a href='#' class='slidebtn prev' onclick='return false;'><img alt='previous arrow' src='http://placehold.it/50x50' /></a>" );
    //make .slidebtn.next
    $( ".slidebtn.prev" ).after("<a href='#' class='slidebtn next' onclick='return false;'><img alt='next arrow' src='http://placehold.it/50x50' /></a>")
    
	$.fn.simpleSlider = function(options)  {
        //declare fadeBeginNow here, so it's available in the scope of this plugin, but not globally
        var fadeBeginNow;
		//give the user options
		var defaults = {
			pause : 5000,
			speed : 400,
			descriptionSpeed: 400,
			transition : 'fade',
			easeout : 'easearoni',
			easein : 'easearoni',
			easebtnin : 'sweep',
			easebtnout : 'sweep',
			btnspeed : 200
        //merge options with defaults
        }, options = $.extend(defaults, options);
		//if statement
		if(options.transition === 'fade') fadesetint();
        /////////////////////////////////////////////////////////////////
		function fadesetint() {
			//this will start the animation
			fadeBeginNow = setInterval(fade,...