1/* ------------------------------------------------------------------------ 2 Class: prettyPhoto 3 Use: Lightbox clone for jQuery 4 Author: Stephane Caron (http://www.no-margin-for-errors.com) 5 Version: 3.1.5 6------------------------------------------------------------------------- */ 7(function ($) { 8 $.prettyPhoto = { 9 version: '3.1.5' 10 }; 11 12 $.fn.prettyPhoto = function (pp_settings) { 13 pp_settings = jQuery.extend({ 14 hook: 'data-rel', 15 /* the attribute tag to use for prettyPhoto hooks. default: 'rel'. For HTML5, use "data-rel" or similar. */ 16 animation_speed: 'slow', 17 /* fast/slow/normal */ 18 ajaxcallback: function () {}, 19 slideshow: 5000, 20 /* false OR interval time in ms */ 21 autoplay_slideshow: false, 22 /* true/false */ 23 opacity: 0.80, 24 /* Value between 0 and 1 */ 25 show_title: true, 26 /* true/false */ 27 allow_resize: true, 28 /* Resize the photos bigger than viewport. true/false */ 29 allow_expand: true, 30 /* Allow the user to expand a resized image. true/false */ 31 default_width: 500, 32 default_height: 344, 33 counter_separator_label: ' av ', 34 /* The separator for the gallery counter 1 "of" 2 */ 35 theme: 'pp_default', 36 /* light_rounded / dark_rounded / light_square / dark_square / facebook */ 37 horizontal_padding: 20, 38 /* The padding on each side of the picture */ 39 hideflash: false, 40 /* Hides all the flash object on a page, set to TRUE if flash appears over prettyPhoto */ 41 wmode: 'opaque', 42 /* Set the flash wmode attribute */ 43 autoplay: true, 44 /* Automatically start videos: True/False */ 45 modal: false, 46 /* If set to true, only the close button will close the window */ 47 deeplinking: true, 48 /* Allow prettyPhoto to update the url to enable deeplinking. */ 49 overlay_gallery: true, 50 /* If set to true, a gallery will overlay the fullscreen image on mouse over */ 51 overlay_gallery_max: 30, 52 /* Maximum number of pictures in the overlay gallery */ 53 keyboard_shortcuts: true, 54 /* Set to false if you open forms inside prettyPhoto */ 55 changepicturecallback: function () {}, 56 /* Called everytime an item is shown/changed */ 57 callback: function () {}, 58 /* Called when prettyPhoto is closed */ 59 ie6_fallback: true, 60 markup: '<div class="pp_pic_holder"> \ 61 <div class="ppt"> </div> \ 62 <div class="pp_top"> \ 63 <div class="pp_left"></div> \ 64 <div class="pp_middle"></div> \ 65 <div class="pp_right"></div> \ 66 </div> \ 67 <div class="pp_content_container"> \ 68 <div class="pp_left"> \ 69 <div class="pp_right"> \ 70 <div class="pp_content"> \ 71 <div class="pp_loaderIcon"></div> \ 72 <div class="pp_fade"> \ 73 <a href="#" class="pp_expand" title="Expand the image">Expand</a> \ 74 <div class="pp_hoverContainer"> \ 75 <a class="pp_next" href="#">next</a> \ 76 <a class="pp_previous" href="#">previous</a> \ 77 </div> \ 78 <div id="pp_full_res"></div> \ 79 <div class="pp_details"> \ 80 <div class="pp_nav"> \ 81 <a href="#" class="pp_arrow_previous">Previous</a> \ 82 <p class="currentTextHolder">0/0</p> \ 83 <a href="#" class="pp_arrow_next">Next</a> \ 84 </div> \ 85 <p class="pp_description"></p> \ 86 <div class="pp_social">{pp_social}</div> \ 87 <!-- <a class="pp_close" href="#">Close</a> -->\ 88 </div> \ 89 </div> \ 90 </div> \ 91 </div> \ 92 </div> \ 93 </div> \ 94 <div class="pp_bottom"> \ 95 <div class="pp_left"></div> \ 96 <div class="pp_middle"></div> \ 97 <div class="pp_right"></div> \ 98 </div> \ 99 </div> \ 100 <div class="pp_overlay"></div>', 101 gallery_markup: '<div class="pp_gallery"> \ 102 <a href="#" class="pp_arrow_previous">Previous</a> \ 103 <div> \ 104 <ul> \ 105 {gallery} \ 106 </ul> \ 107 </div> \ 108 <a href="#" class="pp_arrow_next">Next</a> \ 109 </div>', 110 image_markup: '<img id="fullResImage" src="{path}" />', 111 flash_markup: '<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="{width}" height="{height}"><param name="wmode" value="{wmode}" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="{path}" /><embed src="{path}" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="{width}" height="{height}" wmode="{wmode}"></embed></object>', 112 quicktime_markup: '<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" height="{height}" width="{width}"><param name="src" value="{path}"><param name="autoplay" value="{autoplay}"><param name="type" value="video/quicktime"><embed src="{path}" height="{height}" width="{width}" autoplay="{autoplay}" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/"></embed></object>', 113 iframe_markup: '<iframe src ="{path}" width="{width}" height="{height}" frameborder="no"></iframe>', 114 inline_markup: '<div class="pp_inline">{content}</div>', 115 custom_markup: '', 116 //social_tools: '<div class="twitter"><a href="http://twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div><div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?locale=en_US&href={location_href}&layout=button_count&show_faces=true&width=500&action=like&font&colorscheme=light&height=23" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:500px; height:23px;" allowTransparency="true"></iframe></div>' /* html or false to disable */ 117 }, pp_settings); 118 119 // Global variables accessible only by prettyPhoto 120 var matchedObjects = this, 121 percentBased = false, 122 pp_dimensions, pp_open, 123 124 // prettyPhoto container specific 125 pp_contentHeight, pp_contentWidth, pp_containerHeight, pp_containerWidth, 126 127 // Window size 128 windowHeight = $(window).height(), 129 windowWidth = $(window).width(), 130 131 // Global elements 132 pp_slideshow; 133 134 doresize = true, scroll_pos = _get_scroll(); 135 136 // Window/Keyboard events 137 $(window).unbind('resize.prettyphoto').bind('resize.prettyphoto', function () { 138 _center_overlay(); 139 _resize_overlay(); 140 }); 141 142 if (pp_settings.keyboard_shortcuts) { 143 $(document).unbind('keydown.prettyphoto').bind('keydown.prettyphoto', function (e) { 144 if (typeof $pp_pic_holder != 'undefined') { 145 if ($pp_pic_holder.is(':visible')) { 146 switch (e.keyCode) { 147 case 37: 148 $.prettyPhoto.changePage('previous'); 149 e.preventDefault(); 150 break; 151 case 39: 152 $.prettyPhoto.changePage('next'); 153 e.preventDefault(); 154 break; 155 case 27: 156 if (!settings.modal) 157 $.prettyPhoto.close(); 158 e.preventDefault(); 159 break; 160 } 161 // return false;
162 } 163 } 164 }); 165 } 166 167 /** 168 * Initialize prettyPhoto. 169 */ 170 $.prettyPhoto.initialize = function () { 171 172 settings = pp_settings; 173 174 if (settings.theme == 'pp_default') settings.horizontal_padding = 16; 175 176 // Find out if the picture is part of a set 177 theRel = $(this).attr(settings.hook); 178 galleryRegExp = /\[(?:.*)\]/; 179 isSet = (galleryRegExp.exec(theRel)) ? true : false; 180 181 // Put the SRCs, TITLEs, ALTs into an array. 182 pp_images = (isSet) ? jQuery.map(matchedObjects, function (n, i) { 183 if ($(n).attr(settings.hook).indexOf(theRel) != -1) return $(n).attr('href'); 184 }) : $.makeArray($(this).attr('href')); 185 pp_titles = (isSet) ? jQuery.map(matchedObjects, function (n, i) { 186 if ($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).find('img').attr('alt')) ? $(n).find('img').attr('alt') : ""; 187 }) : $.makeArray($(this).find('img').attr('alt')); 188 pp_descriptions = (isSet) ? jQuery.map(matchedObjects, function (n, i) { 189 if ($(n).attr(settings.hook).indexOf(theRel) != -1) return ($(n).attr('title')) ? $(n).attr('title') : ""; 190 }) : $.makeArray($(this).attr('title')); 191 192 if (pp_images.length > settings.overlay_gallery_max) settings.overlay_gallery = false; 193 194 set_position = jQuery.inArray($(this).attr('href'), pp_images); // Define where in the array the clicked item is positionned 195 rel_index = (isSet) ? set_position : $("a[" + settings.hook + "^='" + theRel + "']").index($(this)); 196 197 _build_overlay(this); // Build the overlay {this} being the caller 198 199 if (settings.allow_resize) 200 $(window).bind('scroll.prettyphoto', function () { 201 _center_overlay(); 202 }); 203 204 205 $.prettyPhoto.open(); 206 207 return false; 208 } 209 210 211 /** 212 * Opens the prettyPhoto modal box. 213 * @param image {String,Array} Full path to the image to be open, can also be an array containing full images paths. 214 * @param title {String,Array} The title to be displayed with the picture, can also be an array containing all the titles. 215 * @param description {String,Array} The description to be displayed with the picture, can also be an array containing all the descriptions. 216 */ 217 $.prettyPhoto.open = function (event) { 218 if (typeof settings == "undefined") { // Means it's an API call, need to manually get the settings and set the variables 219 settings = pp_settings; 220 pp_images = $.makeArray(arguments[0]); 221 pp_titles = (arguments[1]) ? $.makeArray(arguments[1]) : $.makeArray(""); 222 pp_descriptions = (arguments[2]) ? $.makeArray(arguments[2]) : $.makeArray(""); 223 isSet = (pp_images.length > 1) ? true : false; 224 set_position = (arguments[3]) ? arguments[3] : 0; 225 _build_overlay(event.target); // Build the overlay {this} being the caller 226 } 227 228 if (settings.hideflash) $('object,embed,iframe[src*=youtube],iframe[src*=vimeo]').css('visibility', 'hidden'); // Hide the flash 229 230 _checkPosition($(pp_images).size()); // Hide the next/previous links if on first or last images. 231 232 $('.pp_loaderIcon').show(); 233 234 if (settings.deeplinking) 235 setHashtag(); 236 237 // Rebuild Facebook Like Button with updated href 238 if (settings.social_tools) { 239 facebook_like_link = settings.social_tools.replace('{location_href}', encodeURIComponent(location.href)); 240 $pp_pic_holder.find('.pp_social').html(facebook_like_link); 241 } 242 243 // Fade the content in 244 if ($ppt.is(':hidden')) $ppt.css('opacity', 0).show(); 245 $pp_overlay.show().fadeTo(settings.animation_speed, settings.opacity); 246 247 // Display the current position 248 $pp_pic_holder.find('.currentTextHolder').text((set_position + 1) + settings.counter_separator_label + $(pp_images).size()); 249 250 // Set the description 251 if (typeof pp_descriptions[set_position] != 'undefined' && pp_descriptions[set_position] != "") { 252 $pp_pic_holder.find('.pp_description').show().html(unescape(pp_descriptions[set_position])); 253 } else { 254 $pp_pic_holder.find('.pp_description').hide(); 255 } 256 257 // Get the dimensions 258 movie_width = (parseFloat(getParam('width', pp_images[set_position]))) ? getParam('width', pp_images[set_position]) : settings.default_width.toString(); 259 movie_height = (parseFloat(getParam('height', pp_images[set_position]))) ? getParam('height', pp_images[set_position]) : settings.default_height.toString(); 260 261 // If the size is % based, calculate according to window dimensions 262 percentBased = false;
263 if (movie_height.indexOf('%') != -1) { 264 movie_height = parseFloat(($(window).height() * parseFloat(movie_height) / 100) - 150); 265 percentBased = true; 266 } 267 if (movie_width.indexOf('%') != -1) { 268 movie_width = parseFloat(($(window).width() * parseFloat(movie_width) / 100) - 150); 269 percentBased = true; 270 } 271 272 // Fade the holder 273 $pp_pic_holder.fadeIn(function () { 274 // Set the title 275 (settings.show_title && pp_titles[set_position] != "" && typeof pp_titles[set_position] != "undefined") ? $ppt.html(unescape(pp_titles[set_position])): $ppt.html(' '); 276 277 imgPreloader = ""; 278 skipInjection = false; 279 280 // Inject the proper content 281 switch (_getFileType(pp_images[set_position])) { 282 case 'image': 283 imgPreloader = new Image(); 284 285 // Preload the neighbour images 286 nextImage = new Image(); 287 if (isSet && set_position < $(pp_images).size() - 1) nextImage.src = pp_images[set_position + 1]; 288 prevImage = new Image(); 289 if (isSet && pp_images[set_position - 1]) prevImage.src = pp_images[set_position - 1]; 290 291 $pp_pic_holder.find('#pp_full_res')[0].innerHTML = settings.image_markup.replace(/{path}/g, pp_images[set_position]); 292 293 imgPreloader.onload = function () { 294 // Fit item to viewport 295 pp_dimensions = _fitToViewport(imgPreloader.width, imgPreloader.height); 296 297 _showContent(); 298 }; 299 300 imgPreloader.onerror = function () { 301 alert('Image cannot be loaded. Make sure the path is correct and image exist.'); 302 $.prettyPhoto.close(); 303 }; 304 305 imgPreloader.src = pp_images[set_position]; 306 break; 307 308 case 'youtube': 309 pp_dimensions = _fitToViewport(movie_width, movie_height); // Fit item to viewport 310 311 // Regular youtube link 312 movie_id = getParam('v', pp_images[set_position]); 313 314 // youtu.be link 315 if (movie_id == "") { 316 movie_id = pp_images[set_position].split('youtu.be/'); 317 movie_id = movie_id[1]; 318 if (movie_id.indexOf('?') > 0) 319 movie_id = movie_id.substr(0, movie_id.indexOf('?')); // Strip anything after the ? 320 321 if (movie_id.indexOf('&') > 0) 322 movie_id = movie_id.substr(0, movie_id.indexOf('&')); // Strip anything after the & 323 } 324 325 movie = 'http://www.youtube.com/embed/' + movie_id; 326 (getParam('rel', pp_images[set_position])) ? movie += "?rel=" + getParam('rel', pp_images[set_position]): movie += "?rel=1"; 327 328 if (settings.autoplay) movie += "&autoplay=1"; 329 330 toInject = settings.iframe_markup.replace(/{width}/g, pp_dimensions['width']).replace(/{height}/g, pp_dimensions['height']).replace(/{wmode}/g, settings.wmode).replace(/{path}/g, movie); 331 break; 332 333 case 'vimeo': 334 pp_dimensions = _fitToViewport(movie_width, movie_height); // Fit item to viewport 335 336 movie_id = pp_images[set_position]; 337 var regExp = /http(s?):\/\/(www\.)?vimeo.com\/(\d+)/; 338 var match = movie_id.match(regExp); 339 340 movie = 'http://player.vimeo.com/video/' + match[3] + '?title=0&byline=0&portrait=0'; 341 if (settings.autoplay) movie += "&autoplay=1;"; 342 343 vimeo_width = pp_dimensions['width'] + '/embed/?moog_width=' + pp_dimensions['width']; 344 345 toInject = settings.iframe_markup.replace(/{width}/g, vimeo_width).replace(/{height}/g, pp_dimensions['height']).replace(/{path}/g, movie); 346 break; 347 348 case 'quicktime': 349 pp_dimensions = _fitToViewport(movie_width, movie_height); // Fit item to viewport 350 pp_dimensions['height'] += 15; 351 pp_dimensions['contentHeight'] += 15; 352 pp_dimensions['containerHeight'] += 15; // Add space for the control bar 353 354 toInject = settings.quicktime_markup.replace(/{width}/g, pp_dimensions['width']).replace(/{height}/g, pp_dimensions['height']).replace(/{wmode}/g, settings.wmode).replace(/{path}/g, pp_images[set_position]).replace(/{autoplay}/g, settings.autoplay); 355 break; 356 357 case 'flash': 358 pp_dimensions = _fitToViewport(movie_width, movie_height); // Fit item to viewport 359 360 flash_vars = pp_images[set_position]; 361 flash_vars = flash_vars.substring(pp_images[set_position].indexOf('flashvars') + 10, pp_images[set_position].length); 362 363 filename = pp_images[set_position]; 364 filename = filename.substring(0, filename.indexOf('?')); 365 366 toInject = settings.flash_markup.replace(/{width}/g, pp_dimensions['width']).replace(/{height}/g, pp_dimensions['height']).replace(/{wmode}/g, settings.wmode).replace(/{path}/g, filename + '?' + flash_vars); 367 break; 368 369 case 'iframe': 370 pp_dimensions = _fitToViewport(movie_width, movie_height); // Fit item to viewport 371 372 frame_url = pp_images[set_position]; 373 frame_url = frame_url.substr(0, frame_url.indexOf('iframe') - 1); 374 375 toInject = settings.iframe_markup.replace(/{width}/g, pp_dimensions['width']).replace(/{height}/g, pp_dimensions['height']).replace(/{path}/g, frame_url); 376 break; 377 378 case 'ajax': 379 doresize = false; // Make sure the dimensions are not resized. 380 pp_dimensions = _fitToViewport(movie_width, movie_height); 381 doresize = true; // Reset the dimensions 382 383 skipInjection = true; 384 $.get(pp_images[set_position], function (responseHTML) { 385 toInject = settings.inline_markup.replace(/{content}/g, responseHTML); 386 $pp_pic_holder.find('#pp_full_res')[0].innerHTML = toInject; 387 _showContent(); 388 }); 389 390 break; 391 392 case 'custom': 393 pp_dimensions = _fitToViewport(movie_width, movie_height); // Fit item to viewport 394 395 toInject = settings.custom_markup; 396 break; 397 398 case 'inline': 399 // to get the item height clone it, apply default width, wrap it in the prettyPhoto containers , then delete 400 myClone = $(pp_images[set_position]).clone().append('<br clear="all" />').css({ 401 'width': settings.default_width 402 }).wrapInner('<div id="pp_full_res"><div class="pp_inline"></div></div>').appendTo($('body')).show(); 403 doresize = false; // Make sure the dimensions are not resized. 404 pp_dimensions = _fitToViewport($(myClone).width(), $(myClone).height()); 405 doresize = true; // Reset the dimensions 406 $(myClone).remove(); 407 toInject = settings.inline_markup.replace(/{content}/g, $(pp_images[set_position]).html()); 408 break; 409 } 410 411 if (!imgPreloader && !skipInjection) { 412 $pp_pic_holder.find('#pp_full_res')[0].innerHTML = toInject; 413 414 // Show content 415 _showContent(); 416 } 417 }); 418 419 return false;
420 }; 421 422 423 /** 424 * Change page in the prettyPhoto modal box 425 * @param direction {String} Direction of the paging, previous or next. 426 */ 427 $.prettyPhoto.changePage = function (direction) { 428 currentGalleryPage = 0; 429 430 if (direction == 'previous') { 431 set_position--; 432 if (set_position < 0) set_position = $(pp_images).size() - 1; 433 } else if (direction == 'next') { 434 set_position++; 435 if (set_position > $(pp_images).size() - 1) set_position = 0; 436 } else { 437 set_position = direction; 438 } 439 440 rel_index = set_position; 441 442 if (!doresize) doresize = true; // Allow the resizing of the images 443 if (settings.allow_expand) { 444 $('.pp_contract').removeClass('pp_contract').addClass('pp_expand'); 445 } 446 447 _hideContent(function () { 448 $.prettyPhoto.open(); 449 }); 450 }; 451 452 453 /** 454 * Change gallery page in the prettyPhoto modal box 455 * @param direction {String} Direction of the paging, previous or next. 456 */ 457 $.prettyPhoto.changeGalleryPage = function (direction) { 458 if (direction == 'next') { 459 currentGalleryPage++; 460 461 if (currentGalleryPage > totalPage) currentGalleryPage = 0; 462 } else if (direction == 'previous') { 463 currentGalleryPage--; 464 465 if (currentGalleryPage < 0) currentGalleryPage = totalPage; 466 } else { 467 currentGalleryPage = direction; 468 } 469 470 slide_speed = (direction == 'next' || direction == 'previous') ? settings.animation_speed : 0; 471 472 slide_to = currentGalleryPage * (itemsPerPage * itemWidth); 473 474 $pp_gallery.find('ul').animate({ 475 left: -slide_to 476 }, slide_speed); 477 }; 478 479 480 /** 481 * Start the slideshow... 482 */ 483 $.prettyPhoto.startSlideshow = function () { 484 if (typeof pp_slideshow == 'undefined') { 485 $pp_pic_holder.find('.pp_play').unbind('click').removeClass('pp_play').addClass('pp_pause').click(function () { 486 $.prettyPhoto.stopSlideshow(); 487 return false; 488 }); 489 pp_slideshow = setInterval($.prettyPhoto.startSlideshow, settings.slideshow); 490 } else { 491 $.prettyPhoto.changePage('next'); 492 } 493 } 494 495 496 /** 497 * Stop the slideshow... 498 */ 499 $.prettyPhoto.stopSlideshow = function () { 500 $pp_pic_holder.find('.pp_pause').unbind('click').removeClass('pp_pause').addClass('pp_play').click(function () { 501 $.prettyPhoto.startSlideshow(); 502 return false; 503 }); 504 clearInterval(pp_slideshow); 505 pp_slideshow = undefined; 506 } 507 508 509 /** 510 * Closes prettyPhoto. 511 */ 512 $.prettyPhoto.close = function () { 513 if ($pp_overlay.is(":animated")) return; 514 515 $.prettyPhoto.stopSlideshow(); 516 517 $pp_pic_holder.stop().find('object,embed').css('visibility', 'hidden'); 518 519 $('div.pp_pic_holder,div.ppt,.pp_fade').fadeOut(settings.animation_speed, function () { 520 $(this).remove(); 521 }); 522 523 $pp_overlay.fadeOut(settings.animation_speed, function () { 524 525 if (settings.hideflash) $('object,embed,iframe[src*=youtube],iframe[src*=vimeo]').css('visibility', 'visible'); // Show the flash 526 527 $(this).remove(); // No more need for the prettyPhoto markup 528 529 $(window).unbind('scroll.prettyphoto'); 530 531 clearHashtag(); 532 533 settings.callback(); 534 535 doresize = true; 536 537 pp_open = false; 538 539 delete settings; 540 }); 541 }; 542 543 /** 544 * Set the proper sizes on the containers and animate the content in. 545 */ 546 function _showContent() { 547 $('.pp_loaderIcon').hide(); 548 549 // Calculate the opened top position of the pic holder 550 projectedTop = scroll_pos['scrollTop'] + ((windowHeight / 2) - (pp_dimensions['containerHeight'] / 2)); 551 if (projectedTop < 0) projectedTop = 0; 552 553 $ppt.fadeTo(settings.animation_speed, 1); 554 555 // Resize the content holder 556 $pp_pic_holder.find('.pp_content') 557 .animate({ 558 height: pp_dimensions['contentHeight'], 559 width: pp_dimensions['contentWidth'] 560 }, settings.animation_speed); 561 562 // Resize picture the holder 563 $pp_pic_holder.animate({ 564 'top': projectedTop, 565 'left': ((windowWidth / 2) - (pp_dimensions['containerWidth'] / 2) < 0) ? 0 : (windowWidth / 2) - (pp_dimensions['containerWidth'] / 2), 566 width: pp_dimensions['containerWidth'] 567 }, settings.animation_speed, function () { 568 $pp_pic_holder.find('.pp_hoverContainer,#fullResImage').height(pp_dimensions['height']).width(pp_dimensions['width']); 569 570 $pp_pic_holder.find('.pp_fade').fadeIn(settings.animation_speed); // Fade the new content 571 572 // Show the nav 573 if (isSet && _getFileType(pp_images[set_position]) == "image") { 574 $pp_pic_holder.find('.pp_hoverContainer').show(); 575 } else { 576 $pp_pic_holder.find('.pp_hoverContainer').hide(); 577 } 578 579 if (settings.allow_expand) { 580 if (pp_dimensions['resized']) { // Fade the resizing link if the image is resized 581 $('a.pp_expand,a.pp_contract').show(); 582 } else { 583 $('a.pp_expand').hide(); 584 } 585 } 586 587 if (settings.autoplay_slideshow && !pp_slideshow && !pp_open) $.prettyPhoto.startSlideshow(); 588 589 settings.changepicturecallback(); // Callback! 590 591 pp_open = true; 592 }); 593 594 _insert_gallery(); 595 pp_settings.ajaxcallback(); 596 } 597 598 /** 599 * Hide the content...DUH! 600 */ 601 function _hideContent(callback) { 602 // Fade out the current picture 603 $pp_pic_holder.find('#pp_full_res object,#pp_full_res embed').css('visibility', 'hidden'); 604 $pp_pic_holder.find('.pp_fade').fadeOut(settings.animation_speed, function () { 605 $('.pp_loaderIcon').show(); 606
607 callback(); 608 }); 609 } 610 611 /** 612 * Check the item position in the gallery array, hide or show the navigation links 613 * @param setCount {integer} The total number of items in the set 614 */ 615 function _checkPosition(setCount) { 616 (setCount > 1) ? $('.pp_nav').show(): $('.pp_nav').hide(); // Hide the bottom nav if it's not a set. 617 } 618 619 /** 620 * Resize the item dimensions if it's bigger than the viewport 621 * @param width {integer} Width of the item to be opened 622 * @param height {integer} Height of the item to be opened 623 * @return An array containin the "fitted" dimensions 624 */ 625 function _fitToViewport(width, height) { 626 resized = false; 627 628 _getDimensions(width, height); 629 630 // Define them in case there's no resize needed 631 imageWidth = width, imageHeight = height; 632 633 if (((pp_containerWidth > windowWidth) || (pp_containerHeight > windowHeight)) && doresize && settings.allow_resize && !percentBased) { 634 resized = true, fitting = false; 635 636 while (!fitting) { 637 if ((pp_containerWidth > windowWidth)) { 638 imageWidth = (windowWidth - 200); 639 imageHeight = (height / width) * imageWidth; 640 } else if ((pp_containerHeight > windowHeight)) { 641 imageHeight = (windowHeight - 200); 642 imageWidth = (width / height) * imageHeight; 643 } else { 644 fitting = true; 645 } 646 647 pp_containerHeight = imageHeight, pp_containerWidth = imageWidth; 648 } 649 650 651 652 if ((pp_containerWidth > windowWidth) || (pp_containerHeight > windowHeight)) { 653 _fitToViewport(pp_containerWidth, pp_containerHeight) 654 } 655 656 _getDimensions(imageWidth, imageHeight); 657 } 658 659 return { 660 width: Math.floor(imageWidth), 661 height: Math.floor(imageHeight), 662 containerHeight: Math.floor(pp_containerHeight), 663 containerWidth: Math.floor(pp_containerWidth) + (settings.horizontal_padding * 2), 664 contentHeight: Math.floor(pp_contentHeight), 665 contentWidth: Math.floor(pp_contentWidth), 666 resized: resized 667 }; 668 } 669 670 /** 671 * Get the containers dimensions according to the item size 672 * @param width {integer} Width of the item to be opened 673 * @param height {integer} Height of the item to be opened 674 */ 675 function _getDimensions(width, height) { 676 width = parseFloat(width); 677 height = parseFloat(height); 678 679 // Get the details height, to do so, I need to clone it since it's invisible 680 $pp_details = $pp_pic_holder.find('.pp_details'); 681 $pp_details.width(width); 682 detailsHeight = parseFloat($pp_details.css('marginTop')) + parseFloat($pp_details.css('marginBottom')); 683 684 $pp_details = $pp_details.clone().addClass(settings.theme).width(width).appendTo($('body')).css({ 685 'position': 'absolute', 686 'top': -10000 687 }); 688 detailsHeight += $pp_details.height(); 689 detailsHeight = (detailsHeight <= 34) ? 36 : detailsHeight; // Min-height for the details 690 $pp_details.remove(); 691 692 // Get the titles height, to do so, I need to clone it since it's invisible 693 $pp_title = $pp_pic_holder.find('.ppt'); 694 $pp_title.width(width); 695 titleHeight = parseFloat($pp_title.css('marginTop')) + parseFloat($pp_title.css('marginBottom')); 696 $pp_title = $pp_title.clone().appendTo($('body')).css({ 697 'position': 'absolute', 698 'top': -10000 699 }); 700 titleHeight += $pp_title.height(); 701 $pp_title.remove(); 702 703 // Get the container size, to resize the holder to the right dimensions 704 pp_contentHeight = height + detailsHeight; 705 pp_contentWidth = width; 706 pp_containerHeight = pp_contentHeight + titleHeight + $pp_pic_holder.find('.pp_top').height() + $pp_pic_holder.find('.pp_bottom').height(); 707 pp_containerWidth = width; 708 } 709 710 function _getFileType(itemSrc) { 711 if (itemSrc.match(/youtube\.com\/watch/i) || itemSrc.match(/youtu\.be/i)) { 712 return 'youtube'; 713 } else if (itemSrc.match(/vimeo\.com/i)) { 714 return 'vimeo'; 715 } else if (itemSrc.match(/\b.mov\b/i)) { 716 return 'quicktime'; 717 } else if (itemSrc.match(/\b.swf\b/i)) { 718 return 'flash'; 719 } else if (itemSrc.match(/\biframe=true\b/i)) { 720 return 'iframe'; 721 } else if (itemSrc.match(/\bajax=true\b/i)) { 722 return 'ajax'; 723 } else if (itemSrc.match(/\bcustom=true\b/i)) { 724 return 'custom'; 725 } else if (itemSrc.substr(0, 1) == '#') { 726 return 'inline'; 727 } else { 728 return 'image'; 729 } 730 } 731 732 function _center_overlay() { 733 if (doresize && typeof $pp_pic_holder != 'undefined') { 734 scroll_pos = _get_scroll(); 735 contentHeight = $pp_pic_holder.height(), contentwidth = $pp_pic_holder.width(); 736 737 projectedTop = (windowHeight / 2) + scroll_pos['scrollTop'] - (contentHeight / 2); 738 if (projectedTop < 0) projectedTop = 0; 739 740 if (contentHeight > windowHeight) 741 return; 742 743 $pp_pic_holder.css({ 744 'top': projectedTop, 745 'left': (windowWidth / 2) + scroll_pos['scrollLeft'] - (contentwidth / 2) 746 }); 747 } 748 } 749 750 function _get_scroll() { 751 if (self.pageYOffset) { 752 return { 753 scrollTop: self.pageYOffset, 754 scrollLeft: self.pageXOffset 755 }; 756 } else if (document.documentElement && document.documentElement.scrollTop) { // Explorer 6 Strict 757 return { 758 scrollTop: document.documentElement.scrollTop, 759 scrollLeft: document.documentElement.scrollLeft 760 }; 761 } else if (document.body) { // all other Explorers 762 return { 763 scrollTop: document.body.scrollTop, 764 scrollLeft: document.body.scrollLeft 765 }; 766 } 767 } 768 769 function _resize_overlay() { 770 windowHeight = $(window).height(), windowWidth = $(window).width(); 771 772 if (typeof $pp_overlay != "undefined") $pp_overlay.height($(document).height()).width(windowWidth); 773 } 774 775 function _insert_gallery() { 776 if (isSet && settings.overlay_gallery && _getFileType(pp_images[set_position]) == "image") { 777 itemWidth = 52 + 5; // 52 beign the thumb width, 5 being the right margin. 778 navWidth = (settings.theme == "facebook" || settings.theme == "pp_default") ? 50 : 30; // Define the arrow width depending on the theme 779 780 itemsPerPage = Math.floor((pp_dimensions['containerWidth'] - 100 - navWidth) / itemWidth); 781 itemsPerPage = (itemsPerPage < pp_images.length) ? itemsPerPage : pp_images.length;
782 totalPage = Math.ceil(pp_images.length / itemsPerPage) - 1; 783 784 // Hide the nav in the case there's no need for links 785 if (totalPage == 0) { 786 navWidth = 0; // No nav means no width! 787 $pp_gallery.find('.pp_arrow_next,.pp_arrow_previous').hide(); 788 } else { 789 $pp_gallery.find('.pp_arrow_next,.pp_arrow_previous').show(); 790 } 791 792 galleryWidth = itemsPerPage * itemWidth; 793 fullGalleryWidth = pp_images.length * itemWidth; 794 795 // Set the proper width to the gallery items 796 $pp_gallery 797 .css('margin-left', -((galleryWidth / 2) + (navWidth / 2))) 798 .find('div:first').width(galleryWidth + 5) 799 .find('ul').width(fullGalleryWidth) 800 .find('li.selected').removeClass('selected'); 801 802 goToPage = (Math.floor(set_position / itemsPerPage) < totalPage) ? Math.floor(set_position / itemsPerPage) : totalPage; 803 804 $.prettyPhoto.changeGalleryPage(goToPage); 805 806 $pp_gallery_li.filter(':eq(' + set_position + ')').addClass('selected'); 807 } else { 808 $pp_pic_holder.find('.pp_content').unbind('mouseenter mouseleave'); 809 // $pp_gallery.hide(); 810 } 811 } 812 813 function _build_overlay(caller) { 814 // Inject Social Tool markup into General markup 815 if (settings.social_tools) 816 facebook_like_link = settings.social_tools.replace('{location_href}', encodeURIComponent(location.href)); 817 818 settings.markup = settings.markup.replace('{pp_social}', ''); 819 820 $('body').append(settings.markup); // Inject the markup 821 822 $pp_pic_holder = $('.pp_pic_holder'), $ppt = $('.ppt'), $pp_overlay
822= $('div.pp_overlay'); // Set my global selectors 823 824 // Inject the inline gallery! 825 if (isSet && settings.overlay_gallery) { 826 currentGalleryPage = 0; 827 toInject = ""; 828 for (var i = 0; i < pp_images.length; i++) { 829 if (!pp_images[i].match(/\b(jpg|jpeg|png|gif)\b/gi)) { 830 classname = 'default'; 831 img_src = ''; 832 } else { 833 classname = ''; 834 img_src = pp_images[i]; 835 } 836 toInject += "<li class='" + classname + "'><a href='#'><img src='" + img_src + "' width='50' alt='' /></a></li>"; 837 } 838 839 toInject = settings.gallery_markup.replace(/{gallery}/g, toInject); 840 841 $pp_pic_holder.find('#pp_full_res').after(toInject); 842 843 $pp_gallery = $('.pp_pic_holder .pp_gallery'), $pp_gallery_li = $pp_gallery.find('li'); // Set the gallery selectors 844 845 $pp_gallery.find('.pp_arrow_next').click(function () { 846 $.prettyPhoto.changeGalleryPage('next'); 847 $.prettyPhoto.stopSlideshow(); 848 return false; 849 }); 850 851 $pp_gallery.find('.pp_arrow_previous').click(function () { 852 $.prettyPhoto.changeGalleryPage('previous'); 853 $.prettyPhoto.stopSlideshow(); 854 return false; 855 }); 856 857 $pp_pic_holder.find('.pp_content').hover( 858 function () { 859 $pp_pic_holder.find('.pp_gallery:not(.disabled)').fadeIn(); 860 }, 861 function () { 862 $pp_pic_holder.find('.pp_gallery:not(.disabled)').fadeOut(); 863 }); 864 865 itemWidth = 52 + 5; // 52 beign the thumb width, 5 being the right margin. 866 $pp_gallery_li.each(function (i) { 867 $(this) 868 .find('a') 869 .click(function () { 870 $.prettyPhoto.changePage(i); 871 $.prettyPhoto.stopSlideshow(); 872 return false; 873 }); 874 }); 875 } 876 877 878 // Inject the play/pause if it's a slideshow 879 if (settings.slideshow) { 880 $pp_pic_holder.find('.pp_nav').prepend('<a href="#" class="pp_play">Play</a>') 881 $pp_pic_holder.find('.pp_nav .pp_play').click(function () { 882 $.prettyPhoto.startSlideshow(); 883 return false; 884 }); 885 } 886 887 $pp_pic_holder.attr('class', 'pp_pic_holder ' + settings.theme); // Set the proper theme 888 889 $pp_overlay 890 .css({ 891 'opacity': 0, 892 'height': $(document).height(), 893 'width': $(window).width() 894 }) 895 .bind('click', function () { 896 if (!settings.modal) $.prettyPhoto.close(); 897 }); 898 899 $('a.pp_close').bind('click', function () { 900 $.prettyPhoto.close(); 901 return false; 902 }); 903 904 905 if (settings.allow_expand) { 906 $('a.pp_expand').bind('click', function (e) { 907 // Expand the image 908 if ($(this).hasClass('pp_expand')) { 909 $(this).removeClass('pp_expand').addClass('pp_contract'); 910 doresize = false; 911 } else { 912 $(this).removeClass('pp_contract').addClass('pp_expand'); 913 doresize = true; 914 } 915 916 _hideContent(function () { 917 $.prettyPhoto.open(); 918 }); 919 920 return false; 921 }); 922 } 923 924 $pp_pic_holder.find('.pp_previous, .pp_nav .pp_arrow_previous').bind('click', function () { 925 $.prettyPhoto.changePage('previous'); 926 $.prettyPhoto.stopSlideshow(); 927 return false; 928 }); 929 930 $pp_pic_holder.find('.pp_next, .pp_nav .pp_arrow_next').bind('click', function () { 931 $.prettyPhoto.changePage('next'); 932 $.prettyPhoto.stopSlideshow(); 933 return false; 934 }); 935 936 _center_overlay(); // Center it 937 } 938 939 if (!pp_alreadyInitialized && getHashtag()) { 940 pp_alreadyInitialized = true; 941 942 // Grab the rel index to trigger the click on the correct element 943 hashIndex = getHashtag(); 944 hashRel = hashIndex; 945 hashIndex = hashIndex.substring(hashIndex.indexOf('/') + 1, hashIndex.length - 1); 946 hashRel = hashRel.substring(0, hashRel.indexOf('/')); 947 948 // Little timeout to make sure all the prettyPhoto initialize scripts has been run. 949 // Useful in the event the page contain several init scripts. 950 setTimeout(function () { 951 $("a[" + pp_settings.hook + "^='" + hashRel + "']:eq(" + hashIndex + ")").trigger('click'); 952 }, 50); 953 } 954 955 return this.unbind('click.prettyphoto').bind('click.prettyphoto', $.prettyPhoto.initialize); // Return the jQuery object for chaining. The unbind method is used to avoid click conflict when the plugin is called more than once 956 }; 957 958 function getHashtag() { 959 var url = location.href; 960 hashtag = (url.indexOf('#prettyPhoto') !== -1) ? decodeURI(url.substring(url.indexOf('#prettyPhoto') + 1, url.length)) : false;
961 962 return hashtag; 963 } 964 965 function setHashtag() { 966 if (typeof theRel == 'undefined') return; // theRel is set on normal calls, it's impossible to deeplink using the API 967 location.hash = theRel + '/' + rel_index + '/'; 968 } 969 970 function clearHashtag() { 971 if (location.href.indexOf('#prettyPhoto') !== -1) location.hash = "prettyPhoto"; 972 } 973 974 function getParam(name, url) { 975 name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); 976 var regexS = "[\\?&]" + name + "=([^&#]*)"; 977 var regex = new RegExp(regexS); 978 var results = regex.exec(url); 979 return (results == null) ? "" : results[1]; 980 } 981 982})(jQuery); 983 984var pp_alreadyInitialized = false; // Used for the deep linking to make sure not to call the same function several times.
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.