1/* 2 * Easy Slider 1.5 - jQuery plugin 3 * written by Alen Grakalic 4 * http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding 5 * 6 * Copyright (c) 2009 Alen Grakalic (http://cssglobe.com) 7 * Dual licensed under the MIT (MIT-LICENSE.txt) 8 * and GPL (GPL-LICENSE.txt) licenses. 9 * 10 * Built for jQuery library 11 * http://jquery.com 12 * 13 */ 14 15/* 16 * markup example for $("#slider").easySlider(); 17 * 18 * <div id="slider"> 19 * <ul> 20 * <li><img src="images/01.jpg" alt="" /></li> 21 * <li><img src="images/02.jpg" alt="" /></li> 22 * <li><img src="images/03.jpg" alt="" /></li> 23 * <li><img src="images/04.jpg" alt="" /></li> 24 * <li><img src="images/05.jpg" alt="" /></li> 25 * </ul> 26 * </div> 27 * 28 */ 29 30(function($) { 31 32 $.fn.easySlider = function(options){ 33 34 // default configuration properties 35 var defaults = { 36 prevId: 'prevBtn', 37 prevText: 'Previous', 38 nextId: 'nextBtn', 39 nextText: 'Next', 40 controlsShow: true, 41 controlsBefore: '', 42 controlsAfter: '', 43 controlsFade: false, 44 firstId: 'firstBtn', 45 firstText: 'First', 46 firstShow: true, 47 48 /* ADD SLIDE */ 49 secondId: '2Btn', 50 thirdId: '3Btn', 51 /* END ADD SLIDE */ 52 53 54 lastId: 'lastBtn', 55 lastText: 'Last', 56 lastShow: true, 57 vertical: false, 58 speed: 1, 59 auto: true, 60 pause: 5000, 61 continuous: true, 62 fadeLayer: true, 63 fadeOutSpeed:500, /*slow, normal, fast or milisec*/ 64 fadeInSpeed:500, 65 opacity: 0.4 66 }; 67 68 var options = $.extend(defaults, options); 69 70 this.each(function() { 71 var obj = $(this); 72 var s = $("li", obj).length; 73 var w = $("li", obj).width(); 74 var h = $("li", obj).height(); 75 obj.width("auto"); 76 obj.height("auto"); 77 obj.css("overflow","hidden"); 78 var ts = s-1; 79 var t = 0; 80 81 82 if(!options.vertical) $("li", obj).css('float','left'); 83 84 $("li", obj).css('display','none'); 85 $("li:first",obj).css('display','block'); 86 87 if(options.controlsShow){ 88 var html = options.controlsBefore; 89 html += createHtmlForControls(); 90 if(options.firstShow) 91 92 /*html += '<span id="'+ options.firstId +'"><a href=\"javascript:void(0);\">'+ options.firstText +'</a></span>';*/ 93 /* 94 html += ' <span id="'+ options.prevId +'"><a href=\"javascript:void(0);\">'+ options.prevText +'</a></span>'; 95 html += ' <span id="'+ options.nextId +'"><a href=\"javascript:void(0);\">'+ options.nextText +'</a></span>'; 96 */ 97 /*if(options.lastShow) html += ' <span id="'+ options.lastId +'"><a href=\"javascript:void(0);\">'+ options.lastText +'</a></span>';*/ 98 99 100 html += options.controlsAfter; 101 $(obj).after(html); 102 makeThemClickable(); 103 }; 104 105 106 $("a","#"+options.nextId).click(function(){ 107 animate("next",true); 108 }); 109 $("a","#"+options.prevId).click(function(){ 110 animate("prev",true); 111 }); 112 $("a","#"+options.firstId).click(function(){ 113 animate("first",true); 114 }); 115 $("a","#"+options.lastId).click(function(){ 116 animate("last",true); 117 }); 118 119 /* ADD SLIDE */ 120 $("a","#"+options.secondId).click(function(){ 121 animate(1,true); 122 }); 123 $("a","#"+options.thirdId).click(function(){ 124 animate(2,true); 125 }); 126 /* END ADD SLIDE */ 127 128 function animate(dir,clicked){ 129 var ot = t; 130 switch(dir){ 131 case "next": 132 t = (ot>=ts) ? (options.continuous ? 0 : ts) : t+1; 133 break; 134 case "prev": 135 t = (t<=0) ? (options.continuous ? ts : 0) : t-1; 136 break; 137 case "first": 138 t = 0; 139 break; 140 case "last": 141 t = ts; 142 break; 143 default: 144 t = dir; 145 break; 146 }; 147 148 var diff = Math.abs(ot-t); 149 var speed = diff*options.speed; 150 if(!options.vertical) { 151 p = (t*w*-1); 152 153 154 /*$("ul",obj).animate( 155 { marginLeft: p }, 156 speed 157 ); 158 */ 159 $("ul",obj).animate({opacity: options.opacity}, options.fadeInSpeed); 160 setTimeout(function(){ 161 $("li:eq("+ot+")",obj).css("display", "none"); 162 $("li:eq("+t+")",obj).css("display", "block"); 163 },options.fadeInSpeed+100); 164 165 /*$("ul",obj).css("marginLeft", p);*/ 166 $("ul",obj).animate({opacity: 1}, options.fadeOutSpeed); 167 } else { 168 p = (t*h*-1); 169 $("ul",obj).animate( 170 { marginTop: p }, 171 speed 172 ); 173 }; 174 175 if(!options.continuous && options.controlsFade){ 176 if(t==ts){ 177 $("a","#"+options.nextId).hide(); 178 $("a","#"+options.lastId).hide(); 179 } else { 180 $("a","#"+options.nextId).show(); 181 $("a","#"+options.lastId).show(); 182 }; 183 if(t==0){ 184 $("a","#"+options.prevId).hide(); 185 $("a","#"+options.firstId).hide(); 186 } else { 187 $("a","#"+options.prevId).show(); 188 $("a","#"+options.firstId).show(); 189 }; 190 }; 191 192 if(clicked) 193 { 194 clearTimeout(timeout); 195 timeout = setTimeout(function(){ 196 animate("next",false); 197 },diff*options.speed+options.pause); 198 } 199 if(options.auto && dir=="next" && !clicked){; 200 timeout = setTimeout(function(){ 201 animate("next",false); 202 },diff*options.speed+options.pause); 203 }; 204 205 206 $("#position").html(createHtmlForControls()); 207 makeThemClickable(); 208 }; 209 // init 210 var timeout; 211 if(options.auto){; 212 timeout = setTimeout(function(){ 213 animate("next",false); 214 },options.pause); 215 }; 216 217 if(!options.continuous && options.controlsFade){ 218 $("a","#"+options.prevId).hide(); 219 $("a","#"+options.firstId).hide(); 220 }; 221 222 223 function createHtmlForControls(){ 224 var inHtml = ''; 225 var hidden = '<span class="slider_hidden" id="goto'; //src="/images/banner/Main Page/components/hidden.png" 226 var showing = '<span class="slider_showing" id="goto'; //src="/images/banner/Main Page/components/showing.png" 227 var j = 0; 228 for (var i = 0;i<t;i++){ 229 inHtml += hidden + j + '"></span>'; 230 j++; 231 }
232 inHtml += showing + j + '"></span>'; 233 j++; 234 for (var i = 0;i<ts-t;i++){ 235 inHtml += hidden + j + '"></span>'; 236 j++; 237 } 238 return inHtml; 239 } 240 241 function makeThemClickable(){ 242 for (var i = 0; i <= ts; i++) { 243 (function(i) { 244 $('#goto' + i).click(function() {animate(i, true);}); 245 })(i); 246 } 247 } 248 249 250 251 }); 252 }; 253 254})(jQuery); 255 256$(document).ready(function(){ 257 $("#slider").easySlider({ 258 controlsBefore: '<span id="position">', 259 controlsAfter: '</span>', 260 auto: true, 261 continuous: true, 262 controlsShow: true 263 }); 264 s = $("li", $("#slider")).length; 265 w = parseInt($(".showing").css('padding-left')); 266 $('#position').css('width', s*w); 267}); 268 269
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.