(function ($) { $.fn.propSlider = function (options) { var defaults = { viewer: '.scroll', scroller: '.scrollContainer', panelClass: '.panel', origImgWidth: 155, largeWidth: 270, largeImgWidth: 250, largeTitleSize: "20px", largeParSize: "12px", startPanel: 3 }; var options = $.extend(defaults, options); return this.each(function () { var $slider = $(this); var $scroll = $(options.viewer, $slider); var $panel = $(options.panelClass, $slider); var $container = $(options.scroller, $slider); var $panels = $container.children($panel); var totalPanels = $panels.size(); var movingDistance = options.origImgWidth; var curWidth = options.largeWidth; var curImgWidth = options.largeImgWidth; var curTitleSize = options.largeTitleSize; var curParSize = options.largeParSize; var curPanel = options.startPanel; var regWidth = $panel.css("width"); var regImgWidth = $panel.find("img").css("width"); var regTitleSize = $panel.find("h4").css("font-size"); var regParSize = $panel.find("p").css("font-size"); var leftShift = "-" + ((curPanel - 2) * movingDistance) + "px"; $slider.data("currentlyMoving", false); $container.css('width', ($panels[0].offsetWidth * $panels.length) + 300).css('left', leftShift); function returnToNormal(element) { $(element).animate({ width: regWidth }).find("img").animate({ width: regImgWidth }).end().find("h4").animate({ fontSize: regTitleSize }).slideUp().end().find("p").animate({ fontSize: regParSize }).slideUp() }; function growBigger(element) { $(element).animate({ width: curWidth }).find("img").animate({ width: curImgWidth }).end().find("h4").animate({ fontSize: curTitleSize }).slideDown().end().find("p").animate({ fontSize: curParSize }).slideDown() } function change(direction) { if ((direction && !(curPanel < totalPanels)) || (!direction && (curPanel <= 1))) { return false } if (($slider.data("currentlyMoving") == false)) { $slider.data("currentlyMoving", true); var next = direction ? curPanel + 1 : curPanel - 1; var leftValue = $container.css("left"); var movement = direction ? parseFloat(leftValue, 10) - movingDistance : parseFloat(leftValue, 10) + movingDistance; $container.stop().animate({ "left": movement }, function () { $slider.data("currentlyMoving", false) }); returnToNormal("#panel_" + curPanel); growBigger("#panel_" + next); curPanel = next; $("#panel_" + (curPanel + 1)).unbind(); $("#panel_" + (curPanel + 1)).click(function () { change(true) }); $("#panel_" + (curPanel - 1)).unbind(); $("#panel_" + (curPanel - 1)).click(function () { change(false) }); $("#panel_" + curPanel).unbind() } } var curPanelId = ("#panel_") + curPanel; growBigger(curPanelId); $("#panel_" + (curPanel + 1)).click(function () { change(true) }); $("#panel_" + (curPanel - 1)).click(function () { change(false) }); $(".right").click(function () { change(true) }); $(".left").click(function () { change(false) }); $(window).keydown(function (event) { switch (event.keyCode) { case 13: $(".right").click(); break; case 32: $(".right").click(); break; case 37: $(".left").click(); break; case 39: $(".right").click(); break } }) }) } })(jQuery);