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