certainlyakey
6/23/2014 - 11:44 AM

OOP-oriented Javascript slideshow

OOP-oriented Javascript slideshow

.slideshow, .slideshow li, .slideshow figure {margin:0; padding:0;}
.slideshow li {display:none; position:relative;}
.slideshow li.current {display:block; border:2px black solid; }
.slideshow li figcaption {position:absolute; top:50%; left:0;}
function Slideshow (options) {
	self = this;
	//:Arguments
	self.element = options.element;
	self.items = options.items;
	self.speed = options.speed;
	
	//:Public variables (constants)
	self.total = self.items.length;
	
	//:Actions on load
	self.initialize();
	
	//:Event handlers
	self.element.on('click', function(e) {
		self.moveToNext();
	});

	//:Registering custom events
	$.event.trigger({type:"nextSlide"});

	//:Private methods
	this.getCurrent = function() {
		var curNum = this.items.filter('.current');
		return curNum;
	};
}

//:Public methods
Slideshow.prototype = {
	//refer to public variables from Slideshow as `self.variable`
	//refer to other public methods as `this.method()`
	//refer to private methods as `self.method()`
	constructor: Slideshow,
	setCurrent:function (desiredNumber) {
		var item = self.getCurrent();
		item.removeClass('current');
		self.items.filter(':eq(' + (desiredNumber - 1) + ')').addClass('current');
		// this.currentNumber = desiredNumber;
	},
	getCurrentNumber:function () {
		var current = self.getCurrent();
		//index() argument is a separate DOM element referred to by a variable 
		var Cur = self.items.index(current);
		return Cur + 1;
		
	},
	getCurrentDescription:function () {
		var current = self.getCurrent();
		var desc = current.find('figcaption').text();
		return desc;
	},
	startSlideshow:function ()  {
		this.moveToNext();
		slideShowInterval = setInterval(this.moveToNext, self.speed);
	},
	pauseSlideshow:function ()  {
		pauseInterval = clearInterval(slideShowInterval);
		console.log('paused');
	},
	moveToNext:function ()  {
		var item = self.getCurrent();
		var itemlast = self.items.last();
		if (item.is(itemlast)) {
			item.removeClass('current');
			self.items.first().addClass('current');
		} else {
			item.removeClass('current').next().addClass('current');
		}
		$(document).trigger("nextSlide");
		// $('.currentNumber span').html(this.getCurrentNumber);
	},
	initialize:function () {
		self.element.addClass('slideshow');
		self.items.first().addClass('current');

	}
};

    
    
jQuery(document).ready(function ($) {
//Making it reel
    
	slideshow350 = new Slideshow ({
		element:$('.slides350'),
		items:$('li'),
		speed:3000
	}); 

	$('.slides350').after('<br><button id="startSlideshow">Start</button>').after('<br><output class="currentNumber">Current: <span></span></output>').after('<br><output class="total" />').after('<input id="setCurrent" type="number" size="2"/>');
	$('.currentNumber span').html(slideshow350.getCurrentNumber);
	$('.total').html('Total: ' + slideshow350.total);
	$('.slides350').on('click',function() {
		$('.currentNumber span').html(slideshow350.getCurrentNumber);
	});
	$('#setCurrent').on('keydown',function(event){
		if (event.which == 13) {
			var desiredNum = $(this).val();
			slideshow350.setCurrent(desiredNum);
		}
	});
	var slideshowpaused = true;
	$('#startSlideshow').on('click',function() {
		if (slideshowpaused) {
			slideshow350.startSlideshow();
			$(this).text('Pause');
			slideshowpaused = false;
		} else {
			slideshow350.pauseSlideshow();
			$(this).text('Continue');
			slideshowpaused = true;
		}
	});
	$(document).on("nextSlide", function() {
		var number = slideshow350.getCurrentNumber();
		var desc = slideshow350.getCurrentDescription();
		$('.currentNumber span').html(number+"("+desc+")");
	});
});
<!-- http://jsbin.com/eqiliv/4/edit -->
		<ul class="slides350">
		<li>
			<figure>
				<img src="http://placehold.it/350x150/E8117F" alt="">
				<figcaption>Cupiditate, repudiandae!</figcaption>
			</figure>
		</li>
		<li>
			<figure>
				<img src="http://placehold.it/350x150/ff0000" alt="">
				<figcaption>Fugiat, a.</figcaption>
			</figure>
		</li>
		<li>
			<figure>
				<img src="http://placehold.it/350x150/AAAAAA" alt="">
				<figcaption>Distinctio, dignissimos.</figcaption>
			</figure>
		</li>
		<li>
			<figure>
				<img src="http://placehold.it/350x150/FAB41E" alt="">
				<figcaption>Hic, deleniti!</figcaption>
			</figure>
		</li>
		<li>
			<figure>
				<img src="http://placehold.it/350x150/153D4D" alt="">
				<figcaption>Commodi, perferendis!</figcaption>
			</figure>
		</li>
	</ul>