(function ($) { $.fn.verticaltabs = function (options) { var defaults = { speed: 500, slideShow: false, slideShowSpeed: 1000, activeIndex: 0, playPausePos: "bottomRight", pauseOnHover: false }; var options = $.extend(defaults, options); return this.each(function () { var verticaltabs = $(this); var tabs = $(verticaltabs).children(".verticalslider_tabs").children(); var contents = $(verticaltabs).children(".verticalslider_contents").children(); var sliderInterval; var arrowBlock = "<div class=\"arrow\">&nbsp;</div>"; var activeIndex = defaults.activeIndex; var slideShow = options.slideShow; var timeout; var totalHeight; $(contents[defaults.activeIndex]).addClass("activeContent"); $(tabs[activeIndex]).addClass("activeTab").append(arrowBlock); totalHeight = $(tabs).length * $(".verticalslider_tabs a").outerHeight(); $(".verticalslider_contents li", verticaltabs).css({ height: totalHeight + "px" }); if (options.slideShow) { $(verticaltabs).children(".verticalslider_contents").append("<div class=\"playPause\"><div class=\"play\"><a href=\"#\"></a></div><div class=\"pause\"><a href=\"#\"></a></div></div>"); switch (options.playPausePos) { case "topRight": $(".verticalslider .playPause").css({ marginTop: "0px", marginLeft: $(".verticalslider_contents").width() - $(".verticalslider .playPause a").width() }); break; case "topLeft": $(".verticalslider .playPause").css({ marginTop: "0px", marginLeft: "0px" }); break; case "bottomRight": $(".verticalslider .playPause").css({ marginTop: totalHeight - $(".verticalslider .playPause a").height(), marginLeft: $(".verticalslider_contents").width() - $(".verticalslider .playPause a").width() }); break; case "bottomLeft": $(".verticalslider .playPause").css({ marginTop: totalHeight - $(".verticalslider .playPause a").height(), marginLeft: "0px" }); break } } $(".verticalslider_tabs a", verticaltabs).click(function () { if (!$(this).parent().hasClass("activeTab")) { activeIndex = $(this).parent().prevAll().length; switchContents(); if (slideShow) { clearTimeout(timeout); slideShow = false; $(".pause a", verticaltabs).css("display", "none"); $(".play a", verticaltabs).css("display", "block") } } return false }); $(".play, .pause", verticaltabs).click(function () { slideShow = !slideShow; $(".play a, .pause a", verticaltabs).toggle(); if (slideShow) { startSlideShow() } return false }); $(tabs).add(contents).hover(function () { if (options.pauseOnHover && slideShow) { slideShow = !slideShow } }, function () { if (options.pauseOnHover && !slideShow) { startSlideShow() } }); function switchContents() { $(".activeTab", verticaltabs).removeClass("activeTab"); $('.arrow', verticaltabs).remove(); $(tabs[activeIndex], verticaltabs).addClass("activeTab").append(arrowBlock); $(".activeContent", verticaltabs).fadeOut(options.speed, function () { var indexLiOut = $('.verticalslider_contents li').index(this); $('.verticalslider_tabs li').eq(indexLiOut).find('img').attr('src', 'img/' + $('.verticalslider_tabs li').eq(indexLiOut).find('img').attr('class') + '.jpg'); }).removeClass("activeContent"); $(contents[activeIndex], verticaltabs).fadeIn(options.speed, function () { var imgLoja = $('.verticalslider_tabs li').eq(activeIndex).find('img'); /**/imgLoja.attr('src', 'img/' + imgLoja.attr('class') + 'Cor.jpg'); }).addClass("activeContent") }; function startSlideShow() { slideShow = true; clearTimeout(timeout); timeout = setTimeout(function () { autoUpdate() }, options.speed + options.slideShowSpeed) } function autoUpdate() { if (slideShow) { activeIndex++; if (activeIndex == contents.length) { activeIndex = 0 } switchContents(); startSlideShow() } }; if (slideShow) { timeout = setTimeout(function () { autoUpdate() }, options.speed + options.slideShowSpeed) } }) } })(jQuery);