Version. 1.8.0
Copyright 2013 Pixel Union
Licensed under the MIT license
- jQuery v1.7.0 http://jquery.com/
- 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
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
lightboxsetting tofalse.
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 foron() - 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.
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.
$('.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)
});
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});
});
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();
}
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent