Tumblr photoset/video sizes via Jquery ?

[teros]

I have a theme I’ve been working on for Tumblr sites. It utilizes masonry and infinitescroll and a ton of end user options.

One of the options I’m wanting to include is index post size changing via tags as classes. I’ve made pretty good progress in general. Adding a pre-determined tag to posts allows those posts to be 2 columns wide vs 1 column as the default.

The issue arises with photoset posts. Changing the styling via css between default and 2 column works on other post types – the post content adapts to the size of the container div but not photosets.

The best solution, imo, would be to use jquery to cause the theme to load a different size photoset depending on the tag/class ie when default it would look like this =
{block:IndexPage}{Photoset-250}{/block:IndexPage}
BUT when the tag/class for 2 column post was added it would be =
{block:IndexPage}{Photoset-500}{/block:IndexPage}

My feeble attempts at copy/pasting jquery snippets I’ve found here and there inline in the html has resulted in both the 250px photoset and the 500px photoset being loaded.

Any help would be appreciated.

[TheDoc]

I wrote a pretty nifty jQuery plugin that mimics the Tumblr default except it adds even more cool features! https://github.com/PixelUnion/Extended-Tumblr-Photoset

If you run into any problems using it, don’t hesitate to post an issue on the repo.

One thing that will work perfect for you is that it’s entirely flexible and will fill the space of whatever container it is in. This means you won’t need to worry about loading in a different photoset, it’ll just expand/contract accordingly.

[teros]

Thanks TheDoc. Sure that its a cool plugin but I really don’t want (or think I need) to add the extra JS & CSS to the theme just to get the the photosets scaled down or up. I may look at the CSS to see if I can use some of it.

My preference would still definitely be a Jquery technique to choose size loaded based on default or tag/class. My thought is if I can find this type of solution I can also apply it to photo’s & video’s even though they are currently scaling down via CSS only.

[teros]

Ok, I’ve seen the error of my ways and decided to use the plugin :)
I am having a problem with masonry and infinite scroll tho…. It seems that when a photoset is loading while infinite scroll is also operating (loading the next sets of posts) the photoset’s height is not being recognized sometimes. In other words I’m winding up with large gaps beneath photosets in some cases.

Any ideas/help ?

[TheDoc]

Hmmmm, we’ve implemented it on lots of blogs that use infinite scroll with no problems. Can you post a link to your site or some code?

[teros]

A lot of the JScript for the theme is in this file – http://zero8zero5.com/assets/layers3.js
Then there’s the all the JS in the tumblr html file itself pasted here – http://pastebin.com/QUU7fTTb
….. As u can see its a lot of “stuff” – I’ve been trying for a long time, with my limited skills, to edit the original (tessalate) theme to add features and flexibility.
I can share a link to the test site via pm but please be aware its predominately….ahmmm…..”adult” content that some might find offensive.
Thanks

[Author]

Posts