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