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