1(function($){ 2 $.fn.slideRule = function(options) { 3 4 var getImageControls = function(slideRule) { 5 if (slideRule.$srImageContainer.hasClass('active')) { 6 if (slideRule.currentIndex > 0) { 7 slideRule.$srImagePrev 8 .css('filter', 'alpha(opacity=75)') // Thanks IE! 9 .fadeIn(100); 10 } 11 12 if (slideRule.currentIndex + 1 !== slideRule.imgGroup.length) { 13 slideRule.$srImageNext 14 .css('filter', 'alpha(opacity=75)') 15 .fadeIn(100); 16 } 17 } 18 }; 19 20 var getThumbControls = function(slideRule) { 21 if (slideRule.$srThumbs.attr('scrollLeft') > 0) { 22 slideRule.$srThumbsPrev 23 .css('filter', 'alpha(opacity=75)') 24 .fadeIn(100); 25 } else { 26 slideRule.$srThumbsPrev 27 .fadeOut(100); 28 } 29 30 if (slideRule.$srThumbs.attr('scrollWidth') > slideRule.$srControls.width() && 31 slideRule.$srThumbs.attr('scrollLeft') + slideRule.$srControls.width() !== slideRule.$srThumbs.attr('scrollWidth')) { 32 slideRule.$srThumbsNext 33 .css('filter', 'alpha(opacity=75)') 34 .fadeIn(100); 35 } else { 36 slideRule.$srThumbsNext 37 .fadeOut(100); 38 } 39 }; 40 41 var prevThumbs = function(slideRule) { 42 slideRule.$srThumbs.animate({'scrollLeft': slideRule.$srThumbs.attr('scrollLeft') - slideRule.$srControls.width()}, 750, function() { 43 getThumbControls(slideRule); 44 }); 45 }; 46 47 var nextThumbs = function(slideRule) { 48 slideRule.$srThumbs.animate({'scrollLeft': slideRule.$srThumbs.attr('scrollLeft') + slideRule.$srControls.width()}, 750, function() { 49 getThumbControls(slideRule); 50 }); 51 }; 52 53 var prevImage = function(slideRule) { 54 slideRule.currentIndex = (slideRule.imgGroup.length + (slideRule.currentIndex -= 1)) % slideRule.imgGroup.length; 55 showImage(slideRule); 56 showActive(slideRule); 57 getImageControls(slideRule); 58 slideRule.$srThumbs.animate({'scrollLeft': slideRule.imgGroup[slideRule.currentIndex].thumbPositionLeft}, 750); 59 }; 60 61 var nextImage = function(slideRule) { 62 slideRule.currentIndex = (slideRule.currentIndex += 1) % slideRule.imgGroup.length; 63 showImage(slideRule); 64 showActive(slideRule); 65 getImageControls(slideRule); 66 slideRule.$srThumbs.animate({'scrollLeft': slideRule.imgGroup[slideRule.currentIndex].thumbPositionLeft}, 750); 67 }; 68 69 var showImage = function(slideRule) { 70 slideRule.$srImage.fadeOut(250, function() { 71 $(this) 72 .html(slideRule.imgGroup[slideRule.currentIndex].fullImage) 73 .fadeIn(250); 74 }); 75 }; 76 77 var showCaption = function(slideRule) { 78 if (slideRule.settings.showCaptions) { 79 slideRule.$srCaption.fadeOut(250, function() { 80 $(this) 81 .html(slideRule.imgGroup[slideRule.currentIndex].captionText) 82 .css('filter', 'alpha(opacity=75)') // Thanks IE! 83 .fadeIn(750); 84 }); 85 } else { 86 slideRule.$srCaption.hide(); 87 } 88 }; 89 90 var showActive = function(slideRule) { 91 $('img.active', slideRule.$srThumbs).removeClass('active'); 92 $('img:eq(' + slideRule.currentIndex + ')', slideRule.$srThumbs).addClass('active'); 93 }; 94 95 var startAutoPlay = function(slideRule) { 96 slideRule.intervalID = window.setInterval( 97 function() { 98 nextImage(slideRule); 99 showCaption(slideRule); 100 }, slideRule.settings.autoPlayInterval); 101 }; 102 103 var stopAutoPlay = function(slideRule) { 104 window.clearInterval(slideRule.intervalID); 105 }; 106 107 return this.each(function() { 108 109 var slideRule = { 110 currentIndex: 0, 111 init: true, 112 imgGroup: [], 113 settings: $.extend({ 114 showThumbs: true, 115 showAutoPlayControl: true, 116 showCaptionControl: false, 117 autoPlayInterval: 6000, 118 showCaptions: true 119 }, options || {}) 120 }; 121 122 // Add slideRule group base class if needed 123 if (!$(this).hasClass('srGroup')) { 124 $(this).addClass('srGroup'); 125 } 126 127 slideRule.thumbsUL = $('ul', this).remove(); 128 129 $('li', slideRule.thumbsUL).each( function(i) { 130 var imgTemp = new Image(); 131 imgTemp.src = $('a', this).attr('href'); 132 $(this).attr('id', i); 133 slideRule.imgGroup[i] = { 134 captionText: $('span', this).html(), 135 fullImage: imgTemp 136 }; 137 $(this).click( function() { 138 slideRule.currentIndex = i; 139 showImage(slideRule); 140 showCaption(slideRule); 141 showActive(slideRule); 142 }); 143 }); 144 145 // No need for spans and anchors anymore 146 $('span', slideRule.thumbsUL).remove(); 147 $('img', slideRule.thumbsUL).unwrap(); 148 149 $(this).html('<div id="srFrame"><div id="srImageContainer"><span id="srImagePrev"></span><span id="srImageNext"></span><div id="srImage"></div><div id="srCaption"></div></div><div id="srControls"><div id="srThumbsPrev" class="nav"> </div><div id="srThumbsNext" class="nav"> </div><div id="srThumbs"></div></div></div>'); 150 151 // Store element references 152 slideRule.$srGroup = $(this); 153 slideRule.$srFrame = $(this).find('#srFrame'); 154 slideRule.$srImage = $(this).find('#srImage'); 155 slideRule.$srImagePrev = $(this).find('#srImagePrev'); 156 slideRule.$srImageNext = $(this).find('#srImageNext'); 157 slideRule.$srImageContainer = $(this).find('#srImageContainer'); 158 slideRule.$srControls = $(this).find('#srControls'); 159 slideRule.$srThumbsPrev = $(this).find('#srThumbsPrev'); 160 slideRule.$srThumbsNext = $(this).find('#srThumbsNext'); 161 slideRule.$srThumbs = $(this).find('#srThumbs'); 162 slideRule.$srCaption = $(this).find('#srCaption'); 163 164 if (slideRule.settings.showThumbs) { 165 slideRule.$srThumbs.html(slideRule.thumbsUL);
166 } 167 168 // Webkit browsers need to wait until window.load 169 // before image properties are accurate 170 $(window).load( function() { 171 var firstImg = slideRule.imgGroup[0].fullImage; 172 173 slideRule.$srImage.html(firstImg); 174 var firstImgHeight = $(firstImg).height(), 175 firstImgWidth = $(firstImg).width(); 176 177 178 slideRule.$srImage.add(slideRule.$srImageContainer).css({ 179 'height': firstImgHeight, 180 'width': firstImgWidth 181 }); 182 183 slideRule.$srFrame.add(slideRule.$srThumbs).css({'width': firstImgWidth}); 184 185 slideRule.$srGroup.css({'width': slideRule.$srFrame.outerWidth()}); 186 187 slideRule.$srImageContainer.hover( 188 function() { 189 $(this).addClass('active'); 190 getImageControls(slideRule); 191 }, 192 function() { 193 $(this).removeClass('active'); 194 slideRule.$srImageNext 195 .fadeOut(100); 196 slideRule.$srImagePrev 197 .fadeOut(100); 198 }); 199 200 slideRule.$srControls.hover( 201 function() { 202 getThumbControls(slideRule); 203 }, 204 function() { 205 slideRule.$srThumbsNext 206 .fadeOut(100); 207 slideRule.$srThumbsPrev 208 .fadeOut(100); 209 } 210 ); 211 212 $('li', slideRule.thumbsUL).each( function(i) { 213 slideRule.imgGroup[i].thumbPositionLeft = $(this).position().left; 214 }); 215 216 slideRule.$srThumbsPrev.click(function() {prevThumbs(slideRule);}); 217 slideRule.$srThumbsNext.click(function() {nextThumbs(slideRule);}); 218 219 slideRule.$srImagePrev.click(function() { 220 prevImage(slideRule); 221 showCaption(slideRule); 222 }); 223 slideRule.$srImageNext.click(function() { 224 nextImage(slideRule); 225 showCaption(slideRule) 226 }); 227 228 slideRule.$srControls.width(firstImgWidth); 229 slideRule.$srCaption.width(firstImgWidth - 10); 230 231 slideRule.$srCaption.css('bottom', 0); 232 slideRule.$srControls.css('margin-top', '4px'); 233 234 showCaption(slideRule); 235 236 // Vertically center image prev/next controls 237 slideRule.$srImagePrev.add(slideRule.$srImageNext).css('top', (firstImgHeight / 2) - ($(slideRule.$srImageNext).height() / 2)); 238 239 slideRule.$srThumbsPrev.add(slideRule.$srThumbsNext).css('height', $('img', slideRule.$srThumbs).height()); 240 241 showActive(slideRule); 242 243 if (slideRule.settings.showAutoPlayControl || slideRule.settings.showCaptionControl) { 244 var $toggleLink = slideRule.$srGroup.append('<div id="toggleLink"></div>').find('#toggleLink'); 245 246 if (slideRule.settings.showCaptionControl && slideRule.settings.showCaptions) { 247 $toggleLink.append('<a id="toggleCaption">Hide Captions</a>'); 248 $('a#toggleCaption', $toggleLink).toggle( 249 function() { 250 slideRule.settings.showCaptions = false; 251 slideRule.$srCaption.fadeOut(250); 252 $(this).html('Show Captions'); 253 }, 254 function() { 255 slideRule.settings.showCaptions = true; 256 showCaption(slideRule); 257 $(this).html('Hide Captions'); 258 } 259 ); 260 } 261 262 if (slideRule.settings.showAutoPlayControl) { 263 $toggleLink.append('<a id="toggleSlide">Start Autoplay</a>'); 264 $('a#toggleSlide', $toggleLink).toggle( 265 function() { 266 slideRule.$srImageContainer.removeClass('active'); 267 nextImage(slideRule); 268 showCaption(slideRule); 269 startAutoPlay(slideRule); 270 $(this).html('Stop Autoplay'); 271 } 272 ); 273 } 274 275 } 276 277 }); 278 279 }); 280 281 } 282})(jQuery);
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.