Skip to content
Tumblr widget
Branch: master
Clone or download
Latest commit 9b3cb86 Sep 26, 2013
Type Name Latest commit message Commit time
Failed to load latest commit information.
css Fix bug where width could be off by ~14px Sep 26, 2013
demo Fix bug where width could be off by ~14px Sep 26, 2013
img v1.1.0 Jul 9, 2012
js Bump to v1.8.0 Sep 26, 2013
.gitignore Reorganized, bug fixes May 17, 2012
README.mdown Bump to v1.8.0 Sep 26, 2013


PXU Photoset Extended

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



  • 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


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


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


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


  • 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.


  • 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.


  • 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


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


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


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

    <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 class="icons">
        <a class="tumblr-box" rel="post-{PostID}" href="{PhotoURL-HighRes}">
          <span class="zoom">Zoom</span>
        <span class="info">Info</span>

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



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() {
		// options go here
	}, function() {
		// callback

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


'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)


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:

	// options go here
}, function() {

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:

    navSelector  : "div.navigation",            
    nextSelector : "div.navigation a:first",    
    itemSelector : "#content"          
You can’t perform that action at this time.