PXU Photoset Extended

Version. 1.8.0
Copyright 2013 Pixel Union
Licensed under the MIT license

Requirements

• jQuery v1.7.0 http://jquery.com/

Features

• Completely Responsive
• Captions and EXIF data available in rollover tooltips
• Enable high resolution images when your content is wider than 500px
• Customizable options like rounded corners, bigger gutters, and more

Change Log

1.8.0

• Fixed a rare bug where the width of the container could be ~14px too wide when the plugin runs

1.7.0

• Fixed a bug which broke the "highRes" plugin option.

1.6.0

• Removed the need to include imagesLoaded.
• Minor bug fixes.

1.5.0

• Updated how images get cropped when there is more than one image in a row. Images are now cropped from the center instead of the top to better match Tumblr.

1.4.0

• Now using Tumblr's built-in Lightbox. No longer requires the user to specificy and include a separate lightbox. If you do want to use your own, simply change the lightbox setting to false.

1.3.0

• Updated to reflect changes in Tumblr's default photoset. Each row's height is now calculated independently, which should give users some flexibility in using portrait images.
• Removed the deprecated live() in favour for on()
• Went through entire JS with JSHint and fixed a bunch of non-fatal bugs

1.2.0

• Fully responsive. You can now resize the window and the photoset will adjust accordingly.

Installation

Locate your current Tumblr Photoset code and replace it with the following:

{block:Photoset}

<div class="photo-slideshow" id="photoset_{PostID}" data-layout="{PhotosetLayout}">

  {block:Photos}
    <div class="photo-data">
      <div class="pxu-photo">
        <img alt="{PhotoAlt}" src="{PhotoURL-500}" width="{PhotoWidth-500}" height="{PhotoHeight-500}" data-highres="{PhotoURL-HighRes}" data-width="{PhotoWidth-HighRes}" data-height="{PhotoHeight-HighRes}" class="{block:Exif}exif-yes {/block:Exif}{block:Caption}caption-yes{/block:Caption}" {block:Exif}data-camera="{block:Camera}{Camera}{/block:Camera}" data-iso="{block:ISO}{ISO}{/block:ISO}" data-aperture="{block:Aperture}{Aperture}{/block:Aperture}" data-exposure="{block:Exposure}{Exposure}{/block:Exposure}" data-focal="{block:FocalLength}{FocalLength}{/block:FocalLength}"{/block:Exif} {block:Caption}data-caption="{Caption}"{/block:Caption}>
      </div>
      <div class="icons">
        <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}">
          <span class="zoom">Zoom</span>
        </a>
        <span class="info">Info</span>
      </div>
    </div>
  {/block:Photos}

</div><!-- close SLIDESHOW -->

{block:Caption}{Caption}{/block:Caption}

{/block:Photoset}

At the bottom of your theme, before the closing </body> tag, insert the following (make sure to replace the path to pxuPhotoset.min.js):

<script type="text/javascript" src="/path/to/js/pxuPhotoset.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$('.photo-slideshow').pxuPhotoset({
		// options go here
	}, function() {
		// callback
	});
});
</script>

In the Custom CSS box, add the styles from style.css.

Options

$('.selector').pxuPhotoset({
'ligthbox'  : true, // uses the default Tumblr lightbox, change to false to use your own
	'highRes'   : true, // will use high res images
	'rounded'   : 'corners', // corners, all or false
	'exif'      : true, // display EXIF data if available (tooltip)
	'captions'  : true, // display individual captions on photos (tooltip)
	'gutter'    : '10px', // spacing between the images
	'photoset'  : '.photo-slideshow', // photoset wrapper
	'photoWrap' : '.photo-data', // photo data wrapper (includes photo, icons + exif)
	'photo'     : '.pxu-photo' // photo wrap (includes photo only)
});

Callback

Optional callback. Here's an example where we've set the opacity of our slideshow to 0 in our CSS and now that we've got all of our images loaded up and working we'll show them:

$('.photo-slideshow').pxuPhotoset({
	// options go here
}, function() {
	$(this).animate({opacity:1});
});

Infinite Scroll

Are you using Paul Irish's amazing Infinite Scroll? Don't worry, this bad boy will still work. You'll just need to add a little extra to the callback. It should look something like this in its most basic form:

$('#content').infinitescroll({
    navSelector  : "div.navigation",            
    nextSelector : "div.navigation a:first",    
    itemSelector : "#content div.post"          
  },function(newElements){
  	$(newElements).find('.photo-slideshow').pxuPhotoset();
}
});