/* title: jshowoff: a jquery content rotator plugin author: erik kallevig version: 0.1.2 website: http://ekallevig.com/jshowoff license: dual licensed under the mit and gpl licenses. */ (function ($) { $.fn.jshowoff = function (settings) { var config = { animatepause: true, autoplay: true, changespeed: 600, controls: true, controltext: { play: 'play', pause: 'pause', next: 'next', previous: 'previous' }, effect: 'fade', hoverpause: true, links: true, speed: 3000 }; if (settings) $.extend(true, config, settings); if (config.speed < (config.changespeed + 20)) { alert('jshowoff: make speed at least 20ms longer than changespeed; the fades aren\'t always right on time.'); return this; }; this.each(function (i) { var $cont = $(this); var gallery = $(this).children().remove(); var timer = ''; var counter = 0; var preloadedimg = []; var howmanyinstances = $('.jshowoff').length + 1; var uniqueclass = 'jshowoff-' + howmanyinstances; var cssclass = config.cssclass != undefined ? config.cssclass : ''; $cont.css('position', 'relative').wrap('
'); var $wrap = $('.' + uniqueclass); $wrap.css('position', 'relative').addclass(cssclass); $(gallery[0]).clone().appendto($cont); preloadimg(); if (config.controls) { addcontrols(); if (config.autoplay == false) { $('.' + uniqueclass + '-play').addclass(uniqueclass + '-paused jshowoff-paused').text(config.controltext.play); }; }; if (config.links) { addslidelinks(); $('.' + uniqueclass + '-slidelinks a').eq(0).addclass(uniqueclass + '-active jshowoff-active'); }; if (config.hoverpause) { $cont.hover(function () { if (isplaying()) pause('hover'); }, function () { if (isplaying()) play('hover'); }); }; if (config.autoplay && gallery.length > 1) { timer = setinterval(function () { play(); }, config.speed); }; if (gallery.length < 1) { $('.' + uniqueclass).append('

for jshowoff to work, the container element must have child elements.

'); }; function transitionto(gallery, index) { var oldcounter = counter; if ((counter >= gallery.length) || (index >= gallery.length)) { counter = 0; var e2b = true; } else if ((counter < 0) || (index < 0)) { counter = gallery.length - 1; var b2e = true; } else { counter = index; } if (config.effect == 'slideleft') { var newslidedir, oldslidedir; function slidedir(dir) { newslidedir = dir == 'right' ? 'left' : 'right'; oldslidedir = dir == 'left' ? 'left' : 'right'; }; counter >= oldcounter ? slidedir('left') : slidedir('right'); $(gallery[counter]).clone().appendto($cont).slideit({ direction: newslidedir, changespeed: config.changespeed }); if ($cont.children().length > 1) { $cont.children().eq(0).css('position', 'absolute').slideit({ direction: oldslidedir, showhide: 'hide', changespeed: config.changespeed }, function () { $(this).remove(); }); }; } else if (config.effect == 'fade') { $(gallery[counter]).clone().appendto($cont).hide().fadein(config.changespeed, function () { if ($.browser.msie) this.style.removeattribute('filter'); }); if ($cont.children().length > 1) { $cont.children().eq(0).css('position', 'absolute').fadeout(config.changespeed, function () { $(this).remove(); }); }; } else if (config.effect == 'none') { $(gallery[counter]).clone().appendto($cont); if ($cont.children().length > 1) { $cont.children().eq(0).css('position', 'absolute').remove(); }; }; if (config.links) { $('.' + uniqueclass + '-active').removeclass(uniqueclass + '-active jshowoff-active'); $('.' + uniqueclass + '-slidelinks a').eq(counter).addclass(uniqueclass + '-active jshowoff-active'); }; }; function isplaying() { return $('.' + uniqueclass + '-play').hasclass('jshowoff-paused') ? false : true; }; function play(src) { if (!isbusy()) { counter++; transitionto(gallery, counter); if (src == 'hover' || !isplaying()) { timer = setinterval(function () { play(); }, config.speed); } if (!isplaying()) { $('.' + uniqueclass + '-play').text(config.controltext.pause).removeclass('jshowoff-paused ' + uniqueclass + '-paused'); } }; }; function pause(src) { clearinterval(timer); if (!src || src == 'playbtn') $('.' + uniqueclass + '-play').text(config.controltext.play).addclass('jshowoff-paused ' + uniqueclass + '-paused'); if (config.animatepause && src == 'playbtn') { $('

' + config.controltext.pause + '

').css({ fontsize: '62%', textalign: 'center', position: 'absolute', top: '40%', lineheight: '100%', width: '100%' }).appendto($wrap).addclass(uniqueclass + 'pausetext').animate({ fontsize: '600%', top: '30%', opacity: 0 }, { duration: 500, complete: function () { $(this).remove(); } }); } }; function next() { gotoandpause(counter + 1); }; function previous() { gotoandpause(counter - 1); }; function isbusy() { return $cont.children().length > 1 ? true : false; }; function gotoandpause(index) { $cont.children().stop(true, true); if ((counter != index) || ((counter == index) && isbusy())) { if (isbusy()) $cont.children().eq(0).remove(); transitionto(gallery, index); pause(); }; }; function preloadimg() { $(gallery).each(function (i) { $(this).find('img').each(function (i) { preloadedimg[i] = $('').attr('src', $(this).attr('src')); }); }); }; function addcontrols() { $wrap.append('

' + config.controltext.pause + ' ' + config.controltext.previous + ' ' + config.controltext.next + '

'); $('.' + uniqueclass + '-controls a').each(function () { if ($(this).hasclass('jshowoff-play')) $(this).click(function () { isplaying() ? pause('playbtn') : play(); return false; }); if ($(this).hasclass('jshowoff-prev')) $(this).click(function () { previous(); return false; }); if ($(this).hasclass('jshowoff-next')) $(this).click(function () { next(); return false; }); }); }; function addslidelinks() { $wrap.append(''); $.each(gallery, function (i, val) { var linktext = $(this).attr('title') != '' ? $(this).attr('title') : i + 1; $('' + linktext + '').bind('click', { index: i }, function (e) { gotoandpause(e.data.index); return false; }).appendto('.' + uniqueclass + '-slidelinks'); }); }; }); return this; }; })(jquery); (function ($) { $.fn.slideit = function (settings, callback) { var config = { direction: 'left', showhide: 'show', changespeed: 600 }; if (settings) $.extend(config, settings); this.each(function (i) { $(this).css({ left: 'auto', right: 'auto', top: 'auto', bottom: 'auto' }); var measurement = (config.direction == 'left') || (config.direction == 'right') ? $(this).outerwidth() : $(this).outerheight(); var startstyle = {}; startstyle['position'] = $(this).css('position') == 'static' ? 'relative' : $(this).css('position'); startstyle[config.direction] = (config.showhide == 'show') ? '-' + measurement + 'px' : 0; var endstyle = {}; endstyle[config.direction] = config.showhide == 'show' ? 0 : '-' + measurement + 'px'; $(this).css(startstyle).animate(endstyle, config.changespeed, callback); }); return this; }; })(jquery);