Photos overlap container on pop-out

Permalink Browser Info Environment
When clicking on the photo in my gallery, the resulting lightbox has a photo either sized or placed improperly relative to the underlying box (seehttp://snag.gy/gXWgk.jpg).

What could be causing this? Any suggestions on how to fix it?

Thanks!

Type: Discussion
Status: Resolved
View Replies:
Steevb replied on at Permalink Reply
Steevb
Sorry, your link shows a 404!
TerraVinca replied on at Permalink Reply
C5 forums appear to have mangled the link. Please try this one:
http://snag.gy/gXWgk.jpg
Steevb replied on at Permalink Reply
Steevb
Thumbnails look wrong to start with, not sure if it's not a js error.

Can you post url so I can have at look at the source code.
TerraVinca replied on at Permalink Reply
Steevb replied on at Permalink Reply
Steevb
Okay, I'm gonna say a bit all sorts. Without testing myself, you have Bootstrap , Less, Miser and others all trying to play together nicely.

Because of 'Miser' I can't see who is misbehaving. Apart from the lightbox error, which will be a combo of both js and CSS, have you set your thumbnails right, they look wrong to me?

Maybe look at your theme package to see if it is conflicting?
TerraVinca replied on at Permalink Reply
It appears to be a problem with the theme -- when I change the Photos page to use Greek Yogurt, the photos display correctly. Thanks for the assistance in debugging.

Any advice on how I can trace down the problem more specifically to report it to the Theme creators?

UPDATE: I have created a forum post for the related theme (Bootstrap) athttp://www.concrete5.org/index.php?cID=571583...
TerraVinca replied on at Permalink Reply
I was able to resolve the issue by replacing Fancybox 1.3.1 in the add-on with Fancybox v2.1.5 from http://fancyapps.com/fancybox/ . Any chance you'll be updating the plugin to use the newer version of Fancybox?

For anyone with a similar problem reading this thread, all I did was:

1. Download and rename the Fancybox 2 "jquery.fancybox.pack.js" and "jquery.fancybox.css" to "jquery.fancybox-1.3.1.pack.js" and "jquery.fancybox-1.3.1.css"
2. Overwrite the existing files in "packages/sortable_responsive_gallery/blocks/sortable_responsive_gallery/responsive/"
3. Copy the folder "helpers" to "packages/sortable_responsive_gallery/blocks/sortable_responsive_gallery/responsive/" (I don't know if this is strictly necessary, but it didn't seem to hurt).
4. Update the url references in jquery.fancybox-1.3.1.css to include the "images/" path.

I recognize that this is a bit of a kludge in terms of "upgrading" to Fancybox 2, but it's working adequately for now. No idea if this breaks anything else.

Thanks for all the help!
shondy replied on at Permalink Reply
shondy
Just an FYI - after installing this add-on and seeing others commenting on the issue with the underlying container not aligning with the lightboxed image, you can override the styles by adding a custom style to your main.css file in your current theme:

#fancybox-wrap {
   box-sizing: content-box;
   -moz-box-sizing: content-box; /*firefox*/
}


This will override the behavior of themes that globally set the box sizing property to "border-box" (foundation, Bootstrap). You may need an !important after each declaration depending on where your css file lies in the cascade.

Cross-browser testing is always a good thing when dealing with this sizing property.

Cheers!

concrete5 Environment Information

Browser User-Agent String

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.