1/** 2 * Galleria (http://monc.se/kitchen) 3 * 4 * Galleria is a javascript image gallery written in jQuery. 5 * It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. 6 * It will create thumbnails for you if you choose so, scaled or unscaled, 7 * centered and cropped inside a fixed thumbnail box defined by CSS. 8 * 9 * The core of Galleria lies in it's smart preloading behaviour, snappiness and the fresh absence 10 * of obtrusive design elements. Use it as a foundation for your custom styled image gallery. 11 * 12 * MAJOR CHANGES v.FROM 0.9 13 * Galleria now features a useful history extension, enabling back button and bookmarking for each image. 14 * The main image is no longer stored inside each list item, instead it is placed inside a container 15 * onImage and onThumb functions lets you customize the behaviours of the images on the site 16 * 17 * Tested in Safari 3, Firefox 2, MSIE 6, MSIE 7, Opera 9 18 * 19 * Version 1.0 20 * Februari 21, 2008 21 * 22 * Copyright (c) 2008 David Hellsing (http://monc.se) 23 * Licensed under the GPL licenses. 24 * http://www.gnu.org/licenses/gpl.txt 25 **/ 26 27/********************************************************************* 28MODIFIED TO WORK WITH WORDPRESS 29 30What was changed? 31* The addition of the first line of code '$j=jQuery.noConflict();' and 32* I manually went through and replaced all '$' jQuery references with 33* '$j'. Also, removed '(jQuery)' which was tacked on to the end of 34* the main (currently line 400, there is also a note there). 35* Nothing else was changed. 36 37* Note that the jQuery history plugin (at the end of this file) 38* is already using 'jQuery' rather than '$'. I made no changes to the 39* plugin, nor did I test the plugin. 40 41Why was it changed? 42* Addition of noConflict() @jQuery to prevent problems using Galleria 43* in Wordpress (when using jQuery in Wordpress' core) and also to 44* prevent potential problems when other JS libraries are being used, 45* such as Prototype. 46 47Changes made on July 30, 2009 48* by Matthew Pavkov - http://www.matthewpavkov.com 49 50References and thanks to 51* @http://docs.jquery.com/Using_jQuery_with_Other_Libraries 52* @http://wordpress.org/support/topic/141394 53*********************************************************************/ 54 55$j=jQuery.noConflict(); 56 57 58$j(function(){ 59 60/** 61 * 62 * @desc Convert images from a simple html <ul> into a thumbnail gallery 63 * @author David Hellsing 64 * @version 1.0 65 * 66 * @name Galleria 67 * @type jQuery 68 * 69 * @cat plugins/Media 70 * 71 * @example $('ul.gallery').galleria({options}); 72 * @desc Create a a gallery from an unordered list of images with thumbnails 73 * @options 74 * insert: (selector string) by default, Galleria will create a container div before your ul that holds the image. 75 * You can, however, specify a selector where the image will be placed instead (f.ex '#main_img') 76* onImage: (function) a function that gets fired when the image is displayed and brings the jQuery image object. 77 * You can use it to add click functionality and effects. 78 * f.ex onImage(image) { image.css('display','none').fadeIn(); } will fadeIn each image that is displayed 79 * onThumb: (function) a function that gets fired when the thumbnail is displayed and brings the jQuery thumb object. 80 * Works the same as onImage except it targets the thumbnail after it's loaded. 81 * 82**/ 83 84var $$; 85 86$$ = $j.fn.galleria = function(options) { 87 88 // check for basic CSS support 89 if (!_hasCSS()) { return false; } 90 91 92 // set default options 93 var $defaults = { 94 history : false, 95 clickNext : true, 96 onImage : function(image,caption,thumb) {}, 97 onThumb : function(thumb) {}, 98 imageArray: [], 99 activeImage: 0, 100 autoPlay : false, 101 timer : false, 102 slideDelay: 5000, 103 captions : false, 104 descriptions : false 105 }; 106 107 108 // extend the options 109 var $settings = $j.extend($defaults, options); 110 111 var jQueryMatchedObj = $j(this); // This, in this context, refer to jQuery object 112 113 // bring the options to the galleria object 114 for (var i in $settings) { 115 if (i) { $j(this).galleria[i] = $settings[i]; } 116 } 117 118 // add the Galleria class 119 var $ul = $j(this).children('ul').addClass('galleria'); 120 121 //add gallery container for holding large photo, caption and description 122 var _insert = $j(document.createElement('div')).insertBefore($ul); 123 124 // create a wrapping div for the image 125 var _div = $j(document.createElement('div')).addClass('galleria_wrapper'); 126 127 // create a caption span 128 var _span = $j(document.createElement('span')).addClass('caption'); 129 130 // create a description paragraph 131 var _description = $j(document.createElement('div')).addClass('description'); 132 133 // inject the wrapper in in the insert selector
134 _insert.addClass('galleria_container').append(_div).append(_span).append(_description); 135 136 // loop through list 137 $ul.children('li').each(function(i) { 138 139 // bring the scope 140 var _container = $j(this); 141 142 // build element specific options 143 var _o = $j.meta ? $j.extend({}, $settings, _container.data()) : $settings; 144 145 // remove the clickNext if image is only child 146 _o.clickNext = $j(this).is(':only-child') ? false : _o.clickNext; 147 148 // try to fetch an anchor 149 var _a = $j(this).find('a').is('a') ? $j(this).find('a') : false; 150 151 // reference the original image as a variable and hide it 152 var _img = $j(this).children('img').css('display','none'); 153 154 // extract the original source 155 var _src = _a ? _a.attr('href') : _img.attr('src'); 156 $settings.imageArray.push(_src); 157 158 // find a title 159 var _title = _a ? _a.attr('title') : _img.attr('title'); 160 161 // find a description 162 var _description = _img.attr('alt'); 163 if (_description == _title) _description = ""; 164 165 // create loader image 166 var _loader = new Image(); 167 168 // check url and activate container if match 169 if (_o.history && (window.location.hash && window.location.hash.replace(/\#/,'') == _src)) { 170 _container.siblings('.active').removeClass('active'); 171 _container.addClass('active'); 172 } 173 174 // begin loader 175 $j(_loader).load(function () { 176 177 // try to bring the alt 178 $j(this).attr('alt',_img.attr('alt')); 179 180 //----------------------------------------------------------------- 181 // the image is loaded, let's create the thumbnail 182 183 var _thumb = _a ? 184 _a.find('img').addClass('thumb noscale').css('display','none') : 185 _img.clone(true).addClass('thumb').css('display','none'); 186 187 if (_a) { _a.replaceWith(_thumb); } 188 189 if (!_thumb.hasClass('noscale')) { // scaled tumbnails! 190 var w = Math.ceil( _img.width() / _img.height() * _container.height() ); 191 var h = Math.ceil( _img.height() / _img.width() * _container.width() ); 192 if (w < h) { 193 _thumb.css({ height: 'auto', width: _container.width(), marginTop: -(h-_container.height())/2 }); 194 } else { 195 _thumb.css({ width: 'auto', height: _container.height(), marginLeft: -(w-_container.width())/2 }); 196 } 197 } 198 199 // add the rel attribute
200 _thumb.attr('rel',_src); 201 202 // add the title attribute 203 _thumb.attr('title',_title); 204 205 // add the alt attribute 206 if (_description) _thumb.attr('alt',_description); 207 208 // add the click functionality to the _thumb 209 _thumb.click( 210 function () { _galleria_find_image (_thumb.attr('rel')); 211 }); 212 213 // hover classes for IE6 214 _thumb.hover( 215 function() { $j(this).addClass('hover'); }, 216 function() { $j(this).removeClass('hover'); } 217 ); 218 _container.hover( 219 function() { _container.addClass('hover'); }, 220 function() { _container.removeClass('hover'); } 221 ); 222 223 // prepend the thumbnail in the container 224 _container.prepend(_thumb); 225 226 // show the thumbnail 227 _thumb.css('display','block'); 228 229 // call the onThumb function 230 _o.onThumb(jQuery(_thumb)); 231 232 // check active class and activate image if match 233 if (_container.hasClass('active')) { 234 _select_galleria_image(_src); 235 //_span.text(_title); 236 } 237 238 // finally delete the original image 239 _img.remove(); 240 241 }).error(function () { 242 243 // Error handling 244 _container.html('<span class="error" style="color:red">Error loading image: '+_src+'</span>'); 245 246 }).attr('src', _src); 247 }); 248 249 $j(this).css('visibility','visible'); 250 251 $j(this).find('.nav .nextSlide').click(function() { 252 _stop_galleria_show(); 253 _next_galleria_image(); 254 return false; 255 }); 256 $j(this).find('.nav .prevSlide').click(function() { 257 _stop_galleria_show(); 258 _prev_galleria_image(); 259 return false; 260 }); 261 $j(this).find('.nav .stopSlide').click(function() { 262 _stop_galleria_show(); 263 return false; 264 }); 265 $j(this).find('.nav .startSlide').click(function() { 266 _galleria_slideshow(); 267 return false; 268 }); 269 270 if($settings.autoPlay){ 271 _start_galleria_show(); 272 } 273 274 275 function _start_galleria_show() { 276 if ( ! $settings.timer) { 277 var tmFunc = function(){ _galleria_slideshow(); }; 278 $settings.timer = setTimeout(tmFunc, $settings.slideDelay); 279 } 280 } 281 282 function _stop_galleria_show() { 283 if ($settings.timer) clearTimeout($settings.timer); 284 $settings.timer = false; 285 } 286 287 function _galleria_find_image(_src) { 288 activeImage = 0; 289 l = $settings.imageArray.length; 290 for (i=0; i<l; i++) { 291 if (_src == $settings.imageArray[i]) { 292 activeImage = i; 293 break; 294 } 295 } 296 _galleria_activate(activeImage); 297 } 298 299 function _next_galleria_image() { 300 $settings.activeImage = $settings.activeImage < ($settings.imageArray.length -1) ?($settings.activeImage + 1):0; 301 _select_galleria_image(); 302 } 303 304 function _prev_galleria_image() { 305 $settings.activeImage = $settings.activeImage > 0 ? ($settings.activeImage - 1):($settings.imageArray.length - 1); 306 _select_galleria_image(); 307 } 308 309 function _galleria_activate(imageIndex) { 310 _stop_galleria_show(); 311 $settings.activeImage = imageIndex; 312 _select_galleria_image(); 313 } 314 315 316 function _galleria_slideshow(){ 317 _next_galleria_image(); 318 _stop_galleria_show(); 319 if($j('.slickr-flickr-galleria').length > 0) _start_galleria_show(); 320 } 321 322 function _hasCSS() { 323 $j('body').append( 324 $j(document.createElement('div')).attr('id','css_test').css({ width:'1px', height:'1px', display:'none' }) 325 ); 326 var _v = ($j('#css_test').width() != 1) ? false : true; 327 $j('#css_test').remove(); 328 return _v; 329 }; 330 331 function _select_galleria_image() { 332 333 // get the wrapper 334 var _wrapper = _div; 335 336 var _src = $settings.imageArray[$settings.activeImage]; 337 338 if (_src) { 339 340 // get the thumb 341 var _thumb = $ul.find('img[rel="'+_src+'"]'); 342 343 // alter the active classes 344 _thumb.parents('li').siblings('.active').removeClass('active'); 345 _thumb.parents('li').addClass('active'); 346 347 // define a new image 348 var _img = $j(new Image()).attr('src',_src).addClass('replaced'); 349 350 // empty the wrapper and insert the new image 351 _wrapper.empty().append(_img); 352 353 if ($settings.captions) { 354 // insert the caption 355 _wrapper.siblings('.caption').html(_thumb.attr('title'));
356 357 if ($settings.descriptions) { 358 _alt = _thumb.attr('alt') != _thumb.attr('title') ? _thumb.attr('alt') : ""; 359 _wrapper.siblings('.description').html(_alt); 360 } 361 } 362 // fire the onImage function to customize the loaded image's features 363 $settings.onImage(_img,_wrapper.siblings('.caption'),_thumb); 364 365 // add clickable image helper 366 if($settings.clickNext) { 367 _img.css('cursor','pointer').click(function() { 368 if($settings.timer) {clearTimeout($settings.timer); $settings.timer = 0; } 369 _next_galleria_image(); 370 }); 371 } 372 } else { 373 374 // clean up the container if none are active 375 _wrapper.siblings().andSelf().empty(); 376 377 // remove active classes 378 $ul.children('li.active').removeClass('active'); 379 } 380 }; 381 return this; 382 383}; 384 385});
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.