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