jquery.prettyPhoto.init.js
7 years ago
jquery.prettyPhoto.init.min.js
5 years ago
jquery.prettyPhoto.js
5 years ago
jquery.prettyPhoto.min.js
2 years ago
jquery.prettyPhoto.js
912 lines
| 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 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="https://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="https://www.apple.com/quicktime/download/"></embed></object>', |
| 90 | iframe_markup: '<iframe src ="{path}" width="{width}" height="{height}" frameborder="no"></iframe>', |
| 91 | inline_markup: '<div class="pp_inline">{content}</div>', |
| 92 | custom_markup: '', |
| 93 | social_tools: '<div class="twitter"><a href="//twitter.com/share" class="twitter-share-button" data-count="none">Tweet</a><script type="text/javascript" src="//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 */ |
| 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).off('resize.prettyphoto').on('resize.prettyphoto',function(){ _center_overlay(); _resize_overlay(); }); |
| 112 | |
| 113 | if(pp_settings.keyboard_shortcuts) { |
| 114 | $(document).off('keydown.prettyphoto').on('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).on('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).length); // 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).length); |
| 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).length -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}/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).length-1; |
| 386 | }else if(direction == 'next'){ |
| 387 | set_position++; |
| 388 | if(set_position > $(pp_images).length-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').off('click').removeClass('pp_play').addClass('pp_pause').on( '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').off('click').removeClass('pp_pause').addClass('pp_play').on( '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).off('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').off('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 = $('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').on( 'click', function(){ |
| 780 | $.prettyPhoto.changeGalleryPage('next'); |
| 781 | $.prettyPhoto.stopSlideshow(); |
| 782 | return false; |
| 783 | }); |
| 784 | |
| 785 | $pp_gallery.find('.pp_arrow_previous').on( 'click', function(){ |
| 786 | $.prettyPhoto.changeGalleryPage('previous'); |
| 787 | $.prettyPhoto.stopSlideshow(); |
| 788 | return false; |
| 789 | }); |
| 790 | |
| 791 | $pp_pic_holder.find('.pp_content').on( 'mouseenter', |
| 792 | function(){ |
| 793 | $pp_pic_holder.find('.pp_gallery:not(.disabled)').fadeIn(); |
| 794 | } ).on( 'mouseleave', |
| 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 | .on( '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').on( '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 | .on('click',function(){ |
| 830 | if(!settings.modal) $.prettyPhoto.close(); |
| 831 | }); |
| 832 | |
| 833 | $('a.pp_close').on('click',function(){ $.prettyPhoto.close(); return false; }); |
| 834 | |
| 835 | |
| 836 | if(settings.allow_expand) { |
| 837 | $('a.pp_expand').on('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').on('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').on('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.off('click.prettyphoto').on('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 | if(hashtag){ hashtag = hashtag.replace(/<|>/g,''); } |
| 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 | |
| 911 | var pp_alreadyInitialized = false; // Used for the deep linking to make sure not to call the same function several times. |
| 912 |