(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: [""], 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(); }); $.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 (y = 0; y < options.blockSize.vertical; ++y) { for (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 (y = 0; y < options.blockSize.vertical; ++y) { for (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 (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 (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 (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 (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 (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 (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 (y = 0; y < options.blockSize.vertical; ++y) { for (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);