(function ($) { $.fn.alpSlider = function (options) { function setAnimationSquare() { var a = parseInt(animationItemNb / 2); var b = parseInt(animationItemNb / 2); var c = parseInt(oAnimationWrapper.height() / a); var d = parseInt(oAnimationWrapper.width() / b); var e = 0; var f = 0; var g = parseInt(oAnimationWrapper.height()) - c * (a - 1); var h = parseInt(oAnimationWrapper.width()) - d * (b - 1); var i = 0; var j = 0; for (e = 0; e < a; e++) { for (f = 0; f < b; f++) { if (e < a - 1) { i = c } else { i = g } if (f < b - 1) { j = d } else { j = h } $("<div/>").css({ width: j, height: i, top: parseInt(e * parseInt(oAnimationWrapper.height() / a)), left: parseInt(f * parseInt(oAnimationWrapper.width() / b)), position: "absolute", backgroundImage: "url(" + animationImgSrc + ")", backgroundPosition: "" + -(f * parseInt(oAnimationWrapper.width() / b)) + "px " + -(e * parseInt(oAnimationWrapper.height() / a)) + "px" }).addClass(animationItemClass).appendTo(oAnimationWrapper) } } } function setAnimationBar() { var a = 0; var b = 0; var c = 0; var d = 0; if (opts.direction == "horizontal") { for (a = 0; a < animationItemNb; a++) { c = a * parseInt(oAnimationWrapper.width() / animationItemNb); d = -(a * parseInt(oAnimationWrapper.width() / animationItemNb)); if (a < animationItemNb - 1) { b = parseInt(oAnimationWrapper.width() / animationItemNb) } else { b = oAnimationWrapper.width() - a * parseInt(oAnimationWrapper.width() / animationItemNb) } $("<div/>").css({ width: b, height: oAnimationWrapper.height(), top: "0px", left: c, position: "absolute", backgroundImage: "url(" + animationImgSrc + ")", backgroundPosition: "" + d + "px 0px" }).addClass(animationItemClass).appendTo(oAnimationWrapper) } } else { for (a = 0; a < animationItemNb; a++) { c = a * parseInt(oAnimationWrapper.height() / animationItemNb); d = -(a * parseInt(oAnimationWrapper.height() / animationItemNb)); if (a < animationItemNb - 1) { b = parseInt(oAnimationWrapper.height() / animationItemNb) } else { b = oAnimationWrapper.height() - a * parseInt(oAnimationWrapper.height() / animationItemNb) } $("<div/>").css({ width: oAnimationWrapper.width(), height: b, top: c, left: "0px", position: "absolute", backgroundImage: "url(" + animationImgSrc + ")", backgroundPosition: "0px " + d + "px" }).addClass(animationItemClass).appendTo(oAnimationWrapper) } } } function squareSlide() { if ($(oItems.get(targetPosition)).find("img").length > 0) { animationImgSrc = $(oItems.get(curPosition)).find("img").first().attr("src"); setAnimationSquare(); oItems.css({ zIndex: "796" }); $(oItems.get(targetPosition)).css({ zIndex: "798" }).show(); $(oItems.get(curPosition)).css({ zIndex: "797" }); var delay = opts.animationItemDelay; i = 0; j = 0; $("." + animationItemClass).each(function (a) { if (a != parseInt(animationItemNb / 2) - 1) { $(this).delay(delay * (j + i)).animate({ height: "0px", width: "0px", opacity: "0.2" }, opts.speed, "easeOutQuint") } else { $(this).delay(delay * (j + i)).animate({ height: "0px", width: "0px", opacity: "0.2" }, opts.speed, "easeOutQuint", function () { animateEnd() }) } i++; if (i == parseInt(animationItemNb / 2)) { i = 0; j++ } }) } else { eval(animationList[0] + "()") } } function barSlideOut() { if ($(oItems.get(targetPosition)).find("img").length > 0) { animationImgSrc = $(oItems.get(curPosition)).find("img").first().attr("src"); setAnimationBar(); oItems.css({ zIndex: "796" }); $(oItems.get(curPosition)).css({ zIndex: "797" }); $(oItems.get(targetPosition)).css({ zIndex: "798" }); $("." + animationItemClass).each(function (a) { if (a != animationItemNb - 1) { if (a % 2 == 0) { $(this).delay(opts.animationItemDelay * a).animate({ top: "+=" + parseInt(oAnimationWrapper.height()) + "px", opacity: "1" }, opts.speed, "easeOutQuint") } else { $(this).delay(opts.animationItemDelay * a).animate({ top: "-=" + parseInt(oAnimationWrapper.height()) + "px", opacity: "1" }, opts.speed, "easeOutQuint") } } else { if (a % 2 == 0) { $(this).delay(opts.animationItemDelay * a).animate({ top: "+=" + parseInt(oAnimationWrapper.height()) + "px", opacity: "1" }, opts.speed, "easeOutQuint", function () { animateEnd() }) } else { $(this).delay(opts.animationItemDelay * a).animate({ top: "-=" + parseInt(oAnimationWrapper.height()) + "px", opacity: "1" }, opts.speed, "easeOutQuint", function () { animateEnd() }) } } }) } else { eval(animationList[0] + "()") } } function barSlideIn() { if ($(oItems.get(curPosition)).find("img").length > 0) { animationImgSrc = $(oItems.get(curPosition)).find("img").first().attr("src"); setAnimationBar(); oItems.css({ zIndex: "796" }); $(oItems.get(targetPosition)).css({ zIndex: "798" }).show(); $(oItems.get(curPosition)).css({ zIndex: "797" }); $("." + animationItemClass).each(function (a) { if (a != animationItemNb - 1) { if (a % 2 == 0) { $(this).delay(opts.animationItemDelay * a).animate({ top: "+=" + parseInt(oAnimationWrapper.height()) + "px", opacity: "0" }, opts.speed, "easeOutQuint") } else { $(this).delay(opts.animationItemDelay * a).animate({ top: "-=" + parseInt(oAnimationWrapper.height()) + "px", opacity: "0" }, opts.speed, "easeOutQuint") } } else { if (a % 2 == 0) { $(this).delay(opts.animationItemDelay * a).animate({ top: "+=" + parseInt(oAnimationWrapper.height()) + "px", opacity: "0" }, opts.speed, "easeOutQuint", function () { animateEnd() }) } else { $(this).delay(opts.animationItemDelay * a).animate({ top: "-=" + parseInt(oAnimationWrapper.height()) + "px", opacity: "0" }, opts.speed, "easeOutQuint", function () { animateEnd() }) } } }) } else { eval(animationList[0] + "()") } } function barFadeOut() { if ($(oItems.get(targetPosition)).find("img").length > 0) { animationImgSrc = $(oItems.get(curPosition)).find("img").first().attr("src"); setAnimationBar(); oItems.css({ zIndex: "796" }); $(oItems.get(curPosition)).css({ zIndex: "797" }); $(oItems.get(targetPosition)).css({ zIndex: "798" }); animateEnd(); $("." + animationItemClass).each(function (a) { if (a != animationItemNb - 1) { $(this).delay(opts.animationItemDelay * (a + 1)).fadeOut(opts.speed) } else { $(this).delay(opts.animationItemDelay * (a + 1)).fadeOut(opts.speed, function () { animateEnd() }) } }); animateEnd() } else { eval(animationList[0] + "()") } } function barFadeIn() { if ($(oItems.get(curPosition)).find("img").length > 0) { animationImgSrc = $(oItems.get(targetPosition)).find("img").first().attr("src"); setAnimationBar(); $("." + animationItemClass).hide(); oItems.css({ zIndex: "796" }); $(oItems.get(targetPosition)).css({ zIndex: "798" }).hide(); $(oItems.get(curPosition)).css({ zIndex: "797" }).show(); $("." + animationItemClass).each(function (a) { if (a != animationItemNb - 1) { $(this).delay(opts.animationItemDelay * (a + 1)).fadeIn(opts.speed) } else { $(this).delay(opts.animationItemDelay * (a + 1)).fadeIn(opts.speed, function () { animateEnd() }) } }) } else { eval(animationList[0] + "()") } } function fadeIn() { oItems.css({ zIndex: "796" }); $(oItems.get(curPosition)).css({ zIndex: "797" }); $(oItems.get(targetPosition)).hide().css({ zIndex: "798" }).fadeIn(opts.speed, function () { animateEnd() }) } function fadeOut() { oItems.css({ zIndex: "796" }); $(oItems.get(targetPosition)).css({ zIndex: "797" }).show(); $(oItems.get(curPosition)).css({ zIndex: "798" }).fadeOut(opts.speed, function () { animateEnd() }) } function slideOut() { oItems.css({ zIndex: "796" }); $(oItems.get(targetPosition)).css({ zIndex: "797" }); $(oItems.get(curPosition)).css({ zIndex: "798" }); if (curPosition < targetPosition) { if (opts.direction == "horizontal") { $(oItems.get(targetPosition)).css({ left: "0px" }); $(oItems.get(curPosition)).animate({ left: "+=" + parseInt(oWrapper.outerWidth()) + "px" }, opts.speed, function () { animateEnd() }) } else { $(oItems.get(targetPosition)).css({ top: "0px" }); $(oItems.get(curPosition)).animate({ top: "+=" + parseInt(oWrapper.outerHeight()) + "px" }, opts.speed, function () { animateEnd() }) } } else { if (opts.direction == "horizontal") { $(oItems.get(targetPosition)).css({ left: "0px" }); $(oItems.get(curPosition)).animate({ left: "-=" + parseInt(oWrapper.outerWidth()) + "px" }, opts.speed, function () { animateEnd() }) } else { $(oItems.get(targetPosition)).css({ top: "0px" }); $(oItems.get(curPosition)).animate({ top: "-=" + parseInt(oWrapper.outerHeight()) + "px" }, opts.speed, function () { animateEnd() }) } } } function slideIn() { oItems.css({ zIndex: "796" }); $(oItems.get(curPosition)).css({ zIndex: "797" }); if (curPosition < targetPosition) { if (opts.direction == "horizontal") { $(oItems.get(targetPosition)).css({ left: parseInt(oWrapper.outerWidth()) + "px", zIndex: "798" }); $(oItems.get(targetPosition)).animate({ left: "-=" + parseInt(oWrapper.outerWidth()) + "px" }, opts.speed, function () { animateEnd() }) } else { $(oItems.get(targetPosition)).css({ top: parseInt(oWrapper.outerHeight()) + "px", zIndex: "798" }); $(oItems.get(targetPosition)).animate({ top: "-=" + parseInt(oWrapper.outerHeight()) + "px" }, opts.speed, function () { animateEnd() }) } } else { if (opts.direction == "horizontal") { $(oItems.get(targetPosition)).css({ left: "-" + parseInt(oWrapper.outerWidth()) + "px", zIndex: "798" }); $(oItems.get(targetPosition)).animate({ left: "+=" + parseInt(oWrapper.outerWidth()) + "px" }, opts.speed, function () { animateEnd() }) } else { $(oItems.get(targetPosition)).css({ top: "-" + parseInt(oWrapper.outerHeight()) + "px", zIndex: "798" }); $(oItems.get(targetPosition)).animate({ top: "+=" + parseInt(oWrapper.outerHeight()) + "px" }, opts.speed, function () { animateEnd() }) } } } function slide() { oItems.css({ zIndex: "796" }); $(oItems.get(curPosition)).css({ zIndex: "797" }); if (curPosition < targetPosition) { if (opts.direction == "horizontal") { $(oItems.get(targetPosition)).css({ left: parseInt(oWrapper.outerWidth()) + "px", zIndex: "798" }); $(oItems.get(targetPosition)).animate({ left: "-=" + parseInt(oWrapper.outerWidth()) + "px" }, opts.speed); $(oItems.get(curPosition)).animate({ left: "-=" + parseInt(oWrapper.outerWidth()) + "px" }, opts.speed, function () { animateEnd(); $(oItems.get(curPosition)).css({ left: "0px" }) }) } else { $(oItems.get(targetPosition)).css({ top: parseInt(oWrapper.outerHeight()) + "px", zIndex: "798" }); $(oItems.get(targetPosition)).animate({ top: "-=" + parseInt(oWrapper.outerHeight()) + "px" }, opts.speed); $(oItems.get(curPosition)).animate({ top: "-=" + parseInt(oWrapper.outerHeight()) + "px" }, opts.speed, function () { animateEnd(); $(oItems.get(curPosition)).css({ top: "0px" }) }) } } else { if (opts.direction == "horizontal") { $(oItems.get(targetPosition)).css({ left: "-" + parseInt(oWrapper.outerWidth()) + "px", zIndex: "798" }); $(oItems.get(targetPosition)).animate({ left: "+=" + parseInt(oWrapper.outerWidth()) + "px" }, opts.speed); $(oItems.get(curPosition)).animate({ left: "+=" + parseInt(oWrapper.outerWidth()) + "px" }, opts.speed, function () { animateEnd(); $(oItems.get(curPosition)).css({ left: "0px" }) }) } else { $(oItems.get(targetPosition)).css({ top: "-" + parseInt(oWrapper.outerHeight()) + "px", zIndex: "798" }); $(oItems.get(targetPosition)).animate({ top: "+=" + parseInt(oWrapper.outerHeight()) + "px" }, opts.speed); $(oItems.get(curPosition)).animate({ top: "+=" + parseInt(oWrapper.outerHeight()) + "px" }, opts.speed, function () { animateEnd(); $(oItems.get(curPosition)).css({ top: "0px" }) }) } } } function simple() { oItems.css({ zIndex: "797" }); $(oItems.get(targetPosition)).css({ zIndex: "798" }); animateEnd() } function isInArray(a, b) { for (x = 0; x < b.length; x++) { if (b[x] == a) { return true } } return false } function setNavigationBarItem() { oNavigationBarItem.removeClass(opts.navigationBarItemActifClass); $(oNavigationBarItem.get(curPosition)).addClass(opts.navigationBarItemActifClass) } function setPrevNext() { if (curPosition == oItems.length - 1) { oNext.hide(); if (oItems.length - 1 > 0) { oPrev.show() } } else if (curPosition == 0) { oPrev.hide(); if (oItems.length - 1 >= 0) { oNext.show() } } else if (curPosition > 0 && curPosition < oItems.length - 1) { oPrev.show(); oNext.show() } } function autoplay() { if (oItems.length > 0) { if (curPosition < oItems.length - 1) { targetPosition = curPosition + 1 } else { targetPosition = 0 } animate() } } function animateEnd() { animationIs = false; $("." + animationWrapperClass).remove(); oContainer.css({ cursor: "default" }); if (opts.navigationBarIs) { oNavigationBarItem.css({ cursor: "pointer" }) } if (animationTimer_Hover_Is == false) { autoPlayStart() } } function animateBegin() { if (!animationIs) { if (curPosition != targetPosition) { setTitle(); animationIs = true; oContainer.css({ cursor: "wait" }); if (opts.navigationBarIs) { oNavigationBarItem.css({ cursor: "wait" }) } $("." + animationWrapperClass).remove(); oAnimationWrapper = $("<div/>").addClass(animationWrapperClass).css({ width: oContainer.outerWidth(), height: oWrapper.outerHeight(), position: "absolute", top: "0px", left: "0px", zIndex: "799" }); oWrapper.append(oAnimationWrapper); if (isInArray(opts.animation, animationList) == false) { opts.animation = animationList[0] } if (opts.animation == "random") { var Random_Index = 0; while (parseInt(Random_Index) < 2) { Random_Index = Math.floor(Math.random() * animationList.length) } eval(animationList[parseInt(Random_Index)] + "()") } else { eval(opts.animation + "()") } curPosition = targetPosition; if (opts.prevNextIs == true) { setPrevNext() } if (opts.navigationBarIs == true) { setNavigationBarItem() } } } } function animate() { autoPlayStop(); if (!animationIs) { if ($(oItems.get(targetPosition)).find(":first").get(0).nodeName.toUpperCase() == "A" && $(oItems.get(targetPosition)).find(":first > *").size() == 0) { var a = $("<img>"); a.bind("load", function () { animateBegin() }); $(oItems.get(targetPosition)).find(":first").replaceWith(a.attr("src", $(oItems.get(targetPosition)).find(":first").attr("href"))) } else { animateBegin() } } } function setTitle() { if (oContainer.find("." + opts.mainTitleClass).length > 0) { if ($(oItems.get(targetPosition)).find("." + opts.itemTitleClass).length > 0) { oContainer.find("." + opts.mainTitleClass).html($(oItems.get(targetPosition)).find("." + opts.itemTitleClass).html()) } } } function autoPlayStop() { clearTimeout(animationTimeout) } function autoPlayStart() { if (opts.autoplay) { autoPlayStop(); animationTimeout = setTimeout(autoplay, opts.autoplayTime); if (opts.prevNextIs) { oContainer.hover(function () { animationTimer_Hover_Is = true; autoPlayStop() }, function () { animationTimer_Hover_Is = false; if (!animationIs) { autoPlayStop(); animationTimeout = setTimeout(autoplay, opts.autoplayTime) } }) } } } var defaults = { speed: 1200, direction: "horizontal", animation: "barSlideOut", animationItemDelay: 100, wrapperClass: "wrapper", itemClass: "item", mainTitleClass: "mainTitre", itemTitleClass: "itemTitre", prevNextIs: false, prevClass: "prev", nextClass: "next", autoplay: true, autoplayTime: 1e3, navigationBarIs: false, navigationBarClass: "navigationBar", navigationBarWrapperClass: "navigationWrapper", navigationBarItemClass: "navigationbarItem", navigationBarItemActifClass: "Actif", navigationBarItemHoverClass: "Hover" }; var opts = $.extend(defaults, options); var oContainer = $(this); var oPrev = null; var oNext = null; var oWrapper = oContainer.find("." + opts.wrapperClass); var oItems = oWrapper.find("." + opts.itemClass); var oNavigationBar = null; var oNavigationWrapper = null; var oNavigationBarItem = null; var oAnimationWrapper = null; var animationWrapperClass = "animationWrapper"; var animationItemClass = "animationItem"; var animationItemNb = 15; var animationImgSrc = null; var animationList = ["simple", "random", "slide", "slideIn", "slideOut", "fadeIn", "fadeOut", "barFadeIn", "barFadeOut", "barSlideOut", "barSlideIn", "squareSlide"]; var animationTimeout = null; var animationTimer_Hover_Is = false; var animationIs = false; var curPosition = 0; var targetPosition = 0; oContainer.css({ position: "relative" }); oWrapper.css({ width: $(oItems.get(0)).outerWidth(), height: $(oItems.get(0)).outerHeight(), position: "absolute", top: "0px", left: "0px", overflow: "hidden" }); oItems.each(function (a) { $(this).css({ position: "absolute", top: "0px", left: "0px", zIndex: oItems.length - a }); if ($(this).find("." + opts.itemTitleClass).length > 0) { $(this).find("." + opts.itemTitleClass).hide() } }); if (opts.prevNextIs == true) { oPrev = oContainer.find("." + opts.prevClass); oNext = oContainer.find("." + opts.nextClass); oPrev.hide(); oNext.hide(); setPrevNext(); oNext.click(function () { animationTimer_Hover_Is = true; targetPosition = curPosition + 1; animate(); return false }); oPrev.click(function () { animationTimer_Hover_Is = true; targetPosition = curPosition - 1; animate(); return false }) } if (opts.navigationBarIs == true) { oNavigationBar = oContainer.append('<div class="' + opts.navigationBarClass + '"></div>').parent().find("." + opts.navigationBarClass); oNavigationBar.css({ maxWidth: oContainer.outerWidth() + "px" }); oContainer.height(parseInt(oContainer.outerHeight()) + parseInt(oNavigationBar.outerHeight())); oNavigationWrapper = oNavigationBar.append('<div class="' + opts.navigationWrapperClass + '"></div>').parent().find("." + opts.navigationWrapperClass); var i = 0; for (i = 0; i < oItems.length; i++) { oNavigationWrapper.append('<a href="#" class="' + opts.navigationBarItemClass + '"></a>') } oNavigationBarItem = oNavigationWrapper.find("." + opts.navigationBarItemClass); oNavigationBarItem.css({ textDecoration: "none" }); setNavigationBarItem(); oNavigationBarItem.click(function () { animationTimer_Hover_Is = true; targetPosition = $(this).index(); animate(); return false }) } if (oItems.size() > 0) { if ($(oItems.get(curPosition)).find(":first").get(0).nodeName.toUpperCase() == "A" && $(oItems.get(curPosition)).find(":first > *").size() == 0) { var Img2 = $("<img>"); Img2.bind("load", function () { $(this).fadeIn(500, function () { autoPlayStart(); setTitle() }) }); Img2.hide(); $(oItems.get(curPosition)).find(":first").replaceWith(Img2.attr("src", $(oItems.get(curPosition)).find(":first").attr("href"))) } else { autoPlayStart(); setTitle() } } } })(jQuery)