pixelunion / extended-tumblr-photoset Goto Github PK
View Code? Open in Web Editor NEWTumblr widget
Tumblr widget
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?
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
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.
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.
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.
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
Support captions bro.
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!
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.