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