Use in Foundation 4 theme

Permalink Browser Info Environment
I just wonder if anyone has tried using DIG in a Foundation 4 theme? The thing is I'm right now in the process of moving an existing site over to a Foundation 4 theme and I experience some jumping in the overlay and also Close button and descriptions are a bit off.

Anyone else experiencing the same problem, or might it be some dumb style I have messed with without knowing?

A short (11 sec) video of the issue: http://www.youtube.com/watch?v=1RWWkQTlIyQ...

Type: Discussion
Status: In Progress
adajad
View Replies:
jordanlev replied on at Permalink Reply
jordanlev
Hi. Without being able to inspect the actual site, it's tough to say. But my first guess is that Zurb Foundation is a responsive theme, and hence applies "box-sizing: border-box" to every element on the page. Since Fancybox is from the pre-responsive era, it probably doesn't take into account this possibility. You might be able to avoid the problem by adding some CSS to your theme like:
#fancybox-wrap * {
    box-sizing: content-box;
}


If that doesn't work and you still are having no luck, can you provide a link to the site?

-Jordan
adajad replied on at Permalink Reply
adajad
Ah... I should have posted back to this yesterday. Thanks for posting back and looking it up though.

I ended up with a different view using foundation.clearing.js instead (included in Foundation) to have it fully responsive and with swipe support on touch devices.

The code below is all you need in view.php (after including foundation.clearing.js in theme footer) if you have lightbox enabled, which I have on all galleries.
<?php 
defined('C5_EXECUTE') or die(_("Access Denied."));
?>
<div class="deluxe_image_gallery_container">
   <ul class="clearing-thumbs" data-clearing>
   <?php  foreach ($images as $img) { ?>
       <li><a href="<?php  echo $img['full_src'] ?> " class="th"><img data-caption="<?php echo $img['caption'] ?>" src="<?php  echo $img['thumb_src']; ?>" /></a></li>
   <?php } ?>
   </ul> 
</div>


I will modify the complete block (controller, add, edit, view etc.) when I get the time as to have less calls and not include fancybox.js when not needed (and also always use original image dimensions on click), but for showing off the functionality with swipe support for the client, the modified view.php is enough.

EDIT:
#fancybox-wrap * {
    box-sizing: content-box;
}

The above did help with the 'jumping' zoomed image, but the styles for close button and caption is still off.

The site isn't live yet, but hopefully it will be in the next three to four weeks.
coax replied on at Permalink Reply
coax
did you find a way to replace correctly the close bouton and arrows?
thanks for your help
coax replied on at Permalink Reply
coax
and the transit effect is not really good as well… do you have an idea please?

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.