Photosets are not working in custom theme

[Shiro]

Hi everyone!

I've created a custom theme a while ago (still stuck in Tumblr's approval mechanism's gears) which I'm using in a secondary blog to showcase it.

The problem I've got is that Photoset posts are not working. The images are displayed and they act as links so when you click on one of them the lightbox kicks in but you don't get to see any images. There is a sample photoset post if you want to see this in action.

The theme is using Twitter Bootstrap for the styling and layout and Masonry for layout purposes.

Been struggling with this for two days now and I can't figure out what's wrong. If anyone could please help, I'd be eternally grateful!

Thank you very much! :)

[lasarte]

 I'm seeing the images in the lightbox fine, are you sure it's not a browser issue?

[Shiro]

Hi lasarte,

I'm attaching a screen shot of what I see when I click on one of the images.

Don't think it's a browser issue as I've had the same problem in Firefox, Chrome, Opera, mobile Firefox, mobile Opera and even in IE8...

Thank you,

Shiro

[lasarte]

Weird. I tried Firefox, chrome and safari. Still fine. Are you on windows or mac?

Other than that, have you checked the javascript console on chrome to see if any errors pop up when firing up the lightbox?

[Shiro]

I'm on a Windows machine at home. Running XP. I have access to Windows 7 and Mac OS X 10.8 at work. So I had the chance to do some more testing. 

It turns out that photosets only work in Webkit browsers such as Chrome, Safari and Maxthon (when using the Webki engine). No luck in Firefox, Opera and IEs either on Windows or on a Mac. 

The weirdest thing is that even if I remove all of my scripts (the Bootstrap-related one and my custom scripts), the photosets still don't work. There were no errors returned in either Firebug's console or in the console in Chrome and Safari. 

I feel very confused right now... :(

[lasarte]

Well, I've been doing some testing on my own. It seems that your problem isn't a js confict but a css one. If you disable both the bootstrap.css and the html5 reset one, the photoset work fine. There's something on those that's making the div containing the pictures not align correctly.

[Shiro]

Hmmm... I will have to spend a lot of time experimenting with the CSS then. 

The only thing that worries me is that it affects all other browsers apart from the Webkit ones. Display issues like this one are tough to deal with. 

Thank you very much for all your help lasarte and if I do manage to find the solution I'll post it here. :)

[jakejilg]

I see the same blank image. Try adding this somewhere in CSS.

#tumblr_lightbox_center_image{
position: relative !important;

[Shiro]

Thank you!

I still haven't had the time to look into this properly but your CSS seems to be doing the trick. Now I can see the central image and when I click on it I can see its edge as it's being moved to the left but I can't see the edge of the right one. Something to do with a very high number on its right property in CSS.

For the time being though it's a great solution and I'm very grateful for your help!

[jakejilg]

Just playing with Firebug, I think this might work.

#tumblr_lightbox_right_image{
right: -600px !important;
}

Could you post the javascript that you added to your theme that before this happened? I think something is tampering with elementsByTagName('img') left and right css, because I notice no difference in tag, class, and id settings in the CSS in Firebug.

On Monday, February 11, 2013 3:31:46 PM UTC-6, Shiro wrote:

[Shiro]

The 'right' property is automatically calculated depending on your screen width. -600px worked in one monitor but on a larger monitor things were not so great. 

And then there's this from the CSS: 

tumblr_lightbox_left_image {
left: -1137.8px;
}

tumblr_lightbox_right_image {
right: -1112.8px;
}

where there's clearly some overlapping going on... 

The script for the theme has not changed since last November which is quite weird. I'm sure that photosets were working just fine back then as I had tested the theme extensively in different browsers. Considering that photosets are handled in an iframe with some of Tumblr's JavaScript thrown in for the fancy functionality, I'm inclined to believe that a change in their script(s)/CSS is clashing with the scripts/CSS I'm using.

Thank you again for all your help by the way, I really do appreciate your time and effort! :)