Advertisement
Guest User

Jshmf

a guest
May 3rd, 2012
57
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /*
  2.     jQuery Coda-Slider v2.0 - http://www.ndoherty.biz/coda-slider
  3.     Copyright (c) 2009 Niall Doherty
  4.     This plugin available for use in all personal or commercial projects under both MIT and GPL licenses.
  5. */
  6.  
  7. $(function(){
  8.     // Remove the coda-slider-no-js class from the body
  9.     $("body").removeClass("coda-slider-no-js");
  10.     $("input").removeClass("no-js");
  11.     // Preloader
  12.     $(".coda-slider").children('.panel').hide().end().prepend('<p class="loading">Loading...<br /><img src="images/ajax-loader.gif" alt="loading..." /></p>');
  13. });
  14.  
  15. var sliderCount = 1;
  16.  
  17. $.fn.codaSlider = function(settings) {
  18.  
  19.     settings = $.extend({
  20.         autoHeight: true,
  21.         autoHeightEaseDuration: 1000,
  22.         autoHeightEaseFunction: "easeInOutExpo",
  23.         autoSlide: false,
  24.         autoSlideInterval: 7000,
  25.         autoSlideStopWhenClicked: true,
  26.         crossLinking: true,
  27.         dynamicArrows: true,
  28.         dynamicArrowLeftText: "&#171; left",
  29.         dynamicArrowRightText: "right &#187;",
  30.         dynamicTabs: true,
  31.         dynamicTabsAlign: "center",
  32.         dynamicTabsPosition: "top",
  33.         externalTriggerSelector: "a.xtrig",
  34.         firstPanelToLoad: 1,
  35.         panelTitleSelector: "h2.title",
  36.         slideEaseDuration: 1000,
  37.         slideEaseFunction: "easeInOutExpo"
  38.     }, settings);
  39.    
  40.     return this.each(function(){
  41.        
  42.         // Uncomment the line below to test your preloader
  43.         // alert("Testing preloader");
  44.        
  45.         var slider = $(this);
  46.        
  47.         // If we need arrows
  48.         if (settings.dynamicArrows) {
  49.             slider.parent().addClass("arrows");
  50.             slider.before('<div class="coda-nav-left" id="coda-nav-left-' + sliderCount + '"><a href="#">' + settings.dynamicArrowLeftText + '</a></div>');
  51.             slider.after('<div class="coda-nav-right" id="coda-nav-right-' + sliderCount + '"><a href="#">' + settings.dynamicArrowRightText + '</a></div>');
  52.         };
  53.        
  54.         var panelWidth = slider.find(".panel").width();
  55.         var panelCount = slider.find(".panel").size();
  56.         var panelContainerWidth = panelWidth*panelCount;
  57.         var navClicks = 0; // Used if autoSlideStopWhenClicked = true
  58.        
  59.         // Surround the collection of panel divs with a container div (wide enough for all panels to be lined up end-to-end)
  60.         $('.panel', slider).wrapAll('<div class="panel-container"></div>');
  61.         // Specify the width of the container div (wide enough for all panels to be lined up end-to-end)
  62.         $(".panel-container", slider).css({ width: panelContainerWidth });
  63.        
  64.         // Specify the current panel.
  65.         // If the loaded URL has a hash (cross-linking), we're going to use that hash to give the slider a specific starting position...
  66.         if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
  67.             var currentPanel = parseInt(location.hash.slice(1));
  68.             var offset = - (panelWidth*(currentPanel - 1));
  69.             $('.panel-container', slider).css({ marginLeft: offset });
  70.         // If that's not the case, check to see if we're supposed to load a panel other than Panel 1 initially...
  71.         } else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) {
  72.             var currentPanel = settings.firstPanelToLoad;
  73.             var offset = - (panelWidth*(currentPanel - 1));
  74.             $('.panel-container', slider).css({ marginLeft: offset });
  75.         // Otherwise, we'll just set the current panel to 1...
  76.         } else {
  77.             var currentPanel = 1;
  78.         };
  79.            
  80.         // Left arrow click
  81.         $("#coda-nav-left-" + sliderCount + " a").click(function(){
  82.             navClicks++;
  83.             if (currentPanel == 1) {
  84.                 offset = - (panelWidth*(panelCount - 1));
  85.                 alterPanelHeight(panelCount - 1);
  86.                 currentPanel = panelCount;
  87.                 slider.siblings('.coda-nav').find('a.current').removeClass('current').parents('ul').find('li:last a').addClass('current');
  88.             } else {
  89.                 currentPanel -= 1;
  90.                 alterPanelHeight(currentPanel - 1);
  91.                 offset = - (panelWidth*(currentPanel - 1));
  92.                 slider.siblings('.coda-nav').find('a.current').removeClass('current').parent().prev().find('a').addClass('current');
  93.             };
  94.             $('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
  95.             if (settings.crossLinking) { location.hash = currentPanel }; // Change the URL hash (cross-linking)
  96.             return false;
  97.         });
  98.            
  99.         // Right arrow click
  100.         $('#coda-nav-right-' + sliderCount + ' a').click(function(){
  101.             navClicks++;
  102.             if (currentPanel == panelCount) {
  103.                 offset = 0;
  104.                 currentPanel = 1;
  105.                 alterPanelHeight(0);
  106.                 slider.siblings('.coda-nav').find('a.current').removeClass('current').parents('ul').find('a:eq(0)').addClass('current');
  107.             } else {
  108.                 offset = - (panelWidth*currentPanel);
  109.                 alterPanelHeight(currentPanel);
  110.                 currentPanel += 1;
  111.                 slider.siblings('.coda-nav').find('a.current').removeClass('current').parent().next().find('a').addClass('current');
  112.             };
  113.             $('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
  114.             if (settings.crossLinking) { location.hash = currentPanel }; // Change the URL hash (cross-linking)
  115.             return false;
  116.         });
  117.        
  118.         // If we need a dynamic menu
  119.         if (settings.dynamicTabs) {
  120.             var dynamicTabs = '<div class="coda-nav" id="coda-nav-' + sliderCount + '"><ul></ul></div>';
  121.             switch (settings.dynamicTabsPosition) {
  122.                 case "bottom":
  123.                     slider.parent().append(dynamicTabs);
  124.                     break;
  125.                 default:
  126.                     slider.parent().prepend(dynamicTabs);
  127.                     break;
  128.             };
  129.             ul = $('#coda-nav-' + sliderCount + ' ul');
  130.             // Create the nav items
  131.             $('.panel', slider).each(function(n) {
  132.                 ul.append('<li class="tab' + (n+1) + '"><a href="#' + (n+1) + '">' + $(this).find(settings.panelTitleSelector).text() + '</a></li>');                                              
  133.             });
  134.             navContainerWidth = slider.width() + slider.siblings('.coda-nav-left').width() + slider.siblings('.coda-nav-right').width();
  135.             ul.parent().css({ width: navContainerWidth });
  136.             switch (settings.dynamicTabsAlign) {
  137.                 case "center":
  138.                     ul.css({ width: ($("li", ul).width() + 2) * panelCount });
  139.                     break;
  140.                 case "right":
  141.                     ul.css({ float: 'right' });
  142.                     break;
  143.             };
  144.         };
  145.            
  146.         // If we need a tabbed nav
  147.         $('#coda-nav-' + sliderCount + ' a').each(function(z) {
  148.             // What happens when a nav link is clicked
  149.             $(this).bind("click", function() {
  150.                 navClicks++;
  151.                 $(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current');
  152.                 offset = - (panelWidth*z);
  153.                 alterPanelHeight(z);
  154.                 currentPanel = z + 1;
  155.                 $('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
  156.                 if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
  157.             });
  158.         });
  159.        
  160.         // External triggers (anywhere on the page)
  161.         $(settings.externalTriggerSelector).each(function() {
  162.             // Make sure this only affects the targeted slider
  163.             if (sliderCount == parseInt($(this).attr("rel").slice(12))) {
  164.                 $(this).bind("click", function() {
  165.                     navClicks++;
  166.                     targetPanel = parseInt($(this).attr("href").slice(1));
  167.                     offset = - (panelWidth*(targetPanel - 1));
  168.                     alterPanelHeight(targetPanel - 1);
  169.                     currentPanel = targetPanel;
  170.                     // Switch the current tab:
  171.                     slider.siblings('.coda-nav').find('a').removeClass('current').parents('ul').find('li:eq(' + (targetPanel - 1) + ') a').addClass('current');
  172.                     // Slide
  173.                     $('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
  174.                     if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
  175.                 });
  176.             };
  177.         });
  178.            
  179.         // Specify which tab is initially set to "current". Depends on if the loaded URL had a hash or not (cross-linking).
  180.         if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
  181.             $("#coda-nav-" + sliderCount + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current");
  182.         // If there's no cross-linking, check to see if we're supposed to load a panel other than Panel 1 initially...
  183.         } else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) {
  184.             $("#coda-nav-" + sliderCount + " a:eq(" + (settings.firstPanelToLoad - 1) + ")").addClass("current");
  185.         // Otherwise we must be loading Panel 1, so make the first tab the current one.
  186.         } else {
  187.             $("#coda-nav-" + sliderCount + " a:eq(0)").addClass("current");
  188.         };
  189.        
  190.         // Set the height of the first panel
  191.         if (settings.autoHeight) {
  192.             panelHeight = $('.panel:eq(' + (currentPanel - 1) + ')', slider).height();
  193.             slider.css({ height: panelHeight });
  194.         };
  195.        
  196.         // Trigger autoSlide
  197.         if (settings.autoSlide) {
  198.             slider.ready(function() {
  199.                 setTimeout(autoSlide,settings.autoSlideInterval);
  200.             });
  201.         };
  202.        
  203.         function alterPanelHeight(x) {
  204.             if (settings.autoHeight) {
  205.                 panelHeight = $('.panel:eq(' + x + ')', slider).height()
  206.                 slider.animate({ height: panelHeight }, settings.autoHeightEaseDuration, settings.autoHeightEaseFunction);
  207.             };
  208.         };
  209.        
  210.         function autoSlide() {
  211.             if (navClicks == 0 || !settings.autoSlideStopWhenClicked) {
  212.                 if (currentPanel == panelCount) {
  213.                     var offset = 0;
  214.                     currentPanel = 1;
  215.                 } else {
  216.                     var offset = - (panelWidth*currentPanel);
  217.                     currentPanel += 1;
  218.                 };
  219.                 alterPanelHeight(currentPanel - 1);
  220.                 // Switch the current tab:
  221.                 slider.siblings('.coda-nav').find('a').removeClass('current').parents('ul').find('li:eq(' + (currentPanel - 1) + ') a').addClass('current');
  222.                 // Slide:
  223.                 $('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
  224.                 setTimeout(autoSlide,settings.autoSlideInterval);
  225.             };
  226.         };
  227.        
  228.         // Kill the preloader
  229.         $('.panel', slider).show().end().find("p.loading").remove();
  230.         slider.removeClass("preload");
  231.        
  232.         sliderCount++;
  233.        
  234.     });
  235. };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement