Tumblr widget
JavaScript CSS
Switch branches/tags
Nothing to show
Pull request Compare This branch is 1 commit ahead of pixelunion:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
demo
img
js
.gitignore
README.mdown

README.mdown

PXU Photoset Extended

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

Requirements

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();
}
});