1/* 2 3 Supersized - Fullscreen Slideshow jQuery Plugin 4 Version : 3.2.7 5 Site : www.buildinternet.com/project/supersized 6 7 Author : Sam Dunn 8 Company : One Mighty Roar (www.onemightyroar.com) 9 License : MIT License / GPL License 10 11 ============================================================ 12 Customized by Andre Gagnon for the BigFormat Wordpress Theme 13 ============================================================ 14*/ 15 16(function($){ 17 18 19 /* Place Supersized Elements 20 ----------------------------*/ 21 $(document).ready(function() { 22 $('.mainbody').append('<div id="supersized-loader"></div><ul id="supersized"></ul>'); 23 }); 24 25 26 $.supersized = function(options){ 27 28 /* Variables 29 ----------------------------*/ 30 var el = '#supersized', 31 base = this; 32 33 var $mainwidth = null; 34 var $mainheight = null; 35 var $slidewidth = null; 36 var $slideheight = null; 37 // Access to jQuery and DOM versions of element 38 base.$el = $(el); 39 base.el = el; 40 vars = $.supersized.vars; 41 // Add a reverse reference to the DOM object 42 base.$el.data("supersized", base); 43 api = base.$el.data('supersized'); 44 45 base.init = function(){ 46 // Combine options and vars 47 $.supersized.vars = $.extend($.supersized.vars, $.supersized.themeVars); 48 $.supersized.vars.options = $.extend({},$.supersized.defaultOptions, $.supersized.themeOptions, options); 49 base.options = $.supersized.vars.options; 50 51 base._build(); 52 53/*-----------------------------------------------------------------------------------*/ 54/* Full Nav Drawer Drawer by Andre Gagnon 55/*-----------------------------------------------------------------------------------*/ 56 57 jQuery(function($) { 58 59 var navhandleinit = $('.navhandle').css('left'); 60 var $navnow = $('.navhandle').css('left'); 61 62 $('.navhandle, #tray-button, .page-template-template-home-php .lines, .single-portfolio .lines').click(function(e) { e.preventDefault(); 63 64 $navnow = $('.navhandle').css('left'); 65 66 if ($navnow == navhandleinit) { 67 document.getElementById('wrapper').style.marginLeft = "10px"; 68 base.resizeNowAnimate(); 69 document.getElementById('wrapper').style.marginLeft = "220px"; 70 } else { 71 document.getElementById('wrapper').style.marginLeft = "220px"; 72 base.resizeNowAnimate(); 73 document.getElementById('wrapper').style.marginLeft = "10px"; 74 75 $navnow = navhandleinit; 76 } 77 78 }); 79 80 $body = $('body'); 81 if ($body.hasClass('hidenavbar')) { 82 83 window.setTimeout(function(){ 84 85 $('#supersized img').addClass('resize'); //add class for css3 transitions 86 $thisid = $(this).attr("id"); 87 $thisclass = $(this).attr("class"); 88 $navnow = $('.navhandle').css('left'); 89 90 if ($navnow == navhandleinit) { 91 92 document.getElementById('wrapper').style.marginLeft = "10px"; 93 base.resizeNowAnimate(); 94 document.getElementById('wrapper').style.marginLeft = "220px"; 95 96 if (($thisid == 'tray-button')) { 97 $('#thumb-tray').stop().animate({bottom : 0}, 300); 98 } 99 $('#prevslide').stop().animate({left: 25 }, 500, 'easeOutCubic'); 100 $('.navcontainer').stop().animate({ left: -210 }, 500, 'easeOutCubic'); 101 $('.navhandle').stop().animate({ left: -10 }, 500, 'easeOutCubic'); 102 $('.mainbody').stop().animate({marginLeft: 10}, 500, 'easeOutCubic', function(){ $('#supersized img').removeClass('resize'); }); //remove css3 transition class after completion 103 $('.videowrapper').animate({width: '120%', paddingLeft:0}, 500, 'easeOutCubic'); 104 105 106 $('.nav').fadeOut(500, 'easeOutCubic'); 107 108 $('.navhandle').toggleClass("rightarrow"); 109 110 111 112 } else { 113 document.getElementById('wrapper').style.marginLeft = "220px"; 114 base.resizeNowAnimate(); 115 document.getElementById('wrapper').style.marginLeft = "10px"; 116 117 $('#prevslide').stop().animate({left: 245}, 500, 'easeOutCubic'); 118 $('.navcontainer').stop().animate({ left: 0 }, 500, 'easeOutCubic'); 119 $('.navhandle').stop().animate({ left: navhandleinit}, 500, 'easeOutCubic'); 120 $('.mainbody').stop().animate({marginLeft: 220}, 500, 'easeOutCubic', function(){ $('#supersized img').removeClass('resize'); }); //remove css3 transition class after completion 121 $('#thumb-tray').stop().animate({bottom : -$('#thumb-tray').height()}, 300); 122 $('.videowrapper').animate({paddingLeft: 220, width: '100%'}, 500, 'easeOutCubic'); 123 124 $('.nav').fadeIn(500, 'easeOutCubic'); 125 126 $('.navhandle').toggleClass("rightarrow"); 127 128 $navnow = navhandleinit; 129 } 130 131 }, 3000); } 132 133}); 134 135 }; 136 137 138 /* Build Elements 139 ----------------------------*/ 140 base._build = function(){ 141 // Add in slide markers 142 var thisSlide = 0, 143 slideSet = '', 144 markers = '', 145 markerContent, 146 thumbMarkers = '', 147 thumbImage; 148 149 while(thisSlide <= base.options.slides.length-1){ 150 //Determine slide link content 151 switch(base.options.slide_links){ 152 case 'num': 153 markerContent = thisSlide; 154 break; 155 case 'name': 156 markerContent = base.options.slides[thisSlide].title; 157 break; 158 case 'blank': 159 markerContent = ''; 160 break; 161 } 162 163 slideSet = slideSet+'<li class="slide-'+thisSlide+'"></li>'; 164 165 if(thisSlide == base.options.start_slide-1){ 166 // Slide links 167 if (base.options.slide_links)markers = markers+'<li class="slide-link-'+thisSlide+' current-slide"><a>'+markerContent+'</a></li>';
168 // Slide Thumbnail Links 169 if (base.options.thumb_links){ 170 base.options.slides[thisSlide].thumb ? thumbImage = base.options.slides[thisSlide].thumb : thumbImage = base.options.slides[thisSlide].image; 171 thumbMarkers = thumbMarkers+'<li class="thumb'+thisSlide+' current-thumb"><img src="'+thumbImage+'"/></li>'; 172 }; 173 }else{ 174 // Slide links 175 if (base.options.slide_links) markers = markers+'<li class="slide-link-'+thisSlide+'" ><a>'+markerContent+'</a></li>'; 176 // Slide Thumbnail Links 177 if (base.options.thumb_links){ 178 base.options.slides[thisSlide].thumb ? thumbImage = base.options.slides[thisSlide].thumb : thumbImage = base.options.slides[thisSlide].image; 179 thumbMarkers = thumbMarkers+'<li class="thumb'+thisSlide+'"><img src="'+thumbImage+'"/></li>'; 180 }; 181 } 182 thisSlide++; 183 } 184 185 if (base.options.slide_links) $(vars.slide_list).html(markers); 186 if (base.options.thumb_links && vars.thumb_tray.length){ 187 $(vars.thumb_tray).append('<ul id="'+vars.thumb_list.replace('#','')+'">'+thumbMarkers+'</ul>'); 188 } 189 190 $(base.el).append(slideSet); 191 192 // Add in thumbnails 193 if (base.options.thumbnail_navigation){ 194 // Load previous thumbnail 195 vars.current_slide - 1 < 0 ? prevThumb = base.options.slides.length - 1 : prevThumb = vars.current_slide - 1; 196 $(vars.prev_thumb).show().html($("<img/>").attr("src", base.options.slides[prevThumb].image)); 197 198 // Load next thumbnail 199 vars.current_slide == base.options.slides.length - 1 ? nextThumb = 0 : nextThumb = vars.current_slide + 1; 200 $(vars.next_thumb).show().html($("<img/>").attr("src", base.options.slides[nextThumb].image)); 201 } 202 203 base._start(); // Get things started 204 }; 205 206 207 /* Initialize 208 ----------------------------*/ 209 base._start = function(){ 210 211 // Determine if starting slide random 212 if (base.options.start_slide){ 213 vars.current_slide = base.options.start_slide - 1; 214 }else{ 215 vars.current_slide = Math.floor(Math.random()*base.options.slides.length); // Generate random slide number 216 } 217 218 // If links should open in new window 219 var linkTarget = base.options.new_window ? ' target="_blank"' : ''; 220 221 // Set slideshow quality (Supported only in FF and IE, no Webkit) 222 if (base.options.performance == 3){ 223 base.$el.addClass('speed'); // Faster transitions 224 } else if ((base.options.performance == 1) || (base.options.performance == 2)){ 225 base.$el.addClass('quality'); // Higher image quality 226 } 227 228 // Shuffle slide order if needed 229 if (base.options.random){ 230 arr = base.options.slides; 231 for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x); // Fisher-Yates shuffle algorithm (jsfromhell.com/array/shuffle) 232 base.options.slides = arr; 233 } 234 235 /*-----Load initial set of images-----*/ 236 237 if (base.options.slides.length > 1){ 238 if(base.options.slides.length > 2){ 239 // Set previous image 240 vars.current_slide - 1 < 0 ? loadPrev = base.options.slides.length - 1 : loadPrev = vars.current_slide - 1; // If slide is 1, load last slide as previous 241 var imageLink = (base.options.slides[loadPrev].url) ? "href='" + base.options.slides[loadPrev].url + "'" : ""; 242 243 var imgPrev = $('<img src="'+base.options.slides[loadPrev].image+'"/>'); 244 var slidePrev = base.el+' li:eq('+loadPrev+')'; 245 imgPrev.appendTo(slidePrev).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading prevslide'); 246 247 imgPrev.load(function(){ 248 $(this).data('origWidth', $(this).width()).data('origHeight', $(this).height()); 249 base.resizeNow(); // Resize background image 250 }); // End Load 251 } 252 } else { 253 // Slideshow turned off if there is only one slide 254 base.options.slideshow = 0; 255 } 256 257 // Set current image 258 imageLink = (api.getField('url')) ? "href='" + api.getField('url') + "'" : ""; 259 var img = $('<img src="'+api.getField('image')+'"/>'); 260 261 var slideCurrent= base.el+' li:eq('+vars.current_slide+')'; 262 img.appendTo(slideCurrent).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading activeslide'); 263 264 img.load(function(){ 265 base._origDim($(this)); 266 base.resizeNow(); // Resize background image 267 base.launch(); 268 if( typeof theme != 'undefined' && typeof theme._init == "function" ) theme._init(); // Load Theme 269 }); 270 271 if (base.options.slides.length > 1){ 272 // Set next image 273 vars.current_slide == base.options.slides.length - 1 ? loadNext = 0 : loadNext = vars.current_slide + 1; // If slide is last, load first slide as next 274 imageLink = (base.options.slides[loadNext].url) ? "href='" + base.options.slides[loadNext].url + "'" : ""; 275 276 var imgNext = $('<img src="'+base.options.slides[loadNext].image+'"/>'); 277 var slideNext = base.el+' li:eq('+loadNext+')'; 278 imgNext.appendTo(slideNext).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading'); 279 280 imgNext.load(function(){ 281 $(this).data('origWidth', $(this).width()).data('origHeight', $(this).height()); 282 base.resizeNow(); // Resize background image 283 }); // End Load 284 } 285 /*-----End load initial images-----*/ 286 287 // Hide elements to be faded in 288 base.$el.css('visibility','hidden'); 289 $('.load-item').hide(); 290 291 }; 292 293 294 /* Launch Supersized 295 ----------------------------*/ 296 base.launch = function(){ 297 298 base.$el.css('visibility','visible'); 299 $('#supersized-loader').remove(); //Hide loading animation 300 301 // Call theme function for before slide transition 302 if( typeof theme != 'undefined' && typeof theme.beforeAnimation == "function" ) theme.beforeAnimation('next'); 303 $('.load-item').show(); 304 305 // Keyboard Navigation 306 if (base.options.keyboard_nav){ 307 $(document.documentElement).keyup(function (event) { 308 309 if(vars.in_animation) return false; // Abort if currently animating 310 311 // Left Arrow or Down Arrow 312 if ((event.keyCode == 37) || (event.keyCode == 40)) { 313 clearInterval(vars.slideshow_interval); // Stop slideshow, prevent buildup 314 base.prevSlide(); 315 316 // Right Arrow or Up Arrow 317 } else if ((event.keyCode == 39) || (event.keyCode == 38)) { 318 clearInterval(vars.slideshow_interval); // Stop slideshow, prevent buildup 319 base.nextSlide(); 320 321 // Spacebar 322 } else if (event.keyCode == 32 && !vars.hover_pause) { 323 clearInterval(vars.slideshow_interval); // Stop slideshow, prevent buildup
324 base.playToggle(); 325 } 326 327 }); 328 } 329 330 // Pause when hover on image 331 if (base.options.slideshow && base.options.pause_hover){ 332 $(base.el).hover(function() { 333 if(vars.in_animation) return false; // Abort if currently animating 334 vars.hover_pause = true; // Mark slideshow paused from hover 335 if(!vars.is_paused){ 336 vars.hover_pause = 'resume'; // It needs to resume afterwards 337 base.playToggle(); 338 } 339 }, function() { 340 if(vars.hover_pause == 'resume'){ 341 base.playToggle(); 342 vars.hover_pause = false; 343 } 344 }); 345 } 346 347 if (base.options.slide_links){ 348 // Slide marker clicked 349 $(vars.slide_list+'> li').click(function(){ 350 351 index = $(vars.slide_list+'> li').index(this); 352 targetSlide = index + 1; 353 354 base.goTo(targetSlide); 355 return false; 356 357 }); 358 } 359 360 // Thumb marker clicked 361 if (base.options.thumb_links){ 362 $(vars.thumb_list+'> li').click(function(){ 363 364 index = $(vars.thumb_list+'> li').index(this); 365 targetSlide = index + 1; 366 367 api.goTo(targetSlide); 368 return false; 369 370 }); 371 } 372 373 // Start slideshow if enabled 374 if (base.options.slideshow && base.options.slides.length > 1){ 375 376 // Start slideshow if autoplay enabled 377 if (base.options.autoplay && base.options.slides.length > 1){ 378 vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval); // Initiate slide interval 379 }else{ 380 vars.is_paused = true; // Mark as paused 381 } 382 383 //Prevent navigation items from being dragged 384 $('.load-item img').bind("contextmenu mousedown",function(){ 385 return false; 386 }); 387 388 } 389 390 // Adjust image when browser is resized 391 $(window).resize(function(){ 392 base.resizeNow(); 393 }); 394 395 }; 396 397 398 /* ---------------------------------------------------------------------------------------------- 399 / Resize Images Animate 400 /-----------------------------------------------------------------------------------------------*/ 401 402 base.resizeNowAnimate = function(){ 403 404 return base.$el.each(function() { 405 // Resize each image seperately 406 $('img', base.el).each(function(){ 407 408 thisSlide = $(this); 409 var ratio = (thisSlide.data('origHeight')/thisSlide.data('origWidth')).toFixed(2); // Define image ratio 410 411 // Gather browser size 412 var browserwidth = base.$el.width(), 413 browserheight = base.$el.height(), 414 offset; 415 416 /*-----Resize Image-----*/ 417 if (base.options.fit_always){ // Fit always is enabled 418 if ((browserheight/browserwidth) > ratio){ 419 resizeWidthAnimate(); 420 } else { 421 resizeHeightAnimate(); 422 } 423 }else{ // Normal Resize 424 if ((browserheight <= base.options.min_height) && (browserwidth <= base.options.min_width)){ // If window smaller than minimum width and height 425 426 if ((browserheight/browserwidth) > ratio){ 427 base.options.fit_landscape && ratio < 1 ? resizeWidthAnimate(true) : resizeHeightAnimate(true); // If landscapes are set to fit 428 } else { 429 base.options.fit_portrait && ratio >= 1 ? resizeHeightAnimate(true) : resizeWidthAnimate(true); // If portraits are set to fit 430 } 431 432 } else if (browserwidth <= base.options.min_width){ // If window only smaller than minimum width 433 434 if ((browserheight/browserwidth) > ratio){ 435 base.options.fit_landscape && ratio < 1 ? resizeWidthAnimate(true) : resizeHeightAnimate(); // If landscapes are set to fit 436 } else { 437 base.options.fit_portrait && ratio >= 1 ? resizeHeightAnimate() : resizeWidthAnimate(true); // If portraits are set to fit 438 } 439 440 } else if (browserheight <= base.options.min_height){ // If window only smaller than minimum height 441 442 if ((browserheight/browserwidth) > ratio){ 443 base.options.fit_landscape && ratio < 1 ? resizeWidthAnimate() : resizeHeightAnimate(true); // If landscapes are set to fit 444 } else { 445 base.options.fit_portrait && ratio >= 1 ? resizeHeightAnimate(true) : resizeWidthAnimate(); // If portraits are set to fit 446 } 447 448 } else { // If larger than minimums 449 450 if ((browserheight/browserwidth) > ratio){ 451 base.options.fit_landscape && ratio < 1 ? resizeWidthAnimate() : resizeHeightAnimate(); // If landscapes are set to fit 452 } else { 453 base.options.fit_portrait && ratio >= 1 ? resizeHeightAnimate() : resizeWidthAnimate(); // If portraits are set to fit 454 } 455 456 } 457 } 458 /*-----End Image Resize-----*/ 459 460 461 462 /*-----Resize Animate Functions-----*/ 463 464 /*-----Resize Functions-----*/ 465 function resizeWidthAnimate(minimum){ 466 if (minimum){ // If minimum height needs to be considered 467 if(thisSlide.width() < browserwidth || thisSlide.width() < base.options.min_width ){ 468 if (thisSlide.width() * ratio >= base.options.min_height){ 469 thisSlide.animate({width: base.options.min_width, height: (thisSlide.width() * ratio)}, 500, 'easeOutCubic'); 470 }else{ 471 resizeHeightAnimate(); 472 } 473 } 474 }else{ 475 if (base.options.min_height >= browserheight && !base.options.fit_landscape){ // If minimum height needs to be considered 476 if (browserwidth * ratio >= base.options.min_height || (browserwidth * ratio >
476= base.options.min_height && ratio <= 1)){ // If resizing would push below minimum height or image is a landscape 477 thisSlide.animate({width: browserwidth, height: (browserwidth * ratio)}, 500, 'easeOutCubic'); 478 } else if (ratio > 1){ // Else the image is portrait 479 thisSlide.animate({height: (base.options.min_height), width: (thisSlide.height() / ratio)}, 500, 'easeOutCubic'); 480 } else if (thisSlide.width() < browserwidth) { 481 thisSlide.animate({width: (browserwidth), height: (thisSlide.width() * ratio)}, 500, 'easeOutCubic'); 482 } 483 }else{ // Otherwise, resize as normal 484 485 slideOrigWidth = thisSlide.width(); 486 slideOrigHeight = thisSlide.height(); 487 488 thisSlide.width(browserwidth); 489 thisSlide.height(browserwidth * ratio); 490 491 if (base.options.horizontal_center){ 492 thisSlide.css('left', (browserwidth - thisSlide.width())/2); 493 } 494 495 // Vertically Center 496 if (base.options.vertical_center){ 497 thisSlide.css('top', (browserheight - thisSlide.height())/2); 498 } 499 500 thisSlide.width(slideOrigWidth); 501 thisSlide.height(slideOrigHeight); 502 503 thisSlide.stop().animate({ 504 width: (browserwidth), 505 height: (browserwidth * ratio) 506 507 }, 500, 'easeOutCubic'); 508 509 510 511 512 } 513 } 514 }; 515 516 function resizeHeightAnimate(minimum){ 517 if (minimum){ // If minimum height needs to be considered 518 if(thisSlide.height() < browserheight){ 519 if (thisSlide.height() / ratio >= base.options.min_width){ 520 thisSlide.animate({height: (base.options.min_height), width: (thisSlide.height() / ratio)}, 500, 'easeOutCubic'); 521 }else{ 522 resizeWidthAnimate(true); 523 } 524 } 525 }else{ // Otherwise, resized as normal 526 if (base.options.min_width >= browserwidth){ // If minimum width needs to be considered 527 if (browserheight / ratio >= base.options.min_width || ratio > 1){ // If resizing would push below minimum width or image is a portrait 528 thisSlide.animate({height: (browserheight), width: (browserheight / ratio)}, 500, 'easeOutCubic'); 529 } else if (ratio <= 1){ // Else the image is landscape
530 thisSlide.animate({width: (base.options.min_width), height: (thisSlide.width() * ratio)}, 500, 'easeOutCubic'); 531 } 532 }else{ // Otherwise, resize as normal 533 534 slideOrigWidth = thisSlide.width(); 535 slideOrigHeight = thisSlide.height(); 536 537 thisSlide.width(browserheight / ratio); 538 thisSlide.height(browserheight); 539 540 if (base.options.horizontal_center){ 541 thisSlide.css('left', (browserwidth - thisSlide.width())/2); 542 } 543 544 // Vertically Center 545 if (base.options.vertical_center){ 546 thisSlide.css('top', (browserheight - thisSlide.height())/2); 547 } 548 549 thisSlide.width(slideOrigWidth); 550 thisSlide.height(slideOrigHeight); 551 552 thisSlide.stop().animate({ 553 width: (browserheight / ratio), 554 height: (browserheight) 555 }, 500, 'easeOutCubic'); 556 557 } 558 } 559 }; 560 561 562 /*-----End Resize Functions-----*/ 563 564 if (thisSlide.parents('li').hasClass('image-loading')){ 565 $('.image-loading').removeClass('image-loading'); 566 } 567 568 // Horizontally Center 569 570 /* 571 if (base.options.horizontal_center){ 572 $(this).css('left', (browserwidth - $(this).width())/2); 573 } 574 575 // Vertically Center 576 if (base.options.vertical_center){ 577 $(this).css('top', (browserheight - $(this).height())/2); 578 } */ 579 580 }); 581 582 // Basic image drag and right click protection 583 if (base.options.image_protect){ 584 585 $('img', base.el).bind("contextmenu mousedown",function(){ 586 return false; 587 }); 588 589 } 590 591 return false; 592 593 }); 594 595 }; 596 597 /* ---------------------------------------------------------------------------------------------- 598 / Resize Images Animate 599 /-----------------------------------------------------------------------------------------------*/ 600 601 602 /* Resize Images 603 ----------------------------*/ 604 base.resizeNow = function(){ 605 606 return base.$el.each(function() { 607 // Resize each image seperately 608 $('img', base.el).each(function(){ 609 610 thisSlide = $(this); 611 var ratio = (thisSlide.data('origHeight')/thisSlide.data('origWidth')).toFixed(2); // Define image ratio 612 613 // Gather browser size 614 var browserwidth = base.$el.width(), 615 browserheight = base.$el.height(), 616 offset; 617 618 /*-----Resize Image-----*/ 619 if (base.options.fit_always){ // Fit always is enabled 620 if ((browserheight/browserwidth) > ratio){ 621 resizeWidth(); 622 } else { 623 resizeHeight(); 624 } 625 }else{ // Normal Resize 626 if ((browserheight <= base.options.min_height) && (browserwidth <= base.options.min_width)){ // If window smaller than minimum width and height 627 628 if ((browserheight/browserwidth) > ratio){ 629 base.options.fit_landscape && ratio < 1 ? resizeWidth(true) : resizeHeight(true); // If landscapes are set to fit 630 } else { 631 base.options.fit_portrait && ratio >= 1 ? resizeHeight(true) : resizeWidth(true); // If portraits are set to fit 632 } 633 634 } else if (browserwidth <= base.options.min_width){ // If window only smaller than minimum width 635 636 if ((browserheight/browserwidth) > ratio){ 637 base.options.fit_landscape && ratio < 1 ? resizeWidth(true) : resizeHeight(); // If landscapes are set to fit 638 } else { 639 base.options.fit_portrait && ratio >= 1 ? resizeHeight() : resizeWidth(true); // If portraits are set to fit 640 } 641 642 } else if (browserheight <= base.options.min_height){ // If window only smaller than minimum height 643 644 if ((browserheight/browserwidth) > ratio){ 645 base.options.fit_landscape && ratio < 1 ? resizeWidth() : resizeHeight(true); // If landscapes are set to fit 646 } else { 647 base.options.fit_portrait && ratio >= 1 ? resizeHeight(true) : resizeWidth(); // If portraits are set to fit 648 } 649 650 } else { // If larger than minimums 651 652 if ((browserheight/browserwidth) > ratio){ 653 base.options.fit_landscape && ratio < 1 ? resizeWidth() : resizeHeight(); // If landscapes are set to fit 654 } else { 655 base.options.fit_portrait && ratio >= 1 ? resizeHeight() : resizeWidth(); // If portraits are set to fit 656 } 657 658 } 659 } 660 /*-----End Image Resize-----*/ 661 662 663 664 /*-----Resize Functions-----*/ 665 666 function resizeWidth(minimum){ 667 if (minimum){ // If minimum height needs to be considered 668 if(thisSlide.width() < browserwidth || thisSlide.width() < base.options.min_width ){ 669 if (thisSlide.width() * ratio >= base.options.min_height){ 670 thisSlide.width(base.options.min_width); 671 thisSlide.height(thisSlide.width() * ratio); 672 }else{ 673 resizeHeight(); 674 } 675 } 676 }else{ 677 if (base.options.min_height >= browserheight && !base.options.fit_landscape){ // If minimum height needs to be considered 678 if (browserwidth * ratio >= base.options.min_height || (browserwidth * ratio >
678= base.options.min_height && ratio <= 1)){ // If resizing would push below minimum height or image is a landscape 679 thisSlide.width(browserwidth); 680 thisSlide.height(browserwidth * ratio); 681 } else if (ratio > 1){ // Else the image is portrait 682 thisSlide.height(base.options.min_height); 683 thisSlide.width(thisSlide.height() / ratio); 684 } else if (thisSlide.width() < browserwidth) { 685 thisSlide.width(browserwidth); 686 thisSlide.height(thisSlide.width() * ratio); 687 } 688 }else{ // Otherwise, resize as normal 689 thisSlide.width(browserwidth); 690 thisSlide.height(browserwidth * ratio); 691 } 692 } 693 }; 694 695 function resizeHeight(minimum){ 696 if (minimum){ // If minimum height needs to be considered 697 if(thisSlide.height() < browserheight){ 698 if (thisSlide.height() / ratio >= base.options.min_width){ 699 thisSlide.height(base.options.min_height); 700 thisSlide.width(thisSlide.height() / ratio); 701 }else{ 702 resizeWidth(true); 703 } 704 } 705 }else{ // Otherwise, resized as normal 706 if (base.options.min_width >= browserwidth){ // If minimum width needs to be considered 707 if (browserheight / ratio >= base.options.min_width || ratio > 1){ // If resizing would push below minimum width or image is a portrait 708 thisSlide.height(browserheight); 709 thisSlide.width(browserheight / ratio); 710 } else if (ratio <= 1){ // Else the image is landscape
711 thisSlide.width(base.options.min_width); 712 thisSlide.height(thisSlide.width() * ratio); 713 } 714 }else{ // Otherwise, resize as normal 715 thisSlide.height(browserheight); 716 thisSlide.width(browserheight / ratio); 717 } 718 } 719 }; 720 721 /*-----End Resize Functions-----*/ 722 723 if (thisSlide.parents('li').hasClass('image-loading')){ 724 $('.image-loading').removeClass('image-loading'); 725 } 726 727 // Horizontally Center 728 if (base.options.horizontal_center){ 729 $(this).css('left', (browserwidth - $(this).width())/2); 730 } 731 732 // Vertically Center 733 if (base.options.vertical_center){ 734 $(this).css('top', (browserheight - $(this).height())/2); 735 } 736 737 }); 738 739 // Basic image drag and right click protection 740 if (base.options.image_protect){ 741 742 $('img', base.el).bind("contextmenu mousedown",function(){ 743 return false; 744 }); 745 746 } 747 748 return false; 749 750 }); 751 752 }; 753 754 755 /* Next Slide 756 ----------------------------*/ 757 base.nextSlide = function(){ 758 759 if(vars.in_animation || !api.options.slideshow) return false; // Abort if currently animating 760 else vars.in_animation = true; // Otherwise set animation marker 761 762 clearInterval(vars.slideshow_interval); // Stop slideshow 763 764 var slides = base.options.slides, // Pull in slides array 765 liveslide = base.$el.find('.activeslide'); // Find active slide 766 $('.prevslide').removeClass('prevslide'); 767 liveslide.removeClass('activeslide').addClass('prevslide'); // Remove active class & update previous slide 768 769 // Get the slide number of new slide 770 vars.current_slide + 1 == base.options.slides.length ? vars.current_slide = 0 : vars.current_slide++; 771 772 var nextslide = $(base.el+' li:eq('+vars.current_slide+')'), 773 prevslide = base.$el.find('.prevslide'); 774 775 // If hybrid mode is on drop quality for transition 776 if (base.options.performance == 1) base.$el.removeClass('quality').addClass('speed'); 777 778 779 /*-----Load Image-----*/ 780 781 loadSlide = false; 782 783 vars.current_slide == base.options.slides.length - 1 ? loadSlide = 0 : loadSlide = vars.current_slide + 1; // Determine next slide 784 785 var targetList = base.el+' li:eq('+loadSlide+')'; 786 if (!$(targetList).html()){ 787 788 // If links should open in new window 789 var linkTarget = base.options.new_window ? ' target="_blank"' : ''; 790 791 imageLink = (base.options.slides[loadSlide].url) ? "href='" + base.options.slides[loadSlide].url + "'" : ""; // If link exists, build it 792 var img = $('<img src="'+base.options.slides[loadSlide].image+'"/>'); 793 794 img.appendTo(targetList).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading').css('visibility','hidden'); 795 796 img.load(function(){ 797 base._origDim($(this)); 798 base.resizeNow(); 799 }); // End Load 800 }; 801 802 // Update thumbnails (if enabled) 803 if (base.options.thumbnail_navigation == 1){ 804 805 // Load previous thumbnail 806 vars.current_slide - 1 < 0 ? prevThumb = base.options.slides.length - 1 : prevThumb = vars.current_slide - 1; 807 $(vars.prev_thumb).html($("<img/>").attr("src", base.options.slides[prevThumb].image)); 808 809 // Load next thumbnail 810 nextThumb = loadSlide; 811 $(vars.next_thumb).html($("<img/>").attr("src", base.options.slides[nextThumb].image)); 812 813 } 814 815 816 817 /*-----End Load Image-----*/ 818 819 820 // Call theme function for before slide transition 821 if( typeof theme != 'undefined' && typeof theme.beforeAnimation == "function" ) theme.beforeAnimation('next'); 822 823 //Update slide markers 824 if (base.options.slide_links){ 825 $('.current-slide').removeClass('current-slide'); 826 $(vars.slide_list +'> li' ).eq(vars.current_slide).addClass('current-slide'); 827 } 828 829 nextslide.css('visibility','hidden').addClass('activeslide'); // Update active slide 830 831 switch(base.options.transition){ 832 case 0: case 'none': // No transition 833 nextslide.css('visibility','visible'); vars.in_animation = false; base.afterAnimation(); 834 break; 835 case 1: case 'fade': // Fade 836 nextslide.animate({opacity : 0},0).css('visibility','visible').animate({opacity : 1, avoidTransforms : false}, base.options.transition_speed, function(){ base.afterAnimation(); }); 837 break; 838 case 2: case 'slideTop': // Slide Top 839 nextslide.animate({top : -base.$el.height()}, 0 ).css('visibility','visible').animate({ top:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); }); 840 break; 841 case 3: case 'slideRight': // Slide Right 842 nextslide.animate({left : base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); }); 843 break; 844 case 4: case 'slideBottom': // Slide Bottom 845 nextslide.animate({top : base.$el.height()}, 0 ).css('visibility','visible').animate({ top:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); }); 846 break; 847 case 5: case 'slideLeft': // Slide Left 848 nextslide.animate({left : -base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); }); 849 break; 850 case 6: case 'carouselRight': // Carousel Right 851 nextslide.animate({left : base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); }); 852 liveslide.animate({ left: -base.$el.width(), avoidTransforms : false }, base.options.transition_speed ); 853 break; 854 case 7: case 'carouselLeft': // Carousel Left 855 nextslide.animate({left : -base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); }); 856 liveslide.animate({ left: base.$el.width(), avoidTransforms : false }, base.options.transition_speed ); 857 break; 858 } 859 return false; 860 }; 861 862 863 /* Previous Slide 864 ----------------------------*/ 865 base.prevSlide = function(){ 866 867 if(vars.in_animation || !api.options.slideshow) return false; // Abort if currently animating 868 else vars.in_animation = true; // Otherwise set animation marker 869 870 clearInterval(vars.slideshow_interval); // Stop slideshow 871 872 var slides = base.options.slides, // Pull in slides array 873 liveslide = base.$el.find('.activeslide'); // Find active slide 874 $('.prevslide').removeClass('prevslide'); 875 liveslide.removeClass('activeslide').addClass('prevslide'); // Remove active class & update previous slide 876 877 // Get current slide number 878 vars.current_slide == 0 ? vars.current_slide = base.options.slides.length - 1 : vars.current_slide-- ; 879 880 var nextslide = $(base.el+' li:eq('+vars.current_slide+')'), 881 prevslide = base.$el.find('.prevslide'); 882 883 // If hybrid mode is on drop quality for transition 884 if (base.options.performance == 1) base.$el.removeClass('quality').addClass('speed'); 885 886 887 /*-----Load Image-----*/ 888 889 loadSlide = vars.current_slide; 890 891 var targetList = base.el+' li:eq('+loadSlide+')'; 892 if (!$(targetList).html()){ 893 // If links should open in new window 894 var linkTarget = base.options.new_window ? ' target="_blank"' : ''; 895 imageLink = (base.options.slides[loadSlide].url) ? "href='" + base.options.slides[loadSlide].url + "'" : ""; // If link exists, build it 896 var img = $('<img src="'+base.options.slides[loadSlide].image+'"/>'); 897 898 img.appendTo(targetList).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading').css('visibility','hidden'); 899 900 img.load(function(){ 901 base._origDim($(this)); 902 base.resizeNow(); 903 }); // End Load 904 }; 905 906 // Update thumbnails (if enabled) 907 if (base.options.thumbnail_navigation == 1){ 908 909 // Load previous thumbnail 910 //prevThumb = loadSlide; 911 loadSlide == 0 ? prevThumb = base.options.slides.length - 1 : prevThumb = loadSlide - 1; 912 $(vars.prev_thumb).html($("<img/>").attr("src", base.options.slides[prevThumb].image)); 913 914 // Load next thumbnail 915 vars.current_slide == base.options.slides.length - 1 ? nextThumb = 0 : nextThumb = vars.current_slide + 1; 916 $(vars.next_thumb).html($("<img/>").attr("src", base.options.slides[nextThumb].image)); 917 } 918 919 /*-----End Load Image-----*/ 920 921 922 // Call theme function for before slide transition 923 if( typeof theme != 'undefined' && typeof theme.beforeAnimation == "function" ) theme.beforeAnimation('prev'); 924 925 //Update slide markers 926 if (base.options.slide_links){ 927 $('.current-slide').removeClass('current-slide'); 928 $(vars.slide_list +'> li' ).eq(vars.current_slide).addClass('current-slide'); 929 } 930 931 nextslide.css('visibility','hidden').addClass('activeslide'); // Update active slide 932 933 switch(base.options.transition){ 934 case 0: case 'none': // No transition 935 nextslide.css('visibility','visible'); vars.in_animation = false; base.afterAnimation(); 936 break; 937 case 1: case 'fade': // Fade 938 nextslide.animate({opacity : 0},0).css('visibility','visible').animate({opacity : 1, avoidTransforms : false}, base.options.transition_speed, function(){ base.afterAnimation(); }); 939 break; 940 case 2: case 'slideTop': // Slide Top (reverse) 941 nextslide.animate({top : base.$el.height()}, 0 ).css('visibility','visible').animate({ top:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); }); 942 break; 943 case 3: case 'slideRight': // Slide Right (reverse) 944 nextslide.animate({left : -base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); }); 945 break; 946 case 4: case 'slideBottom': // Slide Bottom (reverse) 947 nextslide.animate({top : -base.$el.height()}, 0 ).css('visibility','visible').animate({ top:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); }); 948 break; 949 case 5: case 'slideLeft': // Slide Left (reverse) 950 nextslide.animate({left : base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); }); 951 break; 952 case 6: case 'carouselRight': // Carousel Right (reverse) 953 nextslide.animate({left : -base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); }); 954 liveslide.animate({left : 0}, 0 ).animate({ left: base.$el.width(), avoidTransforms : false}, base.options.transition_speed ); 955 break; 956 case 7: case 'carouselLeft': // Carousel Left (reverse) 957 nextslide.animate({left : base.$el.width()}, 0 ).css('visibility','visible').animate({ left:0, avoidTransforms : false }, base.options.transition_speed, function(){ base.afterAnimation(); }); 958 liveslide.animate({left : 0}, 0 ).animate({ left: -base.$el.width(), avoidTransforms : false }, base.options.transition_speed ); 959 break; 960 } 961 return false; 962 }; 963 964 965 /* Play/Pause Toggle 966 ----------------------------*/ 967 base.playToggle = function(){ 968 969 if (vars.in_animation || !api.options.slideshow) return false; // Abort if currently animating 970 971 if (vars.is_paused){ 972 973 vars.is_paused = false; 974 975 // Call theme function for play 976 if( typeof theme != 'undefined' && typeof theme.playToggle == "function" ) theme.playToggle('play'); 977 978 // Resume slideshow 979 vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval); 980 981 }else{ 982 983 vars.is_paused = true; 984 985 // Call theme function for pause 986 if( typeof theme != 'undefined' && typeof theme.playToggle == "function" ) theme.playToggle('pause'); 987 988 // Stop slideshow 989 clearInterval(vars.slideshow_interval); 990 991 } 992 993 return false; 994 995 }; 996 997 998 /* Go to specific slide 999 ----------------------------*/ 1000 base.goTo = function(targetSlide){ 1001 if (vars.in_animation || !api.options.slideshow) return false; // Abort if currently animating 1002 1003 var totalSlides = base.options.slides.length; 1004 1005 // If target outside range
1006 if(targetSlide < 0){ 1007 targetSlide = totalSlides; 1008 }else if(targetSlide > totalSlides){ 1009 targetSlide = 1; 1010 } 1011 targetSlide = totalSlides - targetSlide + 1; 1012 1013 clearInterval(vars.slideshow_interval); // Stop slideshow, prevent buildup 1014 1015 // Call theme function for goTo trigger 1016 if (typeof theme != 'undefined' && typeof theme.goTo == "function" ) theme.goTo(); 1017 1018 if (vars.current_slide == totalSlides - targetSlide){ 1019 if(!(vars.is_paused)){ 1020 vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval); 1021 } 1022 return false; 1023 } 1024 1025 // If ahead of current position 1026 if(totalSlides - targetSlide > vars.current_slide ){ 1027 1028 // Adjust for new next slide 1029 vars.current_slide = totalSlides-targetSlide-1; 1030 vars.update_images = 'next'; 1031 base._placeSlide(vars.update_images); 1032 1033 //Otherwise it's before current position 1034 }else if(totalSlides - targetSlide < vars.current_slide){ 1035 1036 // Adjust for new prev slide 1037 vars.current_slide = totalSlides-targetSlide+1; 1038 vars.update_images = 'prev'; 1039 base._placeSlide(vars.update_images); 1040 1041 } 1042 1043 // set active markers 1044 if (base.options.slide_links){ 1045 $(vars.slide_list +'> .current-slide').removeClass('current-slide'); 1046 $(vars.slide_list +'> li').eq((totalSlides-targetSlide)).addClass('current-slide'); 1047 } 1048 1049 if (base.options.thumb_links){ 1050 $(vars.thumb_list +'> .current-thumb').removeClass('current-thumb'); 1051 $(vars.thumb_list +'> li').eq((totalSlides-targetSlide)).addClass('current-thumb'); 1052 } 1053 1054 }; 1055 1056 1057 /* Place Slide 1058 ----------------------------*/ 1059 base._placeSlide = function(place){ 1060 1061 // If links should open in new window 1062 var linkTarget = base.options.new_window ? ' target="_blank"' : ''; 1063 1064 loadSlide = false; 1065 1066 if (place == 'next'){ 1067 1068 vars.current_slide == base.options.slides.length - 1 ? loadSlide = 0 : loadSlide = vars.current_slide + 1; // Determine next slide 1069 1070 var targetList = base.el+' li:eq('+loadSlide+')'; 1071 1072 if (!$(targetList).html()){ 1073 // If links should open in new window 1074 var linkTarget = base.options.new_window ? ' target="_blank"' : ''; 1075 1076 imageLink = (base.options.slides[loadSlide].url) ? "href='" + base.options.slides[loadSlide].url + "'" : ""; // If link exists, build it 1077 var img = $('<img src="'+base.options.slides[loadSlide].image+'"/>'); 1078 1079 img.appendTo(targetList).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading').css('visibility','hidden'); 1080 1081 img.load(function(){ 1082 base._origDim($(this)); 1083 base.resizeNow(); 1084 }); // End Load 1085 }; 1086 1087 base.nextSlide(); 1088 1089 }else if (place == 'prev'){ 1090 1091 vars.current_slide - 1 < 0 ? loadSlide = base.options.slides.length - 1 : loadSlide = vars.current_slide - 1; // Determine next slide 1092 1093 var targetList = base.el+' li:eq('+loadSlide+')'; 1094 1095 if (!$(targetList).html()){ 1096 // If links should open in new window 1097 var linkTarget = base.options.new_window ? ' target="_blank"' : ''; 1098 1099 imageLink = (base.options.slides[loadSlide].url) ? "href='" + base.options.slides[loadSlide].url + "'" : ""; // If link exists, build it 1100 var img = $('<img src="'+base.options.slides[loadSlide].image+'"/>'); 1101 1102 img.appendTo(targetList).wrap('<a ' + imageLink + linkTarget + '></a>').parent().parent().addClass('image-loading').css('visibility','hidden'); 1103 1104 img.load(function(){ 1105 base._origDim($(this)); 1106 base.resizeNow(); 1107 }); // End Load 1108 }; 1109 base.prevSlide(); 1110 } 1111 1112 }; 1113 1114 1115 /* Get Original Dimensions 1116 ----------------------------*/ 1117 base._origDim = function(targetSlide){ 1118 targetSlide.data('origWidth', targetSlide.width()).data('origHeight', targetSlide.height()); 1119 }; 1120 1121 1122 /* After Slide Animation 1123 ----------------------------*/ 1124 base.afterAnimation = function(){ 1125 1126 // If hybrid mode is on swap back to higher image quality 1127 if (base.options.performance == 1){ 1128 base.$el.removeClass('speed').addClass('quality'); 1129 } 1130 1131 // Update previous slide 1132 if (vars.update_images){ 1133 vars.current_slide - 1 < 0 ? setPrev = base.options.slides.length - 1 : setPrev = vars.current_slide-1; 1134 vars.update_images = false; 1135 $('.prevslide').removeClass('prevslide'); 1136 $(base.el+' li:eq('+setPrev+')').addClass('prevslide'); 1137 } 1138 1139 vars.in_animation = false; 1140 1141 // Resume slideshow 1142 if (!vars.is_paused && base.options.slideshow){ 1143 vars.slideshow_interval = setInterval(base.nextSlide, base.options.slide_interval); 1144 if (base.options.stop_loop && vars.current_slide == base.options.slides.length - 1 ) base.playToggle(
1144); 1145 } 1146 1147 // Call theme function for after slide transition 1148 if (typeof theme != 'undefined' && typeof theme.afterAnimation == "function" ) theme.afterAnimation(); 1149 1150 return false; 1151 1152 }; 1153 1154 base.getField = function(field){ 1155 return base.options.slides[vars.current_slide][field]; 1156 }; 1157 1158 // Make it go! 1159 base.init(); 1160 }; 1161 1162 1163 /* Global Variables 1164 ----------------------------*/ 1165 $.supersized.vars = { 1166 1167 // Elements 1168 thumb_tray : '#thumb-tray', // Thumbnail tray 1169 thumb_list : '#thumb-list', // Thumbnail list 1170 slide_list : '#slide-list', // Slide link list 1171 1172 // Internal variables 1173 current_slide : 0, // Current slide number 1174 in_animation : false, // Prevents animations from stacking 1175 is_paused : false, // Tracks paused on/off 1176 hover_pause : false, // If slideshow is paused from hover 1177 slideshow_interval : false, // Stores slideshow timer 1178 update_images : false, // Trigger to update images after slide jump 1179 options : {} // Stores assembled options list 1180 1181 }; 1182 1183 1184 /* Default Options 1185 ----------------------------*/ 1186 $.supersized.defaultOptions = { 1187 1188 // Functionality 1189 slideshow : 1, // Slideshow on/off 1190 autoplay : 1, // Slideshow starts playing automatically 1191 start_slide : 1, // Start slide (0 is random) 1192 stop_loop : 0, // Stops slideshow on last slide 1193 random : 0, // Randomize slide order (Ignores start slide) 1194 slide_interval : 5000, // Length between transitions 1195 transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left 1196 transition_speed : 750, // Speed of transition 1197 new_window : 1, // Image links open in new window/tab 1198 pause_hover : 0, // Pause slideshow on hover 1199 keyboard_nav : 1, // Keyboard navigation on/off 1200 performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit) 1201 image_protect : 1, // Disables image dragging and right click with Javascript 1202 1203 // Size & Position 1204 fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions) 1205 fit_landscape : 0, // Landscape images will not exceed browser width 1206 fit_portrait : 1, // Portrait images will not exceed browser height 1207 min_width : 0, // Min width allowed (in pixels) 1208 min_height : 0, // Min height allowed (in pixels) 1209 horizontal_center : 1, // Horizontally center background 1210 vertical_center : 1, // Vertically center background 1211 1212 1213 // Components 1214 slide_links : 1, // Individual links for each slide (Options: false, 'num', 'name', 'blank') 1215 thumb_links : 1, // Individual thumb links for each slide 1216 thumbnail_navigation : 0 // Thumbnail navigation 1217 1218 }; 1219 1220 $.fn.supersized = function(options){ 1221 return this.each(function(){ 1222 (new $.supersized(options)); 1223 }); 1224 }; 1225 1226 1227 1228})(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.