1/** 2 * jCarouselLite - jQuery plugin to navigate images/any content in a carousel style widget. 3 * @requires jQuery v1.2 or above 4 * 5 * http://gmarwaha.com/jquery/jcarousellite/ 6 * 7 * Copyright (c) 2007 Ganeshji Marwaha (gmarwaha.com) 8 * Dual licensed under the MIT and GPL licenses: 9 * http://www.opensource.org/licenses/mit-license.php 10 * http://www.gnu.org/licenses/gpl.html 11 * 12 * Version: 1.0.1 13 * Note: Requires jquery 1.2 or above from version 1.0.1 14 */ 15 16/** 17 * Creates a carousel-style navigation widget for images/any-content from a simple HTML markup. 18 * 19 * The HTML markup that is used to build the carousel can be as simple as... 20 * 21 * <div class="carousel"> 22 * <ul> 23 * <li><img src="image/1.jpg" alt="1"></li> 24 * <li><img src="image/2.jpg" alt="2"></li> 25 * <li><img src="image/3.jpg" alt="3"></li> 26 * </ul> 27 * </div> 28 * 29 * As you can see, this snippet is nothing but a simple div containing an unordered list of images. 30 * You don't need any special "class" attribute, or a special "css" file for this plugin. 31 * I am using a class attribute just for the sake of explanation here. 32 * 33 * To navigate the elements of the carousel, you need some kind of navigation buttons. 34 * For example, you will need a "previous" button to go backward, and a "next" button to go forward. 35 * This need not be part of the carousel "div" itself. It can be any element in your page. 36 * Lets assume that the following elements in your document can be used as next, and prev buttons... 37 * 38 * <button class="prev"><<</button> 39 * <button class="next">>></button> 40 * 41 * Now, all you need to do is call the carousel component on the div element that represents it, and pass in the 42 * navigation buttons as options. 43 * 44 * $(".carousel").jCarouselLite({ 45 * btnNext: ".next", 46 * btnPrev: ".prev" 47 * }); 48 * 49 * That's it, you would have now converted your raw div, into a magnificient carousel. 50 * 51 * There are quite a few other options that you can use to customize it though. 52 * Each will be explained with an example below. 53 * 54 * @param an options object - You can specify all the options shown below as an options object param. 55 * 56 * @option btnPrev, btnNext : string - no defaults 57 * @example 58 * $(".carousel").jCarouselLite({ 59 * btnNext: ".next", 60 * btnPrev: ".prev" 61 * }); 62 * @desc Creates a basic carousel. Clicking "btnPrev" navigates backwards and "btnNext" navigates forward. 63 * 64 * @option btnGo - array - no defaults 65 * @example 66 * $(".carousel").jCarouselLite({ 67 * btnNext: ".next", 68 * btnPrev: ".prev", 69 * btnGo: [".0", ".1", ".2"] 70 * }); 71 * @desc If you don't want next and previous buttons for navigation, instead you prefer custom navigation based on 72 * the item number within the carousel, you can use this option. Just supply an array of selectors for each element 73 * in the carousel. The index of the array represents the index of the element. What i mean is, if the 74 * first element in the array is ".0", it means that when the element represented by ".0" is clicked, the carousel 75 * will slide to the first element and so on and so forth. This feature is very powerful. For example, i made a tabbed 76 * interface out of it by making my navigation elements styled like tabs in css. As the carousel is capable of holding 77 * any content, not just images, you can have a very simple tabbed navigation in minutes without using any other plugin. 78 * The best part is that, the tab will "slide" based on the provided effect. :-) 79 * 80 * @option mouseWheel : boolean - default is false 81 * @example 82 * $(".carousel").jCarouselLite({ 83 * mouseWheel: true 84 * }); 85 * @desc The carousel can also be navigated using the mouse wheel interface of a scroll mouse instead of using buttons. 86 * To get this feature working, you have to do 2 things. First, you have to include the mouse-wheel plugin from brandon. 87 * Second, you will have to set the option "mouseWheel" to true. That's it, now you will be able to navigate your carousel 88 * using the mouse wheel. Using buttons and mouseWheel or not mutually exclusive. You can still have buttons for navigation 89 * as well. They complement each other. To use both together, just supply the options required for both as shown below. 90 * @example 91 * $(".carousel").jCarouselLite({ 92 * btnNext: ".next", 93 * btnPrev: ".prev", 94 * mouseWheel: true 95 * }); 96 * 97 * @option auto : number - default is null, meaning autoscroll is disabled by default 98 * @example 99 * $(".carousel").jCarouselLite({ 100 * auto: 800, 101 * speed: 500 102 * }); 103 * @desc You can make your carousel auto-navigate itself by specfying a millisecond value in this option. 104 * The value you specify is the amount of time between 2 slides. The default is null, and that disables auto scrolling. 105 * Specify this value and magically your carousel will start auto scrolling. 106 * 107 * @option speed : number - 200 is default 108 * @example 109 * $(".carousel").jCarouselLite({ 110 * btnNext: ".next", 111 * btnPrev: ".prev",
112 * speed: 800 113 * }); 114 * @desc Specifying a speed will slow-down or speed-up the sliding speed of your carousel. Try it out with 115 * different speeds like 800, 600, 1500 etc. Providing 0, will remove the slide effect. 116 * 117 * @option easing : string - no easing effects by default. 118 * @example 119 * $(".carousel").jCarouselLite({ 120 * btnNext: ".next", 121 * btnPrev: ".prev", 122 * easing: "bounceout" 123 * }); 124 * @desc You can specify any easing effect. Note: You need easing plugin for that. Once specified, 125 * the carousel will slide based on the provided easing effect. 126 * 127 * @option vertical : boolean - default is false 128 * @example 129 * $(".carousel").jCarouselLite({ 130 * btnNext: ".next", 131 * btnPrev: ".prev", 132 * vertical: true 133 * }); 134 * @desc Determines the direction of the carousel. true, means the carousel will display vertically. The next and 135 * prev buttons will slide the items vertically as well. The default is false, which means that the carousel will 136 * display horizontally. The next and prev items will slide the items from left-right in this case. 137 * 138 * @option circular : boolean - default is true 139 * @example 140 * $(".carousel").jCarouselLite({ 141 * btnNext: ".next", 142 * btnPrev: ".prev", 143 * circular: false 144 * }); 145 * @desc Setting it to true enables circular navigation. This means, if you click "next" after you reach the last 146 * element, you will automatically slide to the first element and vice versa. If you set circular to false, then 147 * if you click on the "next" button after you reach the last element, you will stay in the last element itself 148 * and similarly for "previous" button and first element. 149 * 150 * @option visible : number - default is 3 151 * @example 152 * $(".carousel").jCarouselLite({ 153 * btnNext: ".next", 154 * btnPrev: ".prev", 155 * visible: 4 156 * }); 157 * @desc This specifies the number of items visible at all times within the carousel. The default is 3. 158 * You are even free to experiment with real numbers. Eg: "3.5" will have 3 items fully visible and the 159 * last item half visible. This gives you the effect of showing the user that there are more images to the right. 160 * 161 * @option start : number - default is 0 162 * @example 163 * $(".carousel").jCarouselLite({ 164 * btnNext: ".next", 165 * btnPrev: ".prev", 166 * start: 2 167 * }); 168 * @desc You can specify from which item the carousel should start. Remember, the first item in the carousel 169 * has a start of 0, and so on. 170 * 171 * @option scrool : number - default is 1 172 * @example 173 * $(".carousel").jCarouselLite({ 174 * btnNext: ".next", 175 * btnPrev: ".prev", 176 * scroll: 2 177 * }); 178 * @desc The number of items that should scroll/slide when you click the next/prev navigation buttons. By 179 * default, only one item is scrolled, but you may set it to any number. Eg: setting it to "2" will scroll 180 * 2 items when you click the next or previous buttons. 181 *
182 * @option beforeStart, afterEnd : function - callbacks 183 * @example 184 * $(".carousel").jCarouselLite({ 185 * btnNext: ".next", 186 * btnPrev: ".prev", 187 * beforeStart: function(a) { 188 * alert("Before animation starts:" + a); 189 * }, 190 * afterEnd: function(a) { 191 * alert("After animation ends:" + a); 192 * } 193 * }); 194 * @desc If you wanted to do some logic in your page before the slide starts and after the slide ends, you can 195 * register these 2 callbacks. The functions will be passed an argument that represents an array of elements that 196 * are visible at the time of callback. 197 * 198 * 199 * @cat Plugins/Image Gallery 200 * @author Ganeshji Marwaha/[email protected] 201 */ 202 203(function($) { // Compliant with jquery.noConflict() 204$.fn.jCarouselLite = function(o) { 205 o = $.extend({ 206 btnPrev: null, 207 btnNext: null, 208 btnGo: null, 209 mouseWheel: false, 210 auto: null, 211 212 speed: 200, 213 easing: null, 214 215 vertical: false, 216 circular: true, 217 visible: 3, 218 start: 0, 219 scroll: 1, 220 221 beforeStart: null, 222 afterEnd: null 223 }, o || {}); 224 225 return this.each(function() { // Returns the element collection. Chainable. 226 227 var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width"; 228 var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible; 229 230 if(o.circular) { 231 ul.prepend(tLi.slice(tl-v-1+1).clone()) 232 .append(tLi.slice(0,v).clone()); 233 o.start += v; 234 } 235 236 var li = $("li", ul), itemLength = li.size(), curr = o.start; 237 if (v<itemLength){ 238 //itemLength += 1; 239 v -= 1; 240 } 241 242 div.css("visibility", "visible"); 243 244 li.css({overflow: "hidden", float: o.vertical ? "none" : "left"}); 245 ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"}); 246 div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"}); 247 248 var liSize = o.vertical ? height(li) : width(li); // Full li size(incl margin)-Used for animation 249 var ulSize = liSize * itemLength; // size of full ul(total length, not just for the visible items) 250 var divSize = liSize * v; // size of entire div(total length for just the visible items) 251 252 if (divSize+1<ulSize) { 253 $(o.btnPrev + "," + o.btnNext).removeClass("disabled"); 254 } 255 256 li.css({width: li.width(), height: li.height()}); 257 ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize)); 258 259 div.css(sizeCss, divSize+"px");
259 // Width of the DIV. length of visible images 260 261 if(o.btnPrev) 262 $(o.btnPrev).click(function() { 263 return go(curr-o.scroll); 264 }); 265 266 if(o.btnNext) 267 $(o.btnNext).click(function() { 268 return go(curr+o.scroll); 269 }); 270 271 if(o.btnGo) 272 $.each(o.btnGo, function(i, val) { 273 $(val).click(function() { 274 return go(o.circular ? o.visible+i : i); 275 }); 276 }); 277 278 if(o.mouseWheel && div.mousewheel) 279 div.mousewheel(function(e, d) { 280 return d>0 ? go(curr-o.scroll) : go(curr+o.scroll); 281 }); 282 283 if(o.auto) 284 setInterval(function() { 285 go(curr+o.scroll); 286 }, o.auto+o.speed); 287 288 function vis() { 289 return li.slice(curr).slice(0,v); 290 }; 291 292 function go(to) { 293 if(!running) { 294 295 if(o.beforeStart) 296 o.beforeStart.call(this, vis()); 297 298 if(o.circular) { // If circular we are in first or last, then goto the other end 299 if(to<=o.start-v-1) { // If first, then goto last 300 ul.css(animCss, -((itemLength-(v*2))*liSize)+"px"); 301 // If "scroll" > 1, then the "to" might not be equal to the condition; it can be lesser depending on the number of elements. 302 curr = to==o.start-v-1 ? itemLength-(v*2)-1 : itemLength-(v*2)-o.scroll; 303 } else if(to>=itemLength-v+1) { // If last, then goto first 304 ul.css(animCss, -( (v) * liSize ) + "px" ); 305 // If "scroll" > 1, then the "to" might not be equal to the condition; it can be greater depending on the number of elements. 306 curr = to==itemLength-v+1 ? v+1 : v+o.scroll; 307 } else curr = to; 308 } else { // If non-circular and to points to first or last, we just return. 309 if(to<0 || to>itemLength-v) return; 310 else curr = to; 311 } // If neither overrides it, the curr will still be "to" and we can proceed. 312 313 running = true; 314 315 ul.animate( 316 animCss == "left" ? { left: -(curr*liSize) } : { top: -(curr*liSize) } , o.speed, o.easing, 317 function() { 318 if(o.afterEnd) 319 o.afterEnd.call(this, vis()); 320 running = false; 321 } 322 ); 323 // Disable buttons when the carousel reaches the last/first, and enable when not 324 if(!o.circular) { 325 $(o.btnPrev + "," + o.btnNext).removeClass("disabled"); 326 $( (curr-o.scroll<0 && o.btnPrev) 327 || 328 (curr+o.scroll > itemLength-v && o.btnNext) 329 || 330 [] 331 );//.addClass("disabled"); 332 } 333 334 } 335 return false; 336 }; 337 }); 338}; 339 340function css(el, prop) { 341 return parseInt($.css(el[0], prop)) || 0; 342}; 343function width(el) { 344 //return el.outerWidth() + css(el, 'marginLeft') + css(el, 'marginRight'); 345 return el.outerWidth(true) 346}; 347function height(el) { 348 //return el.outerHeight() + css(el, 'marginTop') + css(el, 'marginBottom'); 349 return el.outerHeight(true) 350}; 351 352})(jQuery); 353 354 355 356 357/** 358 * Galleria (http://monc.se/kitchen) 359 * 360 * Galleria is a javascript image gallery written in jQuery. 361 * It loads the images one by one from an unordered list and displays thumbnails when each image is loaded. 362 * It will create thumbnails for you if you choose so, scaled or unscaled, 363 * centered and cropped inside a fixed thumbnail box defined by CSS. 364 * 365 * The core of Galleria lies in it's smart preloading behaviour, snappiness and the fresh absence 366 * of obtrusive design elements. Use it as a foundation for your custom styled image gallery. 367 * 368 * MAJOR CHANGES v.FROM 0.9 369 * Galleria now features a useful history extension, enabling back button and bookmarking for each image. 370 * The main image is no longer stored inside each list item, instead it is placed inside a container 371 * onImage and onThumb functions lets you customize the behaviours of the images on the site 372 * 373 * Tested in Safari 3, Firefox 2, MSIE 6, MSIE 7, Opera 9 374 * 375 * Version 1.0 376 * Februari 21, 2008 377 * 378 * Copyright (c) 2008 David Hellsing (http://monc.se) 379 * Licensed under the GPL licenses. 380 * http://www.gnu.org/licenses/gpl.txt 381 **/ 382 383 (function($){ 384 /** 385 * 386 * @desc Convert images from a simple html <ul> into a thumbnail gallery 387 * @author David Hellsing 388 * @version 1.0 389 * 390 * @name Galleria 391 * @type jQuery 392 *
393 * @cat plugins/Media 394 * 395 * @example $('ul.gallery').galleria({options}); 396 * @desc Create a a gallery from an unordered list of images with thumbnails 397 * @options 398 * insert: (selector string) by default, Galleria will create a container div before your ul that holds the image. 399 * You can, however, specify a selector where the image will be placed instead (f.ex '#main_img') 400 * history: Boolean for setting the history object in action with enabled back button, bookmarking etc. 401 * onImage: (function) a function that gets fired when the image is displayed and brings the jQuery image object. 402 * You can use it to add click functionality and effects. 403 * f.ex onImage(image) { image.css('display','none').fadeIn(); } will fadeIn each image that is displayed 404 * onThumb: (function) a function that gets fired when the thumbnail is displayed and brings the jQuery thumb object. 405 * Works the same as onImage except it targets the thumbnail after it's loaded. 406 * 407 **/ 408 409 var $$ = $.fn.galleria = function(options) { 410 411 var element = this; 412 413 // set default options 414 var defaults = { 415 insert : '.galleria_container', 416 slideshow_wrapper: '#slideshow_wrapper', 417 clickNext : true, 418 onImage : function(image,caption,thumb) {}, 419 onThumb : function(thumb) {} 420 }; 421 422 423 // extend the options 424 var opts = $.extend({}, defaults, options); 425 element.data('galleria_opts', opts) 426 element.data('galleria_slideshow_wrapper', $(opts.slideshow_wrapper)) 427 428 // if no insert selector, create a new division and insert it before the ul 429 var _insert = ( $(opts.insert).is(opts.insert) ) ? 430 $(opts.insert) : 431 $(document.createElement('div')).insertBefore(this); 432 element.data('galleria_insert', _insert); 433 434 // create a wrapping div for the image 435 var _div = $(document.createElement('div')).addClass('galleria_wrapper'); 436 element.data('galleria_wrapper', _div); 437 var _div_helper = $(document.createElement('div')).addClass('middle_align'); 438 439 // create a caption span 440 var _span = $(document.createElement('div')).addClass('caption'); 441 442 var _nav = $(document.createElement('div')).addClass('lightbox-nav'); 443 _nav.html('<a href="#" class="lightbox-nav-btnPrev clearfix"></a><a href="#" class="lightbox-nav-btnCurrent clearfix"></a><a href="#" class="lightbox-nav-btnNext clearfix"></a>') 444 // inject the wrapper in in the insert selector 445 _insert.addClass('galleria_container').append(_nav).append(_div_helper).append(_div).append(_span); 446 447 448 //------------- 449 450 return this.each(function(){ 451 // add the Galleria class 452 $(this).addClass('galleria'); 453 454 // loop through list 455 $(this).children('li').each(function(i) { 456 457 // bring the scope 458 var _container = $(this); 459 460 // build element specific options 461 var _o = $.meta ? $.extend({}, opts, _container.data()) : opts; 462 463 // remove the clickNext if image is only child 464 _o.clickNext = $(this).is(':only-child') ? false : _o.clickNext; 465 466 467 // try to fetch an anchor 468 // var _a = $(this).find('a').is('a') ? $(this).find('a') : false; 469 // dont search for anchors 470 var _a = false 471 472 // reference the original image as a variable and hide it 473 var _img = $(this).children('img').css('display','none'); 474 475 // extract the original source 476 var _src = _a ? _a.attr('href') : _img.attr('src'); 477 478 // find a title 479 var _title = _a ? _a.attr('title') : _img.attr('title'); 480 481 // create loader image 482 var _loader = new Image(); 483 484 // begin loader 485 $(_loader).load(function () { 486 487 // try to bring the alt 488 $(this).attr('alt',_img.attr('alt')); 489 490 //----------------------------------------------------------------- 491 // the image is loaded, let's create the thumbnail 492 493 var _thumb = _a ? 494 _a.find('img').addClass('thumb noscale').css('display','none') : 495 _img.clone(true).addClass('thumb').css('display','none'); 496 497 if (_a) { _a.replaceWith(_thumb); } 498 499 if (!_thumb.hasClass('noscale')) { // scaled tumbnails! 500 var w = Math.ceil( _img.width() / _img.height() * _container.height() ); 501 var h = Math.ceil( _img.height() / _img.width() * _container.width() ); 502 if (w < h) { 503 _thumb.css({ height: 'auto', width: _container.width(), marginTop: -(h-_container.height())/2 }); 504 } else { 505 _thumb.css({ width: 'auto', height: _container.height(), marginLeft: -(w-_container.width())/2 }); 506 } 507 } else { // Center thumbnails. 508 // a tiny timer fixed the width/height 509 window.setTimeout(function() { 510 _thumb.css({ 511 marginLeft: -( _thumb.width() - _container.width() )/2, 512 marginTop: -( _thumb.height() - _container.height() )/2 513 }); 514 }, 1); 515 } 516 517 // add the rel attribute
518 _thumb.attr('rel',_src); 519 520 // add the title attribute 521 _thumb.attr('title',_title); 522 523 // add the click functionality to the _thumb 524 _thumb.click(function() { 525 $$.activate(element, _src); 526 }); 527 528 // hover classes for IE6 529 _thumb.hover( 530 function() { $(this).addClass('hover'); }, 531 function() { $(this).removeClass('hover'); } 532 ); 533 _container.hover( 534 function() { _container.addClass('hover'); }, 535 function() { _container.removeClass('hover'); } 536 ); 537 538 // prepend the thumbnail in the container 539 _container.prepend(_thumb); 540 541 // show the thumbnail 542 _thumb.css('display','block'); 543 544 _thumb.attr('data-loaded', '1'); 545 546 // call the onThumb function 547 _o.onThumb(jQuery(_thumb)); 548 549 // check active class and activate image if match 550 if (_container.hasClass('active')) { 551 $$.activate(element, _src); 552 } 553 554 //----------------------------------------------------------------- 555 556 // finally delete the original image 557 _img.remove(); 558 559 }).error(function () { 560 561 // Error handling 562 _container.html('<span class="error" style="color:red">Error loading image: '+_src+'</span>'); 563 564 }).attr('src', _src); 565 }); 566 }); 567 }; 568 569/** 570* 571* @name NextSelector 572* 573* @desc Returns the sibling sibling, or the first one 574* 575**/ 576 577$$.nextSelector = function(selector) { 578 _selector = $(selector); 579 return _selector.hasClass('last') ? _selector.siblings('.first') : _selector.next(); 580}; 581 582/** 583* 584* @name previousSelector 585* 586* @desc Returns the previous sibling, or the last one 587* 588**/ 589 590$$.previousSelector = function(selector) { 591 _selector = $(selector); 592 return _selector.hasClass('first') ? _selector.siblings('.last') : _selector.prev(); 593}; 594 595/** 596* 597* @name onPageLoad 598* 599* @desc The function that displays the image and alters the active classes 600* 601* Note: This function gets called when: 602* 1. after calling $.historyInit(); 603* 2. after calling $.historyLoad(); 604* 3. after pushing "Go Back" button of a browser 605* 606**/ 607 608$$.onPageLoad = function(element, _src) { 609 var opts = element.data('galleria_opts') 610 var slideshow_wrapper = element.data('galleria_slideshow_wrapper'); 611 var _insert = element.data('galleria_insert'); 612 613 // get the wrapper 614 var _wrapper = element.data('galleria_wrapper'); 615 616 // get the thumb 617 var _thumb = $('img[rel="'+_src+'"]', element); 618 // get the main-caption and sub-caption divs 619 var _main_caption = $('div[rel="'+_src+'"].main-caption', element); 620 var _sub_caption = $('div[rel="'+_src+'"].sub-caption', element); 621 622 var _url = $('img[rel="'+_src+'"]', element).attr('name'); 623 624 if (_src) { 625 // alter the active classes 626 _thumb.parents('li').siblings('.active').removeClass('active'); 627 _thumb.parents('li').addClass('active'); 628 629 // define a new image 630 var _img = $(new Image()).attr('src',_src).addClass('replaced'); 631 632 // empty the wrapper and insert the new image 633 _wrapper.empty().append(_img); 634 635 // insert the caption 636 // based on main-caption and sub-caption divs 637 _wrapper.siblings('.caption').html(_main_caption.html() +''+ _sub_caption.html()); 638 639 // fire the onImage function to customize the loaded image's features 640 opts.onImage(_img,_wrapper.siblings('.caption'),_thumb); 641 642 if (_url){ 643 $('.lightbox-nav-btnCurrent', _insert).attr('href', _url) 644 } else { 645 $('.lightbox-nav-btnCurrent', _insert).attr('href', '#') 646 $('.lightbox-nav-btnCurrent', _insert).css({'cursor': 'auto'}) 647 } 648 $('.lightbox-nav-btnCurrent', _insert).unbind().bind('click',function() { 649 if (_url){ 650 if( $('ul li', slideshow_wrapper).length > 1) 651 clearInterval(time_out); 652 window.location = _url; 653 } 654 return false; 655 }); 656 // add clickable image helper 657 if( $('ul li', slideshow_wrapper).length > 1) { 658 $('.lightbox-nav-btnPrev', _insert).unbind().hover(function() { 659 $(this).append('<span class="clearfix lightbox-nav-holderPrev">«</span>'); 660 661 },function() { 662 $(this).html(''); 663 }).show().bind('click',function() { 664 $$.prev(element); 665 return false;
666 }); 667 668 $('.lightbox-nav-btnNext', _insert).unbind().hover(function() { 669 $(this).append('<span class="clearfix lightbox-nav-holderNext">»</span>'); 670 },function() { 671 $(this).html(''); 672 }).show().bind('click',function() { 673 $$.next(element); 674 return false; 675 }); 676 } else { 677 $('.lightbox-nav-btnPrev,.lightbox-nav-btnNext', _insert).hide(); 678 $('.lightbox-nav-btnCurrent', _insert).css({'width': '640px'}) 679 } 680 } else { 681 682 // clean up the container if none are active 683 _wrapper.siblings().andSelf().empty(); 684 685 // remove active classes 686 $('li.active', element).removeClass('active'); 687 } 688 689 // place the source in the galleria.current variable 690 element.data('galleria_current', _src); 691 692 }; 693 694$$.activate = function(element, _src) { 695 $$.onPageLoad(element, _src); 696}; 697 698$$.next = function(element) { 699 var _next = $($$.nextSelector($('img[rel="' + element.data('galleria_current') + '"]', element).parents('li'))).find('img').attr('rel'); 700 $$.activate(element, _next); 701}; 702 703$$.prev = function(element) { 704 var _prev = $($$.previousSelector($('img[rel="' + element.data('galleria_current') + '"]', element).parents('li'))).find('img').attr('rel'); 705 $$.activate(element, _prev); 706}; 707 708})(jQuery); 709 710 711var imageNextTime = 4000; 712var time_out; 713 714function generateUUID(){ 715 var d = new Date().getTime(); 716 var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { 717 var r = (d + Math.random()*16)%16 | 0; 718 d = Math.floor(d/16); 719 return (c=='x' ? r : (r&0x7|0x8)).toString(16); 720 }); 721 return uuid; 722}; 723 724function start_image_rotation(uuid) { 725 var all_loaded = true 726 $('.slideshow_wrapper.' + uuid + ' ul li img').each(function(){ 727 if($(this).attr('data-loaded') != '1') { 728 all_loaded = false 729 return false 730 } 731 }) 732 if(all_loaded) { 733 time_out = setInterval("$('ul.gallery." + uuid + "').each(function(){$.fn.galleria.next($(this))})", imageNextTime); 734 } else { 735 setTimeout('start_image_rotation("' + uuid + '")', 1000) 736 } 737} 738 739function galleria_and_carousel() { 740 if ($('ul.gallery:last').not('.galleria').length == 0) { 741 return 742 } 743 highDPI() 744 745 $('.slideshow_wrapper > .carousel').width($('.slideshow_wrapper').width()); 746 var uuid = generateUUID(); 747 $('ul.gallery:last li:first').addClass('active'); 748 $('.slideshow_wrapper:last').addClass(uuid); 749 $('.slideshow:last').addClass(uuid); 750 $('ul.gallery:last').addClass(uuid).galleria({ 751 clickNext: true, 752 insert: '.slideshow:last', 753 slideshow_wrapper: '.slideshow_wrapper:last', 754 onImage: function(image, caption, thumb){ 755 if(! ($.browser.mozilla && navigator.appVersion.indexOf("Win") !=-1)) { 756 // FF/Win fades large images terribly slow 757 image.css('display','none').fadeIn(1000); 758 } 759 760 // fetch the thumbnail container 761 var _li = thumb.parents('li'); 762 // fade out inactive thumbnail 763 _li.siblings().children('img.selected').removeClass('selected').fadeTo(500,0.3); 764 // fade in active thumbnail 765 thumb.fadeTo('fast', 0.95).addClass('selected'); 766 // add a title for the clickable image 767 image.attr('title','Next image'); 768 769 //if(thumb.attr('name')) { 770 //caption.wrapInner('<a href="'+ thumb.attr('name') +'"></a>'); 771 //} 772 if($('.galleria_wrapper:last').height() > 0 && !$('.slideshow_wrapper:last').css('height')) { 773 $('.slideshow_wrapper:last, .galleria_container:last').height($('.galleria_wrapper:last').height()); 774 } 775 }, 776 onThumb: function(thumb) { 777 // thumbnail effects goes here 778 // fetch the thumbnail container 779 var _li = thumb.parents('li'); 780 // if thumbnail is active, fade all the way. 781 var _fadeTo = _li.is('.active') ? '0.95' : '0.3'; 782 // fade in the thumbnail when finnished loading 783 thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500); 784 // hover effects 785 thumb.hover( 786 function() { thumb.fadeTo('fast', 0.95); }, 787 // don't fade out if the parent is active 788 function() { _li.not('.active').children('img').fadeTo('fast',0.3); } 789 ) 790 thumb.click(function(){ 791 //disableCycling = true; 792 }); 793 } 794 }); 795 796 $('.slideshow_wrapper:last ul.gallery img').show(); 797 //var caption = $('.slideshow:last .caption'); 798 //$('.slideshow:last').hover(function(){ 799 //ch = caption.html().length; 800 //if(ch) { 801 //caption.css('bottom', '-' + caption.outerHeight() + 'px') 802 //caption.stop().animate({bottom: '0'}, {queue: false, duration: 160}) 803 //} 804 //}, 805 //function(){ 806 //ch = caption.html().length; 807 //if(ch) { 808 //caption.stop().animate({bottom: '-' + caption.outerHeight() + 'px'}, {queue: false, duration: 160}) 809 //} 810 //} 811 //); 812 813 // carousel
814 815 $(".carousel:last").jCarouselLite({ 816 btnNext: ".nb", 817 btnPrev: ".pb", 818 visible: 24, 819 auto: imageNextTime, 820 speed: 800, 821 circular: false 822 }).width($('.slideshow_wrapper').width()); 823 824 if( $('.slideshow_wrapper:last ul li').length > 1) { 825 start_image_rotation(uuid); 826 } 827} 828 829$(document).ready(function(){ 830 galleria_and_carousel(); 831}); 832 833 834// Tabs Script 835$(document).ready(function(){ 836 makeTabs('#weather'); 837 makeTabs('#tabs'); 838 makeTabs('#tabs2'); 839 makeTabs('#tabs3'); 840 makeTabs('#tabs4'); 841 makeTabs('#tabs5'); 842 makeTabs('#tabs6'); 843 makeTabs('#tabs7'); 844 makeTabs('#tabs8'); 845 makeTabs('#tabs9'); 846 makeTabs('#tabs10'); 847 makeTabs('#tabs11'); 848}); 849 850 851function makeTabs(id){ 852 $(id+' .tab').hide(); // Hide all divs 853 $(id+' .tab:first').show(); // Show the first div 854 $(id+' ul li:first').addClass('active'); // Set the class of the first link to active 855 $(id+' ul:first li a').click(function(){ //When any link is clicked 856 $(id+' ul li').removeClass('active'); // Remove active class from all links 857 $(this).parent().addClass('active'); //Set clicked link class to active 858 var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link 859 $(id+' .tab').hide(); // Hide all divs 860 $(id+' '+currentTab).show(); // Show div with id equal to variable currentTab 861 return false; 862 }); 863 864} 865
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.