ui-dev/js/coda-slider.1.1.1.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 |
/* jQuery Coda-Slider v1.1 - http://www.ndoherty.com/coda-slider Copyright (c) 2007 Niall Doherty Inspired by the clever folks at http://www.panic.com/coda Many thanks to Gian Carlo Mingati. Coda-Slider is a heavily modified version of his slideViewer, which can be found at http://www.gcmingati.net/wordpress/wp-content/lab/jquery/imagestrip/imageslide-plugin.html Requirements: - jQuery 1.2 ... available via http://www.jquery.com - jQuery easing plugin (1.2) ... available via http://gsgd.co.uk/sandbox/jquery/easing/ - jQuery easing compatability plugin ... available via http://gsgd.co.uk/sandbox/jquery/easing/ - CSS included in index.html */ jQuery(function(){ jQuery("div.csw").prepend("<p class='loading'>Loading...<br /><img src='images/ajax-loader.gif' alt='loading...'/ ></p>"); }); var j = 0; jQuery.fn.codaSlider = function(settings) { settings = jQuery.extend({ easeFunc: "expoinout", easeTime: 750, toolTip: false }, settings); return this.each(function(){ var container = jQuery(this); // Remove the preloader gif... container.find("p.loading").remove(); // Self-explanatory... container.removeClass("csw").addClass("stripViewer"); // Get the width of a panel, set from CSS... var panelWidth = container.find("div.panel").width(); // panelCount gives us a count of the panels in the container... var panelCount = container.find("div.panel").size(); // Calculate the width of all the panels when lined up end-to-end... var stripViewerWidth = panelWidth*panelCount; // Use the above width to specify the CSS width for the panelContainer element... container.find("div.panelContainer").css("width" , stripViewerWidth); // Set the navWidth as a multiple of panelCount to account for margin-right on each li var navWidth = panelCount*2; // Specify the current panel. // If the loaded URL has a hash (cross-linking), we're going to use that hash to give the slider a specific starting position... if (location.hash && parseInt(location.hash.slice(1)) <= panelCount) { var cPanel = parseInt(location.hash.slice(1)); var cnt = - (panelWidth*(cPanel - 1)); jQuery(this).find("div.panelContainer").css({ left: cnt }); // Otherwise, we'll just set the current panel to 1... } else { var cPanel = 1; }; // Create appropriate nav container.each(function(i) { // Create the Left and Right arrows jQuery(this).before("<div class='stripNavL' id='stripNavL" + j + "'><a href='#'>Left</a><\/div>"); jQuery(this).after("<div class='stripNavR' id='stripNavR" + j + "'><a href='#'>Right</a><\/div>"); // Create the Tabs jQuery(this).before("<div class='stripNav' id='stripNav" + j + "'><ul><\/ul><\/div>"); jQuery(this).find("div.panel").each(function(n) { jQuery("div#stripNav" + j + " ul").append("<li class='tab" + (n+1) + "'><a href='#" + (n+1) + "'>" + jQuery(this).attr("title") + "<\/a><\/li>"); }); // Tab nav jQuery("div#stripNav" + j + " a").each(function(z) { // Figure out the navWidth by adding up the width of each li navWidth += jQuery(this).parent().width(); // What happens when a nav link is clicked jQuery(this).bind("click", function() { jQuery(this).addClass("current").parent().parent().find("a").not(jQuery(this)).removeClass("current"); // wow! var cnt = - (panelWidth*z); cPanel = z + 1; jQuery(this).parent().parent().parent().next().find("div.panelContainer").animate({ left: cnt}, settings.easeTime, settings.easeFunc); }); }); // Left nav jQuery("div#stripNavL" + j + " a").click(function(){ if (cPanel == 1) { var cnt = - (panelWidth*(panelCount - 1)); cPanel = panelCount; jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().parent().find("li:last a").addClass("current"); } else { cPanel -= 1; var cnt = - (panelWidth*(cPanel - 1)); jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().prev().find("a").addClass("current"); }; jQuery(this).parent().parent().find("div.panelContainer").animate({ left: cnt}, settings.easeTime, settings.easeFunc); // Change the URL hash (cross-linking)... location.hash = cPanel; return false; }); // Right nav jQuery("div#stripNavR" + j + " a").click(function(){ if (cPanel == panelCount) { var cnt = 0; cPanel = 1; jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().parent().find("a:eq(0)").addClass("current"); } else { var cnt = - (panelWidth*cPanel); cPanel += 1; jQuery(this).parent().parent().find("div.stripNav a.current").removeClass("current").parent().next().find("a").addClass("current"); }; jQuery(this).parent().parent().find("div.panelContainer").animate({ left: cnt}, settings.easeTime, settings.easeFunc); // Change the URL hash (cross-linking)... location.hash = cPanel; return false; }); // Same-page cross-linking jQuery("a.cross-link").click(function(){ jQuery(this).parents().find(".stripNav ul li a:eq(" + (parseInt(jQuery(this).attr("href").slice(1)) - 1) + ")").trigger('click'); }); // Set the width of the nav using the navWidth figure we calculated earlier. This is so the nav can be centred above the slider jQuery("div#stripNav" + j).css("width" , navWidth); // Specify which tab is initially set to "current". Depends on if the loaded URL had a hash or not (cross-linking). if (location.hash && parseInt(location.hash.slice(1)) <= panelCount) { jQuery("div#stripNav" + j + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current"); } else { jQuery("div#stripNav" + j + " a:eq(0)").addClass("current"); } }); j++; }); }; |