1/* 2 3 Awkward Showcase - jQuery plugin 4 http://www.jquery.com 5 http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin 6 http://demo.awkwardgroup.com/showcase 7 Version: 1.1.3 8 9 Copyright (C) 2011 Awkward Group (http://www.awkwardgroup.com) 10 Licensed under Attribution-ShareAlike 3.0 Unported 11 http://creativecommons.org/licenses/by-sa/3.0/ 12 13 Markup example for jQuery("#showcase").awShowcase(); 14 15 <div id="showcase" class="showcase"> 16 <!-- Each child div in #showcase represents a slide --> 17 <div class="showcase-slide"> 18 <!-- Put the slide content in a div with the class .showcase-content --> 19 <div class="showcase-content"> 20 <!-- If the slide contains multiple elements you should wrap them in a div with the class .showcase-content-wrapper. 21 We usually wrap even if there is only one element, because it looks better. :-) --> 22 <div class="showcase-content-wrapper"> 23 <img src="images/01.jpg" alt="01" /> 24 </div> 25 </div> 26 <!-- Put the caption content in a div with the class .showcase-caption --> 27 <div class="showcase-caption"> 28 The Caption 29 </div> 30 <!-- Put the tooltips in a div with the class .showcase-tooltips. --> 31 <div class="showcase-tooltips"> 32 <!-- Each anchor in .showcase-tooltips represents a tooltip. The coords attribute represents the position of the tooltip. --> 33 <a href="http://www.awkward.se" coords="634,130"> 34 <!-- The content of the anchor-tag is displayed in the tooltip. --> 35 This is a tooltip that displays the anchor html in a nice way. 36 </a> 37 <a href="http://www.awkward.se" coords="356, 172"> 38 <!-- You can add multiple elements to the anchor-tag which are display in the tooltip. --> 39 <img src="images/glasses.png" /> 40 <span style="display: block; font-weight: bold; padding: 3px 0 3px 0; text-align: center;"> 41 White Glasses: 500$ 42 </span> 43 </a> 44 </div> 45 </div> 46 <div class="showcase-slide"> 47 <div class="showcase-content"> 48 <div class="showcase-content-wrapper"> 49 Content... 50 </div> 51 </div> 52 </div> 53 </div> 54 55*/ 56 57(function(jQuery) { 58 59 jQuery.fn.awShowcase = function(options) { 60 var $ = jQuery; 61 // Default configuration properties 62 var defaults = 63 { 64 content_width: 700, 65 content_height: 470, 66 fit_to_parent: false, 67 auto: false, 68 interval: 3000, 69 continuous: false, 70 loading: true, 71 tooltip_width: 200, 72 tooltip_icon_width: 32, 73 tooltip_icon_height: 32, 74 tooltip_offsetx: 18, 75 tooltip_offsety: 0, 76 arrows: true, 77 buttons: true, 78 btn_numbers: false, 79 keybord_keys: false, 80 mousetrace: false, /* Trace x and y coordinates for the mouse */ 81 pauseonover: true, 82 stoponclick: true, 83 transition: 'hslide', /* hslide / vslide / fade */ 84 transition_delay: 300, 85 transition_speed: 500, 86 show_caption: 'onload', /* onload / onhover / show */ 87 thumbnails: false, 88 thumbnails_position: 'outside-last', /* outside-last / outside-first / inside-last / inside-first */ 89 thumbnails_direction: 'vertical', /* vertical / horizontal */ 90 thumbnails_slidex: 0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */ 91 dynamic_height: false, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */ 92 speed_change: false, /* This prevents user from swithing more then one slide at once */ 93 viewline: false, /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. */ 94 fullscreen_width_x: 15, 95 custom_function: null 96 }; 97 98 // ***************** 99 // SET UP THE PLUGIN 100 // ***************** 101 102 // Declare and set up some important variables 103 options = jQuery.extend(defaults, options); 104 var current_id = 0; 105 var previous_id = 0; 106 var break_loop = false; 107 var pause_loop = false; 108 var myInterval = null; 109 var showcase = jQuery(this); 110 var showcase_width = options.content_width; 111 var animating = false; 112 // Viewline specific variables 113 var content_viewline_width = 10000; 114 var animation_distance = 0; 115 var old_animation_distance = 0; 116 var remaining_width = 0; 117 118 // Set up the content wrapper 119 var content_container = jQuery(document.createElement('div')) 120 .css('overflow', 'hidden') 121 .css('position', 'relative') 122 .addClass('showcase-content-container') 123 .prependTo(showcase); 124
125 // Set up the showcase for hundred percent width 126 if (options.fit_to_parent) 127 { 128 showcase_width = jQuery(showcase).width() + options.fullscreen_width_x; 129 } 130 131 // Set up the showcase for Viewline Mayhem 132 if (options.viewline) 133 { 134 options.thumbnails = false; 135 options.dynamic_height = false; 136 content_container.css('width', content_viewline_width); 137 showcase.css('overflow', 'hidden'); 138 $('.showcase-arrow-previous').hide(); 139 } 140 141 // Set up content and create the content and thumbnail array 142 var contentArray = []; 143 var thumbnailArray = []; 144 var content_count = 0; 145 showcase.children('.showcase-slide').each(function() 146 { 147 // Get content 148 var object = jQuery(this); 149 content_count++; 150 151 // If thumbnails are activated 152 if (options.thumbnails) 153 { 154 // Get thumbnail and put in array 155 var thumb = object.find('.showcase-thumbnail'); 156 thumbnailArray.push(thumb); 157 thumb.remove(); 158 } 159 160 // Set content width and height 161 var object_width = object.find('.showcase-content').children().width(); 162 var object_height = object.find('.showcase-content').children().height(); 163 164 // Add content html in array and remove it from DOM 165 contentArray.push(object.html()); 166 object.remove(); 167 168 // Get correct content 169 var new_object = getContent(content_count-1); 170 if (options.viewline || content_count === 1) { content_container.append(new_object); } 171 172 // Viewline setup 173 if (options.viewline) 174 { 175 new_object.css('position', 'relative'); 176 new_object.css('float', 'left'); 177 new_object.css('width', object_width); 178 } 179 180 // Set content and content container load height 181 if (options.dynamic_height) 182 { 183 new_object.css('height', object_height); 184 if (content_count === 1) { content_container.css('height', object_height); } 185 } 186 else 187 { 188 new_object.css('height', options.content_height); 189 if (content_count === 1) { content_container.css('height', options.content_height); } 190 } 191 192 if (options.viewline || content_count === 1) 193 { 194 displayAnchors(new_object); 195 // displayCaption(new_object); 196 197 if (options.show_caption === 'show') 198 { 199 jQuery(new_object).find('.showcase-caption').show(); 200 } 201 } 202 }); 203 204 // Declare and set up the thumbnail wrapper 205 var thumb_wrapper; 206 var thumbnailStretch = 0; 207 var thumbnailsPerPage = 0; 208 var i; 209 210 if (options.thumbnails) 211 { 212 // Create wrapper 213 thumb_container = jQuery('<div />'); 214 thumb_restriction = jQuery('<div />'); 215 thumb_wrapper = jQuery('<div />'); 216 217 // Add content to thumbnail wrapper 218 for (i = thumbnailArray.length-1; i >= 0; --i) 219 { 220 var thumbnail = jQuery(thumbnailArray[i]); 221 thumbnail.attr('id', 'showcase-thumbnail-' + i); 222 thumbnail.addClass((i === 0) ? 'active' : ''); 223 thumbnail.click(function(a, b) 224 { 225 // This function is used to extract the correct i value on click 226 return function() 227 { 228 // Disable auto change on click 229 if (myInterval) { pause_loop = true; clearInterval(myInterval); } 230 changeContent(a, b); 231 }; 232 }(i, '')); 233 thumb_wrapper.prepend(thumbnail); 234 } 235 236 // Style and position thumbnail container and content wrapper 237 // + insert thumbnail container 238 if (options.thumbnails_position === 'outside-first' || options.thumbnails_position === 'outside-last') 239 { 240 if (options.thumbnails_direction !== 'horizontal') 241 { 242 /* outside & vertical */ 243 content_container.css('float', 'left'); 244 content_container.css('width', options.content_width); 245 thumb_container.css('float', 'left'); 246 thumb_container.css('height', options.content_height); 247 } 248 else 249 { 250 /* outside & horizontal */ 251 jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float', 'left'); 252 //jQuery(thumb_wrapper).append(jQuery('<div />').addClass('clear')); 253 } 254 255 if (options.thumbnails_position === 'outside-last') 256 { 257 /* outside-last */ 258 showcase.append(thumb_container); 259 if (options.thumbnails_direction !== 'horizontal') { showcase.append(jQuery('<div />').addClass('clear')); } 260 } 261 else 262 { 263 /* outside-first */ 264 showcase.prepend(thumb_container); 265 if (options.thumbnails_direction !== 'horizontal') { showcase.append(jQuery('<div />').addClass('clear')); } 266 } 267 } 268 else 269 { 270 thumb_container.css({'position' : 'absolute', 'z-index' : 20}); 271 if (options.thumbnails_direction === 'horizontal') 272 { 273 /* inside & horizontal */ 274 thumb_container.css({'left' : 0, 'right' : 0}); 275 jQuery(thumb_wrapper).find('.showcase-thumbnail').css('float', 'left'); 276 jQuery(thumb_wrapper).append(jQuery('<div />').addClass('clear')); 277 278 /* inside first */
279 if (options.thumbnails_position === 'inside-first') { thumb_container.css('top', 0); } 280 /* inside last */ 281 else { thumb_container.css('bottom', 0); } 282 } 283 else 284 { 285 /* inside & vertical */ 286 thumb_container.css({'top' : 0, 'bottom' : 0}); 287 /* inside first */ 288 if (options.thumbnails_position === 'inside-first') { thumb_container.css('left', 0); } 289 /* inside last */ 290 else { thumb_container.css('right', 0); } 291 } 292 content_container.prepend(thumb_container); 293 } 294 295 // Add class and style to thumbnail container 296 thumb_container.addClass('showcase-thumbnail-container'); 297 thumb_container.css('overflow', 'hidden'); 298 299 // Add class and style to thumbnail restriction 300 thumb_restriction.addClass('showcase-thumbnail-restriction'); 301 thumb_restriction.css({'overflow' : 'hidden', 'position' : 'relative'}); 302 if (options.thumbnails_direction === 'horizontal') { thumb_restriction.css({'float' : 'left'}); } 303 304 // Add class and style to thumbnail wrapper 305 thumb_wrapper.addClass('showcase-thumbnail-wrapper'); 306 if (options.thumbnails_direction === 'horizontal') { thumb_wrapper.addClass('showcase-thumbnail-wrapper-horizontal'); } 307 else { thumb_wrapper.addClass('showcase-thumbnail-wrapper-vertical'); } 308 thumb_wrapper.css('position', 'relative'); 309 310 // Append wrapper and restriction 311 thumb_restriction.append(thumb_wrapper); 312 thumb_container.append(thumb_restriction); 313 314 // Add backward button 315 var buttonBackward = jQuery('<div class="showcase-thumbnail-button-backward" />'); 316 if (options.thumbnails_direction !== 'horizontal') 317 { 318 buttonBackward.html('<span class="showcase-thumbnail-vertical"><span>UP</span></span>'); 319 } 320 else 321 { 322 buttonBackward.css({'float' : 'left'}); 323 buttonBackward.html('<span class="showcase-thumbnail-horizontal"><span>Left</span></span>'); 324 } 325 buttonBackward.click(function() { slideThumbnailWrapper('backward', false, true); }); 326 thumb_container.prepend(buttonBackward); 327 328 // Add forward button 329 var buttonForward = jQuery('<div class="showcase-thumbnail-button-forward" />'); 330 if (options.thumbnails_direction !== 'horizontal') 331 { 332 buttonForward.html('<span class="showcase-thumbnail-vertical"><span>Down</span></span>'); 333 } 334 else 335 { 336 buttonForward.css({'float' : 'left'}); 337 buttonForward.html('<span class="showcase-thumbnail-horizontal"><span>Right</span></span>'); 338 } 339 buttonForward.click(function() { slideThumbnailWrapper('forward', false, true); }); 340 thumb_container.append(buttonForward); 341 342 // Set the number of thumbnails per page. 343// var thumbnailHeightOrWidth = $('.showcase-thumbnail').outerHeight(true); 344 var thumbnailVisibleStretch = 0; 345 if (options.thumbnails_direction !== 'horizontal') 346 { 347 thumbnailVisibleStretch = getElementHeight(thumb_wrapper, false); 348 // for correction after added up/down buttons (16*2 elements) 349 thumbnailVisibleStretch += (getElementHeight(buttonBackward)) + (getElementHeight(buttonForward) - 32); 350 351 while (thumbnailVisibleStretch <= options.content_height) 352 { 353 thumbnailVisibleStretch += getElementHeight(jQuery(thumbnailArray[0])); 354 thumbnailsPerPage++; 355 } 356 thumbnailsPerPage -=1; 357 } 358 else 359 { 360 thumbnailVisibleStretch = getElementWidth(thumb_wrapper, false); 361 thumbnailVisibleStretch += (getElementWidth(buttonBackward)) + (getElementWidth(buttonForward)); 362 363 while (thumbnailVisibleStretch < showcase_width) 364 { 365 thumbnailVisibleStretch += getElementWidth(jQuery(thumbnailArray[0])); 366 thumbnailsPerPage++; 367 } 368 } 369 370 // Hide buttons if they're not necessary 371 if (thumbnailsPerPage+1 > thumbnailArray.length) 372 { 373 if (options.thumbnails_direction !== 'horizontal') 374 { 375 thumb_restriction.css('padding-top', getElementHeight(buttonBackward)); 376 } 377 else 378 { 379 thumb_restriction.css('margin-left', getElementWidth(buttonBackward)); 380 } 381 buttonBackward.hide(); 382 buttonForward.hide(); 383 } 384 385 // Set thumbnail restriction height or width 386 if (options.thumbnails_direction !== 'horizontal') 387 { 388 var buttonsHeight = (getElementHeight(buttonBackward)) + (getElementHeight(buttonForward)); 389 // for correction after added up/down buttons (16*2 elements) 390 buttonsHeight = buttonsHeight - 32; 391 thumb_restriction.css('height', options.content_height - buttonsHeight); 392 } 393 else 394 { 395 var buttonsWidth = (getElementWidth(buttonBackward)) + (getElementWidth(buttonForward)); 396 thumb_restriction.css('width', showcase_width-buttonsWidth); 397 } 398 399 // Set thumbnail wrapper width 400 if (options.thumbnails_direction === 'horizontal') 401 { 402 //jQuery('.showcase-thumbnail').each(function() { thumbnailStretch += getElementWidth(jQuery(this)); }); 403 content_container.parent('.showcase').find('.showcase-thumbnail').each(function() { thumbnailStretch += getElementWidth(jQuery(this)); }); 404 thumb_wrapper.css('width', thumbnailStretch); 405 } 406 else { 407 content_container.parent('.showcase').find('.showcase-thumbnail').each(function() { thumbnailStretch += getElementHeight(jQuery(this)); }); 408 } 409 } 410 411 // Set showcase width and height 412 if (options.thumbnails && options.thumbnails_position.indexOf("outside") !== -1 && options.thumbnails_direction !== 'horizontal' && !options.viewline) 413 { 414 showcase.css('width', showcase_width + getElementWidth(thumb_wrapper, true, false)); 415 } 416 else if (!options.fit_to_parent) { showcase.css('width', showcase_width); } 417 418 // Turn on/off auto slide 419 if (content_count >
419 1 && options.auto) { myInterval = window.setInterval(autoChange, options.interval); } 420 421 // Pause auto on mouse over 422 if (options.auto && options.pauseonover) 423 { 424 showcase.mouseenter(function() { break_loop = true; clearInterval(myInterval); }); 425 showcase.mouseleave(function() 426 { 427 if (!pause_loop) 428 { 429 break_loop = false; myInterval = window.setInterval(autoChange, options.interval); 430 } 431 }); 432 } 433 434 // Adding navigation arrows 435 if (options.arrows && content_count > 1) 436 { 437 // Left arrow 438 jQuery(document.createElement('div')) 439 .addClass('showcase-arrow-previous') 440 .prependTo(showcase) 441 .click(function() { 442 // Disable auto change on click 443 if (myInterval) 444 { 445 if (options.stoponclick) { pause_loop = true; } 446 clearInterval(myInterval); 447 } 448 changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous'); 449 }); 450 // Right arrow 451 jQuery(document.createElement('div')) 452 .addClass('showcase-arrow-next') 453 .prependTo(showcase) 454 .click(function() { 455 // Disable auto change on click 456 if (myInterval) 457 { 458 if (options.stoponclick) { pause_loop = true; } 459 clearInterval(myInterval); 460 } 461 changeContent(current_id+1, 'next'); 462 }); 463 464 if (options.viewline) { $('.showcase-arrow-previous').hide(); } 465 } 466 467 // Adding navigation buttons 468 if (options.buttons && content_count > 1) 469 { 470 // Create button wrapper 471 jQuery(document.createElement('div')) 472 .css('clear', 'both') 473 .addClass('showcase-button-wrapper') 474 .appendTo(showcase); 475 i = 0; 476 // Add button for each content 477 while (i < content_count) 478 { 479 jQuery(document.createElement('span')) 480 .attr('id', 'showcase-navigation-button-' + i) 481 .addClass((i === 0) ? 'active' : '') 482 // Add numbers or unicode 483 .html((options.btn_numbers) ? parseInt(i)+1 : '●') 484 .click(function(a, b) 485 { 486 // This function is used to extract the correct i value on click 487 return function() 488 { 489 // Disable auto change on click 490 if (myInterval) 491 { 492 if (options.stoponclick) { pause_loop = true; } 493 clearInterval(myInterval); 494 } 495 changeContent(a, b); 496 }; 497 }(i, '')) 498 .appendTo(jQuery(showcase).find('.showcase-button-wrapper')); 499 i++; 500 } 501 } 502 503 // Activating the keybord arrow keys 504 if (options.keybord_keys) 505 { 506 jQuery(document).keydown(function(e) 507 { 508 // Disable auto change on click 509 if (options.stoponclick) { pause_loop = true; } 510 if (myInterval) clearInterval(myInterval); 511 512 // Left arrow 513 if (e.keyCode === 37) { 514 changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous'); 515 } 516 517 // Right arrow 518 if (e.keyCode === 39) { 519 changeContent((current_id === content_count-1) ? 0 : parseInt(current_id)+1, 'next'); 520 } 521 }); 522 } 523 524 525 // ************* 526 // THE FUNCTIONS
527 // ************* 528 529 // Returns the specified content (by array id) 530 function getContent(id) { 531 532 var new_content = jQuery(document.createElement('div')) 533 .attr('id', 'showcase-content-' + id) 534 .css('overflow', 'hidden') 535 .css('position', 'absolute') 536 .addClass('showcase-content') 537 .html(contentArray[id]); 538 539 // Set content width 540 if (!options.viewline) { new_content.css('width', options.content_width); } 541 542 // Position the content wrapper if showcase width is set to hundred percent 543 if (options.fit_to_parent && !options.viewline) { new_content.css('left', (showcase_width/2)-options.content_width/2); } 544 545 return new_content; 546 } 547 548 // Function that runs when content is set to change automatically 549 function autoChange() { 550 551 // Set next content id 552 var nextID = parseInt(current_id)+1; 553 // If the next id is outside the array and continuous is set to true set the id to 0 554 if (nextID === content_count && options.continuous) { nextID = 0; } 555 // If continuous is set to false break the auto change 556 else if (nextID === content_count && !options.continuous) { break_loop = true; clearInterval(myInterval); } 557 // Don't change the content if the auto change is broken 558 if (!break_loop) { changeContent(nextID, 'next'); } 559 } 560 561 // Changes the content (no explanation/comments needed :) 562 function changeContent(id, direction) { 563 564 // If the next content isn't the current content 565 if (current_id !== id && !animating) { 566 567 var obj; 568 var obj2; 569 var delay = 0; 570 var i; 571 572 // Set left/right position if showcase is set to full width 573 var lrpos = (options.fit_to_parent) ? (showcase_width/2)-(options.content_width/2) : 0; 574 575 // If we want to display the next content 576 if ((id > current_id && direction !== 'previous') || direction === 'next') { 577 578 if (options.viewline) { 579 580 if (current_id < content_count-1) { 581 582 // Prevent uggly transitions 583 if (!options.speed_change) { animating = true; } 584 585 // BugFix 586 updateContentViewlineWidth(); 587 588 // Pause Autoplay 589 if (options.pauseonover) { window.clearInterval(myInterval); } 590 591 // First we check if the content will fill the screen after animation. 592 remaining_width = 0; 593 594 // Loop trough the content array to find out 595 // the total width for the content that remains. 596 for (i=current_id+1, len=content_count; i<len; ++i) 597 { 598 obj = addedContentArray[i]; 599 remaining_width += obj.find('.showcase-content').children().width(); 600 } 601 602 // If the remaining width is wider than the browser window. 603 if (remaining_width > showcase_width) 604 { 605 old_animation_distance = animation_distance; 606 animation_distance -= addedContentArray[current_id].find('.showcase-content').children().width(); 607 } 608 else if ($('.showcase-arrow-next').is(':visible')) 609 { 610 old_animation_distance = animation_distance; 611 animation_distance = -(content_viewline_width - (remaining_width + (showcase_width - remaining_width))); 612 $('.showcase-arrow-next').fadeOut(300); 613 } 614 615 content_container.animate({left: animation_distance + 'px'}, options.transition_speed, function() { animating = false; }); 616 617 // Change current content id (if content is finished) 618 if ($('.showcase-arrow-next').is(':visible')) { current_id++; } 619 620 $('.showcase-arrow-previous').fadeIn(300); 621 } 622 } 623 else { 624 625 // Prevent uggly transitions 626 if (!options.speed_change) { animating = true; } 627 628 // Get current and next content element 629 obj = jQuery(showcase).find('#showcase-content-' + parseInt(current_id)); 630 obj2 = getContent(id); 631 632 // Append next element and set height 633 content_container.append(obj2); 634 if (options.dynamic_height) { obj2.css('height', obj2.find('.showcase-content').children().height()); } 635 else { obj2.css('height', options.content_height); } 636 637 // Animate height first if next content is not as high 638 if (obj.find('.showcase-content').children().height() > obj2.find('.showcase-content').children().height() && options.dynamic_height) { 639 640 content_container.stop(true, true).animate({ height: obj2.find('.showcase-content').children().height() }, 200);
641 delay = 100; 642 } 643 644 // Animate current element 645 if (options.transition === 'hslide') { 646 647 jQuery(obj).delay(delay).animate({ left: -(options.content_width) }, options.transition_speed+options.transition_delay, function() { obj.remove(); }); 648 } 649 else if (options.transition === 'vslide') { 650 651 jQuery(obj).delay(delay).animate({ top: -(options.content_height) }, options.transition_speed+options.transition_delay, function() { obj.remove(); }); 652 } 653 else { 654 655 jQuery(obj).delay(delay).fadeOut(options.transition_speed, function() { obj.remove(); }); 656 } 657 658 // This will hide them, not display them :) 659 displayAnchors(obj, true); 660 // displayCaption(obj, true); 661 662 // Animate next element 663 if (options.transition === 'hslide') { 664 665 obj2.css('left', showcase_width); 666 jQuery(obj2).delay(delay).animate({ left: lrpos }, options.transition_speed, function() { 667 displayAnchors(obj2); 668 // displayCaption(obj2); 669 afterAnimation(obj2); 670 } 671 ); 672 } 673 else if (options.transition === 'vslide') { 674 675 obj2.css('top', showcase.height()); 676 jQuery(obj2).delay(delay).animate({ top: '0px' }, options.transition_speed, function() { 677 displayAnchors(obj2); 678 // displayCaption(obj2); 679 afterAnimation(obj2); 680 } 681 ); 682 } 683 else { 684 685 obj2.css('left', lrpos); 686 obj2.css('display', 'none'); 687 jQuery(obj2).delay(delay).fadeIn(options.transition_speed, function() 688 { 689 displayAnchors(obj2); 690 // displayCaption(obj2); 691 afterAnimation(obj2); 692 } 693 ); 694 } 695 } 696 } 697 // If we want to display the previous content 698 else if (id < current_id || direction === 'previous') { 699 700 if (options.viewline) { 701 702 if (current_id !== 0) { 703 704 // Prevent uggly transitions 705 if (!options.speed_change) { animating = true; } 706 707 // BugFix 708 updateContentViewlineWidth(); 709 710 // Pause Autoplay 711 if (options.pauseonover) { window.clearInterval(myInterval); } 712 713 content_container.animate({left: old_animation_distance + 'px'}, options.transition_speed, function() { animating = false; }); 714 715 // Set animation distance 716 animation_distance = old_animation_distance; 717 718 // Change current content id 719 current_id--; 720 721 if (current_id === 0) { $('.showcase-arrow-previous').fadeOut(300); } 722 723 // Set old distance 724 old_id = current_id - 1; 725 sub_width = jQuery(addedContentArray[old_id]).width(); 726 old_animation_distance = old_animation_distance + sub_width; 727 } 728 729 $('.showcase-arrow-next').fadeIn(300); 730 } 731 else { 732 733 // Prevent uggly transitions 734 if (!options.speed_change) { animating = true; } 735 736 // Get current and next content element 737 obj = jQuery(showcase).find('#showcase-content-' + parseInt(current_id)); 738 obj2 = getContent(id); 739 740 // Append next element and set height 741 content_container.append(obj2); 742 if (options.dynamic_height) { obj2.css('height', obj2.find('.showcase-content').children().height()); } 743 else { obj2.css('height', options.content_height); } 744 745 // Animate height first if next content is not as high 746 if (obj.find('.showcase-content').children().height() > obj2.find('.showcase-content').children().height() && options.dynamic_height) { 747 748 content_container.stop(true, true).animate({ height: obj2.find('.showcase-content').children().height()}, 200); 749 delay = 100; 750 } 751 752 // Animate current element 753 if (options.transition === 'hslide') { 754 755 jQuery(obj).delay(delay).animate({ 756 left: (showcase_width) + 'px' 757 }, options.transition_speed+options.transition_delay, function() { 758 displayAnchors(obj, true); 759 // displayCaption(obj, true); 760 obj.remove(); 761 });
762 } 763 else if (options.transition === 'vslide') { 764 765 jQuery(obj).delay(delay).animate({ 766 top: (options.content_height) + 'px' 767 }, options.transition_speed+options.transition_delay, function(){ 768 displayAnchors(obj, true); 769 // displayCaption(obj, true); 770 obj.remove(); 771 }); 772 } 773 else { 774 775 jQuery(obj).delay(delay).fadeOut(options.transition_speed, function() { 776 displayAnchors(obj, true); 777 // displayCaption(obj, true); 778 obj.remove(); 779 }); 780 } 781 782 // Animate next element 783 if (options.transition === 'hslide') 784 { 785 obj2.css('left', '-' + options.content_width + 'px'); 786 jQuery(obj2).delay(delay).animate({ 787 left: lrpos 788 }, options.transition_speed, function() { 789 displayAnchors(obj2); 790 // displayCaption(obj2); 791 afterAnimation(obj2); 792 }); 793 } 794 else if (options.transition === 'vslide') 795 { 796 obj2.css('top', '-' + showcase.height() + 'px'); 797 jQuery(obj2).delay(delay).animate({ 798 top: '0px' 799 }, options.transition_speed, function() { 800 displayAnchors(obj2); 801 // displayCaption(obj2); 802 afterAnimation(obj2); 803 }); 804 } 805 else 806 { 807 obj2.css('left', lrpos); 808 obj2.css('display', 'none'); 809 jQuery(obj2).delay(delay).fadeIn(options.transition_speed, function() { 810 displayAnchors(obj2); 811 // displayCaption(obj2); 812 afterAnimation(obj2); 813 }); 814 } 815 content_container.append(obj2); 816 } 817 } 818 819 if(!options.viewline) 820 { 821 // Change previous and current content id 822 previous_id = current_id; 823 current_id = id; 824 825 // Slide thumbnail wrapper 826 if (options.thumbnails) 827 { 828 if ((current_id > previous_id && direction !== 'previous') || direction === 'next') 829 { 830 slideThumbnailWrapper('forward', true); 831 } 832 else if (current_id < previous_id || direction === 'previous') 833 { 834 slideThumbnailWrapper('backward', true); 835 } 836 } 837 838 // Change click handlers for arrows 839 if (options.arrows) 840 { 841 jQuery(showcase).find('.showcase-arrow-previous') 842 .unbind('click') 843 .click(function() { 844 if (myInterval) 845 { 846 if (options.stoponclick) { pause_loop = true; } 847 clearInterval(myInterval); 848 } 849 changeContent((current_id === 0) ? content_count-1 : parseInt(current_id)-1, 'previous'); 850 }); 851 jQuery(showcase).find('.showcase-arrow-next') 852 .unbind('click') 853 .click(function() { 854 if (myInterval) 855 { 856 if (options.stoponclick) { pause_loop = true; } 857 clearInterval(myInterval); 858 } 859 changeContent((current_id === content_count-1) ? 0 : parseInt(current_id)+1, 'next'); 860 }); 861 } 862 863 // Change active class for thumbnails 864 if (options.thumbnails) 865 { 866 i = 0; 867 showcase.find('.showcase-thumbnail').each(function() 868 { 869 var object = jQuery(this); 870 object.removeClass('active'); 871 if (i === current_id) { object.addClass('active'); } 872 i++; 873 }); 874 } 875 876 // If caption is set to 'show' 877 if (options.show_caption === 'show') { jQuery(obj2).find('.showcase-caption').show(); } 878 } 879 880 // Change active class for buttons 881 if (options.buttons) 882 { 883 i = 0; 884 showcase.find('.showcase-button-wrapper span').each(function() 885 { 886 var object = jQuery(this); 887 object.removeClass('active'); 888 if (i === current_id) { object.addClass('active'); } 889 i++; 890 }); 891 } 892 893 // A function that runs on content change, if it exists. 894 if (typeof options.custom_function == 'function') 895 { 896 options.custom_function(); 897 } 898 } 899 } 900 901 function afterAnimation(obj) 902 { 903 if (options.dynamic_height) { content_container.stop(true, true).animate({ height: obj.find('.showcase-content').children().height() }, 200); } 904 animating = false; 905 } 906 907 // Slide thumbnail wrapper 908 var thumbnailSlidePosition = 0; 909 910 function slideThumbnailWrapper(direction, check, backwardforward) 911 { 912 var doTheSlide = true; 913 var thumbnailHeightOrWidth = getElementHeight(jQuery(thumb_wrapper).find('.showcase-thumbnail')); 914 if (options.thumbnails_direction === 'horizontal') 915 { 916 thumbnailHeightOrWidth = getElementWidth(jQuery(thumb_wrapper).find('.showcase-thumbnail')); 917 } 918 var multiplySlidePosition = 1; 919 920 // Set slide x 921 if (options.thumbnails_slidex === 0) { options.thumbnails_slidex = thumbnailsPerPage; } 922 923 // Check if we need to do the slide 924 if (check) 925 { 926 var thumbnailSlidePositionCopy = thumbnailSlidePosition; 927 var thumbnailsScrolled = 0; 928 while (thumbnailSlidePositionCopy < 0) 929 { 930 if (options.thumbnails_direction === 'horizontal') 931 { 932 thumbnailSlidePositionCopy += getElementWidth(jQuery(thumbnailArray[0])); 933 } 934 else 935 { 936 thumbnailSlidePositionCopy += getElementHeight(jQuery(thumbnailArray[0])); 937 } 938 thumbnailsScrolled++; 939 } 940 941 var firstVisible = thumbnailsScrolled; 942 var lastVisible = thumbnailsPerPage + thumbnailsScrolled-1; 943 944 // Check if the next active thumbnail is outside the visible area 945 if (current_id >= firstVisible && current_id <= lastVisible) { doTheSlide = false; } 946 947 // If the next active thumbnail is far away.. 948 var distance; 949 if ((current_id - lastVisible) > options.thumbnails_slidex) 950 { 951 distance = current_id - lastVisible; 952 953 while (distance > options.thumbnails_slidex) 954 {
955 distance -= options.thumbnails_slidex; 956 multiplySlidePosition++; 957 } 958 } 959 else if ((firstVisible - current_id) > options.thumbnails_slidex) 960 { 961 distance = firstVisible - current_id; 962 963 while (distance > options.thumbnails_slidex) 964 { 965 distance -= options.thumbnails_slidex; 966 multiplySlidePosition++; 967 } 968 } 969 else { multiplySlidePosition = 1; } 970 } 971 972 if (direction === 'forward' && doTheSlide) 973 { 974 var visible_thumbs_height = thumb_restriction.height(); 975 //if (options.thumbnails_direction === 'vertical' && options.content_height < (thumbnailStretch + thumbnailSlidePosition) ) 976 if (options.thumbnails_direction === 'vertical' && visible_thumbs_height < (thumbnailStretch + thumbnailSlidePosition) ) 977 { 978 thumbnailSlidePosition -= thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition); 979 } 980 else if (options.thumbnails_direction === 'horizontal' && options.content_width < (thumbnailStretch + thumbnailSlidePosition)) 981 { 982 thumbnailSlidePosition -= thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition); 983 } 984 else if (current_id === 0) 985 { 986 if (!backwardforward) { thumbnailSlidePosition = 0; } 987 } 988 if (options.thumbnails_direction === 'horizontal') { thumb_wrapper.animate({ left: thumbnailSlidePosition }, 300); } 989 else { thumb_wrapper.animate({ top: thumbnailSlidePosition }, 300); } 990 } 991 else if (doTheSlide) 992 { 993 if (thumbnailSlidePosition < 0) 994 { 995 thumbnailSlidePosition += thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition); 996 } 997 else if (current_id === content_count-1) 998 { 999 if (!backwardforward) 1000 { 1001 thumbnailSlidePosition -= thumbnailHeightOrWidth * (options.thumbnails_slidex * multiplySlidePosition); 1002 } 1003 } 1004 else { thumbnailSlidePosition = 0; } 1005 if (options.thumbnails_direction === 'horizontal') { thumb_wrapper.animate({ left: thumbnailSlidePosition }, 300); } 1006 else { thumb_wrapper.animate({ top: thumbnailSlidePosition }, 300); } 1007 } 1008 } 1009 1010 // Displays the caption 1011 function displayCaption(container, fadeOut) 1012 { 1013 var caption = container.find('.showcase-caption'); 1014 if (!fadeOut) 1015 { 1016 if (options.show_caption === 'onload') { caption.fadeIn(300); } 1017 else if (options.show_caption === 'onhover') 1018 { 1019 jQuery(container).mouseenter(function() 1020 { 1021 caption.fadeIn(300); 1022 }); 1023 1024 jQuery(container).mouseleave(function() 1025 { 1026 caption.stop(true, true).fadeOut(100); 1027 }); 1028 } 1029 } 1030 else { caption.stop(true, true).fadeOut(300); } 1031 } 1032 1033 // Displays the anchors in the current slide 1034 function displayAnchors(container, fadeOut) 1035 { 1036 // Get each anchor tooltip 1037 container.find('.showcase-tooltips a').each(function() 1038 { 1039 if (!fadeOut) 1040 { 1041 // Get coordinates 1042 var coords = jQuery(this).attr('coords'); 1043 coords = coords.split(','); 1044 1045 // Style and position anchor 1046 jQuery(this).addClass('showcase-plus-anchor'); 1047 jQuery(this).css('position', 'absolute'); 1048 jQuery(this).css('display', 'none'); 1049 jQuery(this).css('width', options.tooltip_icon_width); 1050 jQuery(this).css('height', options.tooltip_icon_height); 1051 jQuery(this).css('left', parseInt(coords[0]) - (parseInt(options.tooltip_icon_width)/2)); 1052 jQuery(this).css('top', parseInt(coords[1]) - (parseInt(options.tooltip_icon_height)/2)); 1053 var content = jQuery(this).html(); 1054 jQuery(this).mouseenter(function() 1055 { 1056 animateTooltip(container, coords[0], coords[1], content); 1057 }); 1058 jQuery(this).mouseleave(function() 1059 { 1060 animateTooltip(container, coords[0], coords[1], content); 1061 }); 1062 jQuery(this).html(''); 1063 jQuery(this).fadeIn(300); 1064 } 1065 else 1066 { 1067 jQuery(this).stop(true, true).fadeOut(300); 1068 } 1069 }); 1070 } 1071 1072 // Controls the animation for the tooltips 1073 var tooltip = null; 1074 function animateTooltip(container, x, y, content) 1075 { 1076 // if tooltip is null (doesn't exsist) 1077 if (tooltip === null) 1078 { 1079 // Create the tooltip 1080 tooltip = jQuery(document.createElement('div')) 1081 .addClass('showcase-tooltip') 1082 .css('display', 'none') 1083 .css('position', 'absolute') 1084 .css('max-width', options.tooltip_width) 1085 .html(content); 1086 container.append(tooltip); 1087 1088 // Position the tooltip (this is where we try not to display the tooltip outside the content wrapper) 1089 var tooltip_paddingx = parseInt(tooltip.css('padding-right'))*2 + parseInt(tooltip.css('border-right-width'))*2; 1090 var tooltip_paddingy = parseInt(tooltip.css('padding-bottom'))*2 + parseInt(tooltip.css('border-bottom-width'))*2; 1091 lastx = parseInt(x) + tooltip.width() + tooltip_paddingx; 1092 lasty = parseInt(y) + tooltip.height() + tooltip_paddingy; 1093 1094 if (lastx < options.content_width) 1095 { 1096 tooltip.css('left', parseInt(x) + parseInt(options.tooltip_offsetx)); 1097 } 1098 else 1099 { 1100 tooltip.css('left', (parseInt(x) - parseInt(options.tooltip_offsetx)) - (parseInt(tooltip.width()) + parseInt(options.tooltip_offsetx))); 1101 } 1102 1103 if (lasty < options.content_height) 1104 { 1105 tooltip.css('top', parseInt(y) + parseInt(options.tooltip_offsety)); 1106 } 1107 else 1108 { 1109 tooltip.css('top', (parseInt(y) - parseInt(options.tooltip_offsety)) - (parseInt(tooltip.height()) + parseInt(tooltip_paddingy))); 1110 } 1111 1112 // Fade in the tooltip 1113 tooltip.fadeIn(400); 1114 } 1115 else 1116 { 1117 // Fade out the tooltip 1118 tooltip.fadeOut(400); 1119 // Remove it from the DOM 1120 tooltip.remove(); 1121 // And set the variable to null 1122 tooltip = null; 1123 } 1124 } 1125 1126 /* Returns the correct height for the element, including padding and borders. */ 1127 function getElementHeight(el, incHeight, incMargin, incPadding, incBorders) 1128 { 1129 incHeight = typeof(incHeight) !== 'undefined' ? incHeight : true; 1130 incMargin = typeof(incMargin) !== 'undefined' ? incMargin : true; 1131 incPadding = typeof(incPadding) !== 'undefined' ? incPadding : true; 1132 incBorders = typeof(incBorders) !== 'undefined' ? incBorders : true; 1133 1134 // var elHeight = (incHeight) ? jQuery((el)).height() : 0; 1135 var elHeight; 1136 // for explorer 7 when the value elheight1 is 0, it returns parent height, and the element height doesn't calculate correctly 1137 var elheight1 = jQuery((el)).height(); 1138 if ( elheight1 == jQuery('.showcase-thumbnail-wrapper').height() ) {elheight1 = 0;} 1139 if (incHeight) { elHeight = elheight1; } else {elHeight = 0;} 1140 1141 var elMargin = 0; 1142 if ( incMargin ) { 1143 1144 if ( jQuery( el ).css('margin-top') !== 'auto' ) { elMargin = parseFloat( jQuery( el ).css('margin-top') ); } 1145 if ( jQuery( el ).css('margin-bottom') !== 'auto' ) { elMargin += parseFloat( jQuery( el ).css('margin-bottom') ); } 1146 } 1147 elPadding = 0; 1148 if ( incPadding ) { 1149 1150 if ( jQuery( el ).css('padding-top') !== 'auto' ) { elPadding = parseFloat( jQuery( el ).css('padding-top') ); } 1151 if ( jQuery( el ).css('padding-bottom') !== 'auto' ) { elPadding += parseFloat( jQuery( el ).css('padding-bottom') ); } 1152 } 1153 elBorder = 0; 1154 if ( incBorders ) { 1155 1156 if ( jQuery( el ).css('border-top-width') !== 'auto' ) { elBorder = parseFloat( jQuery( el ).css('border-top-width') ); } 1157 if ( jQuery( el ).css('border-bottom-width') !== 'auto' ) { elBorder += parseFloat( jQuery( el ).css('border-bottom-width') ); } 1158 } 1159 // for explorer 8 when the value elBorder is 0, it returns NAN and the height doesn't calculate correctly 1160 if (elBorder = 'NAN') { elBorder = 0;} 1161 1162 elHeight += elMargin + elPadding + elBorder; 1163 return elHeight; 1164 } 1165 1166 /* Returns the correct width for the element, including width, margin, padding and borders. */ 1167 function getElementWidth(el, incWidth, incMargin, incPadding, incBorders) 1168 { 1169 incWidth = typeof(incWidth) !== 'undefined' ? incWidth : true; 1170 incMargin = typeof(incMargin) !== 'undefined' ? incMargin : true; 1171 incPadding = typeof(incPadding) !== 'undefined' ? incPadding : true; 1172 incBorders = typeof(incBorders) !== 'undefined' ? incBorders : true; 1173 var elWidth = (incWidth) ? jQuery((el)).width() : 0; 1174 var elMargin = 0; 1175 if ( incMargin ) { 1176 1177 if ( jQuery( el ).css('margin-left') !== 'auto' ) { elMargin = parseFloat( jQuery( el ).css('margin-left') ); } 1178 if ( jQuery( el ).css('margin-right') !== 'auto' ) { elMargin += parseFloat( jQuery( el ).css('margin-right') ); } 1179 } 1180 elPadding = 0; 1181 if ( incPadding ) { 1182 1183 if ( jQuery( el ).css('padding-left') !== 'auto' ) { elPadding = parseFloat( jQuery( el ).css('padding-left') ); } 1184 if ( jQuery( el ).css('padding-right') !== 'auto' ) { elPadding += parseFloat( jQuery( el ).css('padding-right') ); } 1185 } 1186 elBorder = 0; 1187 if ( incBorders ) { 1188 1189 if ( jQuery( el ).css('border-left-width') !== 'auto' ) { elBorder = parseFloat( jQuery( el ).css('border-left-width') ); } 1190 if ( jQuery( el ).css('border-right-width') !== 'auto' ) { elBorder += parseFloat( jQuery( el ).css('border-right-width') ); } 1191 } 1192 elWidth += elMargin + elPadding + elBorder; 1193 return elWidth; 1194 } 1195 1196 // Traces the mouse position (used for positioning anchors) 1197 if (options.mousetrace) 1198 { 1199 // Create the div tha displays the coordinates 1200 var mousetrace = jQuery(document.createElement('div')) 1201 .css('position', 'absolute') 1202 .css('top', '0') 1203 .css('background-color', '#fff') 1204 .css('color', '#000') 1205 .css('padding', '3px 5px') 1206 .css('x-index', '30') 1207 .html('X: 0 Y: 0'); 1208 showcase.append(mousetrace); 1209 var offset = showcase.offset(); 1210 1211 // Print the coordinates 1212 content_container.mousemove(function(e){ mousetrace.html('X: ' + (e.pageX - offset.left) + ' Y: ' + (e.pageY - offset.top)); }); 1213 } 1214 1215 // Show all content on one page 1216 $('#awOnePageButton').click(function showInOnePage() 1217 { 1218 if ($('.view-page').is(':visible')) 1219 { 1220 var temp_container = jQuery(document.createElement('div')); 1221 temp_container.addClass('showcase-onepage'); 1222 showcase.before(temp_container); 1223 1224 // Disable auto change on click 1225 if (myInterval) { pause_loop = true; clearInterval(myInterval); } 1226 1227 $(this).find('.view-page').hide(); 1228 $(this).find('.view-slide').show(); 1229 showcase.hide(); 1230 1231 $.each(contentArray, function(index, value) 1232 { 1233 obj = getContent(index); 1234 obj.css('position', 'relative'); 1235 temp_container.append(obj); 1236 1237 displayAnchors(obj); 1238 // displayCaption(obj); 1239 1240 if (options.dynamic_height) { obj.css('height', obj.find('.showcase-content').children().height()); } 1241 else { obj.css('height', options.content_height); } 1242 }); 1243 1244 var clear = jQuery(document.createElement('div')); 1245 clear.addClass('clear'); 1246 temp_container.append(clear); 1247 } 1248 else 1249 { 1250 $('.showcase-onepage').remove(); 1251 $(this).find('.view-page').show(); 1252 $(this).find('.view-slide').hide(); 1253 showcase.show(); 1254 } 1255 1256 return false; 1257 }); 1258 1259 // The correct width is returned when all content is fully loaded. 1260 var addedContentArray = []; 1261 function updateContentViewlineWidth() 1262 { 1263 content_viewline_width = 0; 1264 content_container.children('div').each(function() 1265 { 1266 content_viewline_width += $(this).find('.showcase-content').children().width(); 1267 addedContentArray.push($(this)); 1268 }); 1269 } 1270 1271 // Remove loading class 1272 showcase.removeClass('showcase-load'); 1273 }; 1274 1275})(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.