1// ----------------------------------------------------------------------- 2// [email protected] 3// showcase 1.0 4// 5// 27/07/2009 - Added asynchronous loading of images 6// 26/06/2009 - some new implementations 7// 19/06/2009 - standardization 8// 08/06/2009 - Initial sketch 9// 10// requires jQuery 1.3.x 11//------------------------------------------------------------------------ 12(function($) { 13 $.fn.showcase = function (options) { 14 var $container = this; 15 16 // Retrieve options 17 var opt; 18 opt = $.extend({}, $.fn.showcase.defaults, options); 19 if (options && options.animation) { 20 opt.animation = $.extend({}, $.fn.showcase.defaults.animation, options.animation); 21 if (!/horizontal-slider|vertical-slider|fade/.test(opt.animation.type)) 22 { 23 opt.animation.type = "horizontal-slider"; 24 } 25 } 26 if (options && options.navigator) { 27 opt.navigator = $.extend({}, $.fn.showcase.defaults.navigator, options.navigator); 28 29 if (!/top-left|top-right|bottom-left|bottom-right/.test(opt.navigator.position)) 30 { 31 opt.navigator.position = "bottom-right"; 32 } 33 34 if (!/horizontal|vertical/.test(opt.navigator.orientation)) 35 { 36 opt.navigator.position = "horizontal"; 37 } 38 39 if (options.navigator.item) { opt.navigator.item = $.extend({}, $.fn.showcase.defaults.navigator.item, options.navigator.item); } 40 } 41 if (options && options.titleBar) { 42 opt.titleBar = $.extend({}, $.fn.showcase.defaults.titleBar, options.titleBar); 43 if (options.titleBar.css) { opt.titleBar.css = $.extend({}, $.fn.showcase.defaults.titleBar.css, options.titleBar.css); } 44 } 45 46 // Check loading mode. 47 // If there's something in opt.images[], I'll load them asynchronously, 48 // it will be nice to have opt.width and opt.height setted, in order to define the $container sizes 49 if (opt.images.length != 0) { 50 $container.css({ width: opt.width, height: opt.height, overflow: "hidden" }); 51 for (var i in opt.images) { 52 var img = new Image(); 53 img.src = opt.images[i].url; 54 img.alt = opt.images[i].description || ""; 55 var $link = $("<a />").attr("href", opt.images[i].link || "#"); 56 $link.append(img); 57 $container.append($link); 58 } 59 } 60 61 // Check loading state of #1 image 62 if ($container.find("img:first")[0].complete) { 63 $.fn.showcase.start($container, opt); 64 } 65 else { 66 $container.find("img:first").load( function() { 67 $.fn.showcase.start($container, opt); 68 }); 69 } 70 } 71 72 $.fn.showcase.start = function($container, opt) { 73 // Define local vars 74 var index = 0; 75 var nImages = $container.find("img").length; 76 var $fi = $container.find("img:first"); 77 var imagesize = { width: $fi.removeAttr("width").width(), height: $fi.removeAttr("height").height() }; 78 79 $container.css({ position: "relative", 80 overflow: "hidden", 81 width: imagesize.width, 82 height: imagesize.height, 83 border: opt.border }) 84 .find("a").css({ position: "absolute", top: "0", left: "0" }) 85 .find("img").css("border", "0px"); 86 87 var $slider = $("<div id='slider' />").css({ position:"absolute" }); 88 var $divNavigator = $("<div id='navigator' />").css({ 89 position: "absolute", 90 "z-index": 1000, 91 border: opt.navigator.border, 92 padding: opt.navigator.padding 93 }); 94 95 switch (opt.navigator.position) 96 { 97 case "top-left": $divNavigator.css({ top: "5px", left: "5px" }); 98 break; 99 case "top-right": $divNavigator.css({ top: "5px", right: "5px" }); 100 break; 101 case "bottom-left": $divNavigator.css({ bottom: "5px", left: "5px" }); 102 break; 103 case "bottom-right": $divNavigator.css({ bottom: "5px", right: "5px" }); 104 break; 105 } 106 107 $container.find("a").wrapAll($slider).each( function(i) { 108 switch (opt.animation.type) 109 { 110 case "horizontal-slider": 111 $(this).css("left", i*imagesize.width); 112 break; 113 case "vertical-slider": 114 $(this).css("top", i*imagesize.height); 115 break; 116 case "fade": 117 $(this).css({ top: "0", left: "0", opacity:1, "z-index": 1000-i }); 118 break; 119 } 120
121 var $navElement = $("<a href='#'>" + (opt.navigator.showNumber ? (i + 1) : "") + "</a>") 122 .click( function() { 123 $.fn.showcase.showImage(i, $container, imagesize, opt); 124 index = i; 125 return false; 126 }).appendTo($divNavigator); 127 128 if (opt.navigator.item.cssClass) { $navElement.attr("class", opt.navigator.item.cssClass); } 129 else { 130 $.extend({}, $navElement.css, opt.navigator.item); 131 $navElement.css({ 132 display: "block", 133 color: opt.navigator.item.color, 134 "text-decoration": opt.navigator.item.textDecoration, 135 "-moz-outline-style": "none", 136 width: opt.navigator.item.width, 137 height: opt.navigator.item.height, 138 lineHeight: opt.navigator.item.lineHeight, 139 verticalAlign: opt.navigator.item.middle, 140 backgroundColor: opt.navigator.item.backgroundColor, 141 padding: opt.navigator.item.padding, 142 border: opt.navigator.item.border, 143 margin: opt.navigator.item.margin 144 }); 145 if (opt.navigator.item.borderRounded) { $navElement.css({ "
145-moz-border-radius": "4px", "-webkit-border-radius": "4px" }); } 146 switch (opt.navigator.orientation) 147 { 148 case "horizontal": 149 $navElement.css("float", "left"); 150 break; 151 case "vertical": 152 $navElement.css("float", "none"); 153 break; 154 } 155 } 156 157 if (opt.navigator.showMiniature) { 158 $("<img />").attr({ src: $(this).find("img").attr("src"), width: $navElement.css("width").replace("px", ""), height: $navElement.css("height").replace("px", ""), border: "0px" }).appendTo($navElement); 159 } 160 161 if (i == 0) { $navElement.css("background-color", opt.navigator.item.selectedCssClass ? "" : opt.navigator.item.selectedBGColor).addClass(opt.navigator.item.selectedCssClass); } 162 }); 163 164 if (opt.navigator.autoHide) { 165 $divNavigator.css("opacity", 0); 166 } 167 168 $container.append($divNavigator).hover( 169 function() { 170 if (opt.titleBar.autoHide) { 171 $($titleBar).stop().animate({ opacity: 0, left: 0, right: 0, height: "0px" }, 0); 172 if (opt.navigator.autoHide) { $($divNavigator).stop().animate({ opacity: 0 }, 0); } 173 } 174 175 $(this).data("isMouseHover", true); 176 }, 177 function() { 178 if (opt.titleBar.autoHide) { 179 $titleBar.stop().animate({ opacity: 0, height: "0px" }, 0); 180 if (opt.navigator.autoHide) { $divNavigator.stop().animate({ opacity: 0 }, 0); } 181 } 182 183 $(this).data("isMouseHover", false); 184 } 185 ); 186 187 var $titleBar = $("<div id='subBar' />") 188 .css({ 189 "z-index": 1002, 190 position: "absolute", 191 bottom: "0px", 192 opacity: (opt.titleBar.autoHide ? 0 : opt.titleBar.css.opacity), 193 "background-color": opt.titleBar.css.backgroundColor, 194 height: opt.titleBar.css.height, 195 width: "100%" }) 196 .html($("<span />").text($container.find("a:first img").attr("alt")) 197 .css({ color: opt.titleBar.css.fontColor, 198 fontStyle: opt.titleBar.css.fontStyle, 199 fontSize: opt.titleBar.css.fontSize, 200 fontWeight: opt.titleBar.css.fontWeight, 201 lineHeight: opt.titleBar.css.height, 202 paddingLeft: "5px", 203 "vertical-align": "middle" }) 204 ); 205 if (opt.titleBar.cssClass) { $titleBar.attr("class", opt.titleBar.cssClass); } 206 $titleBar.appendTo($container); 207 208 if (opt.animation.autoCycle) { 209 setInterval( function() { 210 if (!$container.data("isMouseHover") || !opt.animation.stopOnHover) 211 $.fn.showcase.showImage(++index % nImages, $container, imagesize, opt); 212 }, opt.animation.interval); 213 } 214 } 215 216 $.fn.showcase.showImage = function(i, $container, imagesize, opt) { 217 var $a = $container.find("a"); 218 switch (opt.animation.type) 219 { 220 case "horizontal-slider": $container.find("#slider").animate({ left: - (i*imagesize.width) }, opt.animation.speed, opt.animation.easefunction); 221 break; 222 case "vertical-slider": $container.find("#slider").animate({ top: - (i*imagesize.height) }, opt.animation.speed, opt.animation.easefunction); 223 break; 224 case "fade": 225 $container.css({ "z-index": "1001" }); 226 if ($a.eq(i).css("z-index") != "1000") 227 {
228 $a.eq(i).css({ "z-index": "1000", opacity: 0 }); 229 230 $a.not($container.find("a").eq(i)).each( function() { 231 if ($(this).css("z-index") != "auto") 232 $(this).css("z-index", parseInt($(this).css("z-index"), 10) - 1); 233 }); 234 235 $a.eq(i).animate({ opacity: 1 }, opt.animation.speed, opt.animation.easefunction); 236 } 237 break; 238 } 239 240 $container.find("#subBar span").text($a.eq(i).find("img").attr("alt")); 241 $container.find("#navigator a").css("background-color", opt.navigator.item.cssClass ? "" : opt.navigator.item.backgroundColor).removeClass(opt.navigator.item.selectedCssClass) 242 .eq(i).css("background-color", opt.navigator.item.selectedCssClass ? "" : opt.navigator.item.selectedBGColor).addClass(opt.navigator.item.selectedCssClass); 243 }; 244 245 $.fn.showcase.defaults = { 246 images: [], 247 width: "", 248 height: "", 249 animation: { autoCycle: true, 250 stopOnHover: true, 251 interval: 4000, 252 speed: 500, 253 easefunction: "swing", 254 type: "horizontal-slider" }, 255 navigator: { position: "bottom-right", 256 orientation: "horizontal", 257 autoHide: false, 258 showNumber: false, 259 showMiniature: false, 260 border: "none", 261 padding: "0px 0px 5px 0px", 262 item: { cssClass: null, 263 selectedCssClass: null, 264 selectedBGColor: "#990000", 265 color: "#000000", 266 textDecoration: "none", 267 width: "12px", 268 height: "12px", 269 lineHeight: "12px", 270 verticalAlign: "middle", 271 backgroundColor: "#cdcdcd", 272 padding: "1px", 273 margin: "0px 5px 0px 0px", 274 borderRounded: false } 275 }, 276 titleBar: { autoHide: true, 277 cssClass: null, 278 css: { opacity: 0.75, 279 backgroundColor: "#ffffff", 280 height: "48px", 281 fontColor: "#444444", 282 fontStyle: "italic", 283 fontWeight: "bold", 284 fontSize: "1em" } } 285 }; 286 287})(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.