Support » Plugin: Easy FancyBox » Easy FancyBox & Advanced Custom Fields Gallery

  • Resolved andrew55

    (@andrew55)


    I am currently using Simple Lightbox with Advanced Custom Fields, but I really like your plugin more.

    In my Custom Post Type template, I have this code which allows an ACF gallery field to be used with Simple Lightbox (see the slb_activate call):

     <?php $images = get_field('gallery');
    if( $images ): ?>
    <div class="gallery">
        <ul class="custom-gallery">
            <?php foreach( $images as $image ): 
                $content = '<li>';
                    $content .= '<a class="gallery_image" href="'. $image['url'] .'">';
                         $content .= '<img class="custom-gallery-pic" src="'. $image['sizes']['thumbnail'] .'" alt="'. $image['alt'] .'" />';
                    $content .= '</a>';
                $content .= '</li>';
                if ( function_exists('slb_activate') ){
        $content = slb_activate($content);
        }
        
    echo $content;?>
            <?php endforeach; ?>
        </ul>
    </div>
    <?php endif; ?>

    I got this code from this link:

    https://support.advancedcustomfields.com/forums/topic/using-flexible-content-gallery-with-a-lightbox-plugin/

    I’ve been attempting to modify this code to work with Easy Fancybox, with no success.

    The gallery works, the navigation arrows on each image works, but I can’t figure out how to switch code to use Easy FancyBox instead of Simple Lightbox.

    I really like your pro plugin. I am planning on purchasing this anyway, but do you think the pro version will help me with this issue?

    Thanks for any suggestions.

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • It seems that Easy FancyBox is now working in my Custom Post Type with Advanced Custom Gallery Field

    …except all lighbox popups from the gallery are stuck at bottom of page, even when scrolling.

    Any suggestions on how to get the lightbox popups vertically centered in the middle of page, and resized according to the size of the screen?

    You can see test gallery at bottom of this page:

    http://www.visionrise.net/resident/oder-8/

    Thank you for any suggestions.

    • This reply was modified 7 months, 2 weeks ago by  andrew55.
    Plugin Author RavanH

    (@ravanh)

    Hi Andrew, it looks like your theme is including its own version of FancyBox in the header already. Loading another light box (even if it’s virtually the same) on top of that is asking for trouble… The result in this case is certainly this weird scroll/positioning behavior.

    Your best bet would be to either figure out how to make use of the fancybox script that is already present or find a way to make the theme not include that script and all (!) related snippets + style rules which might prove more difficult than it sounds.

    Or switch to another theme… Sorry.

    RavanH – thank you for the reply.

    Supposedly, my theme (Customizr) has a way to disable its FancyBox for these kinds of scenarios. I thought I already had the theme FancyBox disabled, but I am waiting to hear back from them for further details.

    It’s interesting, because on the same site, your FancyBox plugin works great with a standard post (there seem to be no FancyBox conflicts with theme):

    http://www.visionrise.net/1991-2/

    It’s just when there is a gallery using ACF (Advanced Custom Fields) in the custom post type, the FancyBox doesn’t work properly:

    http://www.visionrise.net/resident/oder-8/

    So your plugin works great on one part of our site, but not on another part.

    I’m no expert, but this makes me wonder if the issue is not because there is a conflict with existing FancyBox (from theme), but because of something having to do with ACF or the custom post type.

    Any ideas of suggestions on what might be occurring?

    Plugin Author RavanH

    (@ravanh)

    You are right, that would indeed suggest the conflict is not with the other fancybox script.

    The effect you are seeing (light box too far down) usually happens when the light box script cannot properly calculate some values like page and viewport height that it depends on when rendering the light box. This usually happens when there is something wrong with the page source or if other scripts are messing with the DOM tree structure in a bad way.

    I’m not aware of ACF adding such scripts but I did notice one significant difference in the source between the two example pages you linked to.

    The page source where fancybox works OK starts correctly with <!DOCTYPE html> while the other one starts like this:

    
    <link href="/css/resident-style.css" media="screen" rel="stylesheet" type="text/css">
    <!DOCTYPE html>
    ...
    

    Is that page using a custom theme template? If so, you’ll need to move that fist line into the <head> section and make sure the source starts with a DOCTYPE declaration.

    Or remove that style sheet and adapt the style rule to only apply to “resident” post types like this for example:

    
    .single-resident .entry-header {
      	display: none !important;
    }
    

    so then you can put it among the general or the custom css rules….

    Let me know if that changes anything 🙂

    You solution worked perfectly. Thank you for taking the time to help me troubleshoot the issue I “was” having.

    While I’m here, your pro plugin states a benefit of “More control over which image links should be auto-detected and/or grouped in a gallery”

    I’m going to get pro plugin anyway, but can plugin be configured to auto detect all media links, instead of just files linked to a media file? In other words, will FancyBox also work with gallery images linked to attachment pages?

    Thanks again for all of the help.

    Plugin Author RavanH

    (@ravanh)

    Hi Andrew, no for galleries you’ll need to modify each one and set the option “Link to Media File”.

    That said, it might be possible to force WordPress to always link gallery images to their respective media file. Do you have very many galleries to modify?

    Something like this (untested) in your theme’s functions.php might do the trick:

    
    function force_link_to_file($out) {
      if (is_array($out)) {
        $out['link'] = 'file';
      }
      return $out;
    }
    add_filter('shortcode_atts_gallery','force_link_to_file');
    

    Thanks – that function works great at forcing gallery images to link to their respective media files.

    I asked because client could very easily forgot the step to change the gallery pictures to link to their media files.

    When creating galleries, this is one extra step that is easy for client to miss. Then the gallery doesn’t work and they are calling me!

    Thanks again.

    I took the time to write a great review for this plugin. Thank you again!

    Plugin Author RavanH

    (@ravanh)

    Thanks for your very kind review 🙂

    I’ll consider adding this function as a plugin option. It’ll serve many others as well!

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Easy FancyBox & Advanced Custom Fields Gallery’ is closed to new replies.