(function ($) { var images = new Array; var selImage = new Array; var prevImage = new Array; var interval = new Array; var paused = new Array; $.fn.mclSlider = $.fn.MclSlider = function (variables) { var defaults = { autoPlay: true, autoPlaySpeed: 2200, transitionSpeed: 1200, transitionEffect: [''], random: true, blockSize: { vertical: 5, horizontal: 10 }, betweenBlockDelay: 400, showTitles: true, titleTransitionSpeed: 500, pingPong: true, backgroundOpacity: 0.7, width: 640, height: 320, debug: false, pageNavigation: true, hoverPause: true, letterBoxEffect: 0 }; var options = $.extend(defaults, variables); init = function (slideWrapper) { images[slideWrapper.id] = new Array(); selImage[slideWrapper.id] = 0; prevImage[slideWrapper.Id] = 0; paused[slideWrapper.id] = 0; var slides = $(slideWrapper).find('ul.mclslider li'); $.each(slides, function (i, item) { var m = $(item).children('img.mclsliderimg'); var l = $(item).children('a.mclsliderlink'); var t = $(item).children('span.mclslidertext'); images[slideWrapper.id][i] = { image: m.exists() ? m : null, link: l.exists() ? l : null, title: t }; $(item).hide() }); if (options.random) { $.random(images[slideWrapper.id]) } $.createOverlays(slideWrapper); $.hookUpEvents(slideWrapper); $.setup(slideWrapper) }; $.createOverlays = function (slideWrapper) { var master = $(slideWrapper); master.wrap('<div class="mclslider-background"/>'); master.css({ width: options.width, height: options.height }); master.append("<div id='mclslider-screen-0-" + slideWrapper.id + "' class='mclslider-screen' style='z-index:0; width:" + options.width + "px; height:" + options.height + "px;'></div>").wrap("<a href='' class='mclslider-mainlink' id='mclslider-mainlink-" + slideWrapper.id + "' />"); master.append("<div id='mclslider-screen-1-" + slideWrapper.id + "' class='mclslider-screen' style='z-index:1; width:" + options.width + "px; height:" + options.height + "px;'></div>"); $.createSquares(slideWrapper); master.append("<div id='mclslider-titlebox-" + slideWrapper.id + "' class='mclslider-titlebox' style='z-index:2;'></div>"); $.createNavControls(slideWrapper); if (options.debug) { master.append("<div id='mclslider-debug-" + slideWrapper.id + "' class='mclslider-debug' style='padding-top:" + options.height + "px;'>Debug<br/></div>"); $.each(images[slideWrapper.id], function (i, item) { $.debugWriteLine(slideWrapper, '==============' + i); $.debugWriteLine(slideWrapper, 'img:' + item.image.attr('src')); $.debugWriteLine(slideWrapper, 'link:' + (item.link ? item.link.attr('href') : 'no link')); $.debugWriteLine(slideWrapper, 'text:' + item.title.html()) }) } }; $.createSquares = function (slideWrapper) { var master = $(slideWrapper); var tWidth = parseInt(options.width / options.blockSize.horizontal); var tHeight = parseInt(options.height / options.blockSize.vertical); for (var y = 0; y < options.blockSize.vertical; ++y) { for (var x = 0; x < options.blockSize.horizontal; ++x) { master.append("<div id='mclslide-tile-" + slideWrapper.id + x + y + "' style='position:absolute;z-index:2;width:" + tWidth + "px; height:" + tHeight + "px;'></div>") } } }; $.setupSquares = function (slideWrapper) { var tWidth = parseInt(options.width / options.blockSize.horizontal); var tHeight = parseInt(options.height / options.blockSize.vertical); for (var y = 0; y < options.blockSize.vertical; ++y) { for (var x = 0; x < options.blockSize.horizontal; ++x) { $("#mclslide-tile-" + slideWrapper.id + x + y).css({ 'background-position': -(x * tWidth) + 'px ' + (-(y * tHeight) + 'px'), 'left': (x * tWidth), 'top': (y * tHeight), 'width': tWidth, 'height': tHeight }).hide() } } }; $.createNavControls = function (slideWrapper) { if (options.pageNavigation) { $(slideWrapper).append("<div id='mclslider-navcontainer-" + slideWrapper.id + "' class='mclslider-navcontainer' style='z-index:3;'></div>"); var container = $("#mclslider-navcontainer-" + slideWrapper.id); $("#mclslider-navcontainer-" + slideWrapper.id).append("<div id='mclslider-navpanel-" + slideWrapper.id + "' class='mclslider-navpanel'></div>"); var panel = $("#mclslider-navpanel-" + slideWrapper.id); container.click(function (e) { e.preventDefault() }); panel.click(function (e) { e.preventDefault() }); $.each(images[slideWrapper.id], function (i, item) { panel.append("<div id='mclslider-navitem-" + slideWrapper.id + "-" + i + "' class='mclslider-navitem'>" + (i + 1) + "</div>") }); var navItems = $('#mclslider-navpanel-' + slideWrapper.id).find("*"); $.each(navItems, function (i, item) { $(item).click(function (e) { e.preventDefault(); $.transitionTo(slideWrapper, i) }) }) } }; $.hookUpEvents = function (slideWrapper) { if (options.hoverPause) { var items = new Array(); items[0] = $('#mclslider-screen-0-' + slideWrapper.id); items[1] = $('#mclslider-screen-1-' + slideWrapper.id); items[2] = $('#mclslider-titlebox-' + slideWrapper.id); items[3] = $('#mclslider-navcontainer-' + slideWrapper.id); $.each(items, function (i, item) { $(item).mouseover(function () { $.pausePlay(slideWrapper, true) }); item.mouseout(function () { $.pausePlay(slideWrapper, false) }) }) } }; $.setup = function (slideWrapper) { clearInterval(interval[slideWrapper.id]); var screens = new Array(); screens[0] = $('#mclslider-screen-0-' + slideWrapper.id); screens[1] = $('#mclslider-screen-1-' + slideWrapper.id); screens[0].show(); screens[1].hide(); var src = $.currentImage(slideWrapper); screens[0].css({ 'left': 0, 'top': 0, 'background-position': '0px 0px', 'background-image': 'url(' + src.image.attr('src') + ')' }); screens[1].css({ 'left': 0, 'top': 0, 'background-position': '0px 0px', 'background-image': 'url(' + src.image.attr('src') + ')' }); var titleBox = $('#mclslider-titlebox-' + slideWrapper.id); titleBox.hide(); if (src.title != null && options.showTitles) { titleBox.hide(); titleBox.html(src.title.html()); titleBox.fadeIn(options.transitionSpeed, function () { if ($.browser.msie) { $(this).attr('filter', '') } }) } if (options.letterBoxEffect > 0) { var img = new Image(); img.src = src.image.attr('src'); var targetY = Math.max(img.height - options.height, 0); var targetX = Math.max(img.width - options.width, 0); if (targetY > 0 || targetX > 0) { screens[0].animate({ backgroundPosition: '-' + targetX + 'px -' + targetY + 'px' }, options.letterBoxEffect, "swing") } } var link = $('#mclslider-mainlink-' + slideWrapper.id); link.attr('href', (src.link != null ? src.link.attr('href') : '')); var navItems = $('#mclslider-navpanel-' + slideWrapper.id).find("*"); $.each(navItems, function (i, item) { $(item).removeClass('mclslider-active') }); $('#mclslider-navitem-' + slideWrapper.id + "-" + selImage[slideWrapper.id]).addClass('mclslider-active'); $.setupSquares(slideWrapper); if (options.autoPlay && images[slideWrapper.id].length > 1) { interval[slideWrapper.id] = setInterval(function () { $.transitionTimer(slideWrapper) }, options.autoPlaySpeed) } }; $.transitionTo = function (slideWrapper, index) { $.debugWriteLine(slideWrapper, 'clicked ' + index); clearInterval(interval[slideWrapper.id]); prevImage[slideWrapper.id] = selImage[slideWrapper.id]; selImage[slideWrapper.id] = index; $.setup(slideWrapper) }; $.pausePlay = function (slideWrapper, shouldPause) { paused[slideWrapper.id] += (shouldPause ? 1 : -1); if (paused[slideWrapper.id] > 0) { clearInterval(interval[slideWrapper.id]) } else if (paused[slideWrapper.id] <= 0 && options.autoPlay && images[slideWrapper.id].length > 1) { clearInterval(interval[slideWrapper.id]); interval[slideWrapper.id] = setInterval(function () { $.transitionTimer(slideWrapper) }, options.autoPlaySpeed) } }; $.transitionTimer = function (slideWrapper) { clearInterval(interval[slideWrapper.id]); $.moveToNextImage(slideWrapper); $.transition(slideWrapper) }; $.transition = function (slideWrapper) { var titleBox = $('#mclslider-titlebox-' + slideWrapper.id); titleBox.fadeOut(options.titleTransitionSpeed); var effects = ['fade', 'hslidein', 'vslidein', 'squaresin', 'randomsquares', 'vblinds', 'diamonds', 'rotatebox', 'roll', 'swirl']; $.debugWriteLine(slideWrapper, options.transitionEffect.length); var eff = options.transitionEffect[Math.floor(Math.random() * (options.transitionEffect.length))]; if (eff == '') { eff = effects[Math.floor(Math.random() * (effects.length))] } if (eff == 'fade') $.crossFade(slideWrapper); if (eff == 'hslidein') $.hSlideIn(slideWrapper); if (eff == 'vslidein') $.vSlideIn(slideWrapper); if (eff == 'squaresin') $.squaresIn(slideWrapper); if (eff == 'randomsquares') $.randomSquares(slideWrapper); if (eff == 'vblinds') $.vBlinds(slideWrapper); if (eff == 'diamonds') $.diamonds(slideWrapper); if (eff == 'rotatebox') $.rotateBox(slideWrapper); if (eff == 'roll') $.rollBox(slideWrapper); if (eff == 'swirl') $.swirl(slideWrapper) }; $.currentImage = function (slideWrapper) { return images[slideWrapper.id][selImage[slideWrapper.id]] }; $.previousImage = function (slideWrapper) { return images[slideWrapper.id][prevImage[slideWrapper.id]] }; $.moveToNextImage = function (slideWrapper) { var cnt = images[slideWrapper.id].length; prevImage[slideWrapper.id] = selImage[slideWrapper.id]; selImage[slideWrapper.id] = (selImage[slideWrapper.id] + 1) % cnt; return images[slideWrapper.id][selImage[slideWrapper.id]] }; $.crossFade = function (slideWrapper) { var next = $.currentImage(slideWrapper); var topScreen = $('#mclslider-screen-1-' + slideWrapper.id); topScreen.hide(); topScreen.css({ 'background-image': 'url(' + next.image.attr('src') + ')' }).fadeIn(options.transitionSpeed, function () { $.setup(slideWrapper) }) }; $.hSlideIn = function (slideWrapper) { var next = $.currentImage(slideWrapper); var topScreen = $('#mclslider-screen-1-' + slideWrapper.id); var startY = 0 + (options.pingPong && (selImage[slideWrapper.id] & 1)) ? options.height : 0; var startTy = (-options.height) + ((options.pingPong && (selImage[slideWrapper.id] & 1)) ? options.height : 0); topScreen.css({ opacity: 0, backgroundPosition: '0px ' + startTy + 'px', 'height': 0, 'top': startY, 'background-image': 'url(' + next.image.attr('src') + ')' }).animate({ opacity: 1, backgroundPosition: '0px 0px', 'height': options.height, 'top': 0 }, options.transitionSpeed, function () { $.setup(slideWrapper) }) }; $.vSlideIn = function (slideWrapper) { var next = $.currentImage(slideWrapper); var topScreen = $('#mclslider-screen-1-' + slideWrapper.id); var startX = 0 + (options.pingPong && (selImage[slideWrapper.id] & 1)) ? options.width : 0; var startTx = (-options.width) + ((options.pingPong && (selImage[slideWrapper.id] & 1)) ? options.width : 0); topScreen.css({ opacity: 0, backgroundPosition: '' + startTx + 'px 0px', 'width': 0, 'left': startX, 'background-image': 'url(' + next.image.attr('src') + ')' }).animate({ opacity: 1, backgroundPosition: '0px 0px', 'width': options.width, 'left': 0 }, options.transitionSpeed, function () { $.setup(slideWrapper) }) }; $.randomSquares = function (slideWrapper) { var blocks = $.getSquares(slideWrapper); $.random(blocks); var step = options.transitionSpeed / blocks.length; var start = 1; for (var i = 0; i < blocks.length; ++i, start += step) { blocks[i].fadeTo(start, 0.01).fadeTo(options.betweenBlockDelay, 1, (i == blocks.length - 1) ? function () { $.setup(slideWrapper) } : null) } }; $.squaresIn = function (slideWrapper) { var blocks = $.getSquares(slideWrapper); var step = options.transitionSpeed / blocks.length; var start = 1; for (var i = 0; i < blocks.length; ++i, start += step) { blocks[i].fadeTo(start, 0.01).fadeTo(options.betweenBlockDelay, 1, (i == blocks.length - 1) ? function () { $.setup(slideWrapper) } : null) } }; $.diamonds = function (slideWrapper) { var blocks = $.getSquares(slideWrapper); $.random(blocks); var step = options.transitionSpeed / blocks.length; var tWidth = parseInt(options.width / options.blockSize.horizontal); var tHeight = parseInt(options.height / options.blockSize.vertical); var start = 1; for (var i = 0; i < blocks.length; ++i, start += step) { blocks[i].css({ opacity: 0.01, 'width': 0, 'height': 0 }); blocks[i].animate({ opacity: 1 }, start).animate({ opacity: 1, 'width': tWidth, 'height': tHeight }, options.betweenBlockDelay, (i == blocks.length - 1) ? function () { $.setup(slideWrapper) } : null) } }; $.vBlinds = function (slideWrapper) { var blocks = $.getSquaresRaw(slideWrapper); var end = options.blockSize.horizontal; var step = options.transitionSpeed / (end * 1.5); var tWidth = parseInt(options.width / options.blockSize.horizontal); var rev = (options.pingPong && (selImage[slideWrapper.id] & 1)); for (var i = 0; i < end; ++i) { blocks[i].css({ opacity: 0.01, 'width': 0, 'height': options.height, 'top': 0, 'background-position': -(i * tWidth) + 'px ' + '0px' }); var dist = rev ? (end - i) : i; var atEnd = (rev && i == 0) || (!rev && i == end - 1); blocks[i].animate({ opacity: 0 }, step * dist).animate({ opacity: 1, 'width': tWidth }, options.betweenBlockDelay, atEnd ? function () { $.setup(slideWrapper) } : null) } }; $.rotateBox = function (slideWrapper) { $.boxCommon(slideWrapper, options.blockSize.horizontal) }; $.rollBox = function (slideWrapper) { $.boxCommon(slideWrapper, 1) }; $.boxCommon = function (slideWrapper, numRows) { var bottomScreen = $('#mclslider-screen-0-' + slideWrapper.id); bottomScreen.hide(); var rev = (options.pingPong && (selImage[slideWrapper.id] & 1)); var prev = $.previousImage(slideWrapper); var blocks = $.getSquaresRaw(slideWrapper); var tWidth = parseInt(options.width / numRows); var step = options.transitionSpeed / (numRows * 2.5); var b1SHeight = rev ? 0 : options.height; var b2SHeight = rev ? options.height : 0; var b1EHeight = rev ? options.height : 0; var b2EHeight = rev ? 0 : options.height; var b1SPos = rev ? options.height : 0; var b2SPos = rev ? 0 : options.height; var b1EPos = 0; var b2EPos = rev ? options.height : 0; var wiggle = rev ? -10 : 10; var sty = rev ? -options.height : 0; var ty = rev ? 0 : -options.height; for (var i = 0; i < numRows; ++i) { var tx = (-i * tWidth); blocks[i].css({ opacity: 0.99, 'width': tWidth, 'height': b1SHeight, 'top': b1SPos, 'background-position': tx + 'px ' + sty + 'px' }); blocks[i + options.blockSize.horizontal].css({ opacity: 0.99, 'width': tWidth, 'height': b2SHeight, 'top': b2SPos, 'background-position': tx + 'px ' + '0px' }); blocks[i + (rev ? options.blockSize.horizontal : 0)].css({ 'background-image': 'url(' + prev.image.attr('src') + ')' }); blocks[i].show(); blocks[i + options.blockSize.horizontal].show(); blocks[i].animate({ opacity: 1 }, step * i).animate({ 'top': b1EPos + wiggle + 'px' }, 200).animate({ 'height': b1EHeight, 'top': b1EPos, backgroundPosition: '' + tx + 'px ' + ty + 'px' }, options.transitionSpeed); blocks[i + options.blockSize.horizontal].animate({ opacity: 1 }, step * i).animate({ 'top': b2SPos + wiggle + 'px' }, 200).animate({ 'height': b2EHeight, 'top': b2EPos }, options.transitionSpeed, (i == numRows - 1) ? function () { $.setup(slideWrapper) } : null) } }; $.swirl = function (slideWrapper) { var bottomScreen = $('#mclslider-screen-1-' + slideWrapper.id); var prev = $.previousImage(slideWrapper); var next = $.currentImage(slideWrapper); var blocks = $.getSquaresRaw(slideWrapper); var end = options.blockSize.horizontal; var tWidth = parseInt(options.width / options.blockSize.horizontal); var step = options.transitionSpeed / end; var hHeight = options.height / 2; var ty = -options.height; var rev = (options.pingPong && (selImage[slideWrapper.id] & 1)); bottomScreen.css({ 'background-image': 'url(' + next.image.attr('src') + ')' }); bottomScreen.show(); for (var i = 0; i < end; ++i) { var tx = (-i * tWidth); blocks[i].css({ opacity: 0.99, 'height': options.height, 'top': 0, 'background-position': tx + 'px ' + 0 + 'px' }); blocks[i].css({ 'background-image': 'url(' + prev.image.attr('src') + ')' }); blocks[i].show(); blocks[i].animate({ opacity: 1 }, step * (rev ? (end - i) : i)).animate({ 'height': 0, 'top': hHeight, backgroundPosition: '' + tx + 'px ' + ty + 'px' }, options.transitionSpeed, (i == (rev ? 0 : (end - 1))) ? function () { $.setup(slideWrapper) } : null) } }; $.getSquares = function (slideWrapper) { var blocks = $.getSquaresRaw(slideWrapper); if (options.pingPong && (selImage[slideWrapper.id] & 1)) blocks.reverse(); return blocks }; $.getSquaresRaw = function (slideWrapper) { var next = $.currentImage(slideWrapper); var blocks = new Array(); var cnt = 0; for (var y = 0; y < options.blockSize.vertical; ++y) { for (var x = 0; x < options.blockSize.horizontal; ++x) { var tile = $("#mclslide-tile-" + slideWrapper.id + x + y); tile.hide(); tile.css({ 'background-image': 'url(' + next.image.attr('src') + ')' }); blocks[cnt] = tile; ++cnt } } return blocks }; $.debugWriteLine = function (slideWrapper, txt) { if (options.debug) { var dbg = $('#mclslider-debug-' + slideWrapper.id); dbg.append('<br/>' + txt) } }; jQuery.fn.exists = function () { return jQuery(this).length > 0 }; $.random = function (arr) { var i = arr.length; if (i == 0) return false; while (--i) { var j = Math.floor(Math.random() * (i + 1)); var tempi = arr[i]; var tempj = arr[j]; arr[i] = tempj; arr[j] = tempi } }; this.each(function () { init(this) }) } })(jQuery);