pixelunion / extended-tumblr-photoset Goto Github PK

Just a suggestion to change .row class to something else to avoid conflicts with bootstrap or other frameworks using this class.

When I post photosets of different sizes they're all on separate lines leaving a lot of empty space next to them in the container. Do you know a way to make multiple images appear on the same line using your code if they're small enough?
The issue comes from photosets of size 245px and 160px
Thanks

I want to be able to activate the photoset lightbox by clicking on an image in the photoset, not by hovering, then clicking the zoom icon. If this is possible, could someone explain how to do it?

Without JavaScript, the recommended setup for this plugin produces a big empty space on your blog, rather than gracefully falling back to a non-responsive JS-free display of the photoset. I hacked up a quick fix on my blog such that Tumblr's standard <iframe>-based photoset display is used when JS is unavailable, like so:

.photo-slideshow {
 visibility: visible;
 display: none;
}

{block:Photoset}
  {Photoset-500}
  <!-- standard pxuPhotoset HTML goes here -->
{/block:Photoset}

$(document).ready(function() {
  var ps = $('li.photoset');
  ps.find('.html_photoset');
    .remove();
  ps.find('.photo-slideshow')
    .css({display: 'block'})
    .pxuPhotoset(options);
});

Would it be worth extending this plugin itself, or perhaps just its usage instructions, to accommodate a fallback such as the above?

Support captions bro.

only the previous image, along with the image that was clicked, is shown in the slideshow. the next image in the series does not appear on the right of the image that was clicked.

eg: clicking the first image in the photoset opens the lightbox with no previous or next image.

Binds events to every span.info on the page when called, and does it over again every time it gets called. It shouldn't be doing anything to photosets that it isn't called on.

Highres images target .photo img on line 301 of pxuPhotoset.js, which doesn't exist in the demo markup. It seems either the .js should change or the markup should change like:

  ... 
  {block:Photos}
    <div class="photo-data">
      <div class="pxu-photo photo">
        <img alt="{PhotoAlt}"...

Thanks for the awesome library!

This isn't really about functionality, but I noticed the gutter set for the entire photoset is applied to the bottom of the last row. While it makes sense to apply margin-bottom for every other row, having an extra margin below the last row looks off. I'd simply add some CSS code to remove the margin manually based on the gutter value I've picked to work with, but I have no way of knowing if someone will tweak the code to choose a different gutter value, neither do I know if they will edit the fix I've done myself for this extra margin. I believe it wouldn't be such a hard thing to implement, but I don't think editing the code myself and creating a new file to share with people is really practical, especially when they would look for the official support itself.

Hiya,

Thank you for this! It was quite inspirational.

I built an albumPhotoset and a rollover plugin for my tumblr template using the logic in your code, and wanted to share with you.

Many well wishes!

https://github.com/shadesoflight/tumblr-template-sass/blob/master/theme/js/main.js
https://github.com/shadesoflight/tumblr-template-sass/tree/master/theme/libs/tumblr-photoset
https://github.com/shadesoflight/tumblr-template-sass/blob/master/package.json#L22