zpBootstrap - Question for Vincent

tplowe56 Member
edited January 5 in General support

Vincent,

How do I change the behavior for the "caption" under the image in Fancybox. It is set to fade out after a certain amount of time, and it will also reappear upon the user hovering the mouse over the image.

I would like to make the caption permanent or maybe a longer period of time. I have searched but can't figure out how to change the setting.

I have found the Fancybox settings page, but not the specific setting for the persistence of the captions.

Thanks

Tags:

Comments

  • Hi
    I am unable to find where I can change this setting of caption.

    On this demo https://fancyapps.com/fancybox/3/#images-1, caption remains even if all other objects desapear, but I am unable to reproduce it.

    If you find the right way, I am interseted by.

  • acrylian Administrator, Developer

    With the default setup Fancybox uses the HTML5 custom attribute 'data-caption` to show the caption below the image. Do you do aynthing specific in zpBoostrap?

    That is actually persisten by default and there is no option for the caption itself as far as I can see. There is only one to prevent overlapping.

  • there is an option to try:
    add
    idleTime : false, somewhere in zpB_fancybox_config.js

    or fix it to the requested time (ie idleTime : 10,)
    as far I can see, this option is used to hide/show all elements of Fancybox (caption and other navigation elements)

  • Thanks for the help. I still haven't figured out how to make the caption stay visible longer. I think I'll just leave it the ways is. Not a very big deal.

  • fretzl Administrator, Developer
    edited January 12

    This will keep all your controls/buttons and captions visible.
    Add this to your functions.php. It will print the JavaScript right before the closing </body> tag.

    function custom_FancyBox_config() { ?>
      <script type="text/javascript">
        $(document).ready( function() {
          $.fancybox.defaults.idleTime = false
        });
     </script>
    <?php } 
    zp_register_filter('theme_body_close','custom_FancyBox_config');
    
  • Fretzl, thanks for your help.

    I tried your code and it worked on desktop only. Unfortunately it also introduced an anomaly, which caused a 1px black line that would show up on images that were larger then previous images. Eventually I would end up with a horizontal and a vertical black line, crossing the larger images. If I drag the browser window to another monitor it disappears.

    I have done some more work on this, please read my next post to Vincent.

  • Vincent,

    I have done some digging through Fancybox documentation and some online forums. You can change the persistence of the caption and controls by editing this page "jquery.fancybox.min.js". Change the idletime setting to a number of seconds or false.

    {
            if (n.fn.fancybox) return void console.info("fancyBox already initialized");
            var a = {
                    closeExisting: !1,
                    loop: !1,
                    gutter: 50,
                    keyboard: !0,
                    preventCaptionOverlap: !0,
                    arrows: !0,
                    infobar: !0,
                    smallBtn: "auto",
                    toolbar: "auto",
                    buttons: ["zoom", "slideShow", "thumbs", "close"],
                    idleTime: 3,
                    protect: !1,
                    modal: !1,
                    image: {
                        preload: !1
                    }, 

    Unfortunately this has no effect for mobile devices, maybe having something to do with the touch interaction coding. Idletime for mobile is set at 3 on various pages in the fancybox code but no adjustments to the code would change the mobile behavior.

    Maybe with some more research I will figure this out.

  • Vincent,

    The Javascript on that page, as shipped, was not formatted cleanly. I used this site to reformat.
    (https://www.freeformatter.com/javascript-beautifier.html)

    After reformatting, the idletime setting was on line 34. There is a mobile idletime setting on line 123. I could not get any effect from making changes to that line.

    I personally prefer an idletime of like 5-10 seconds. My captions usually have a lot of relevance. But I can see how most professionals, would like their work displayed cleanly with no caption or controls after a brief time.

  • tplowe56 Member
    edited January 17

    I think I figured out the mobile option.

    In file: themes/zpBootstrap/js/zpB_fancybox_config.js
    Change line 42 to idleTime: 7,

    
    
            mobile : {
                thumbs : false,
                idleTime : 7,
    
                clickContent : function( current, event ) {
                    return current.type === 'image' ? 'toggleControls' : false;
                },
                dblclickContent : function( current, event ) {
                    return current.type === 'image' ? 'next' : false;
                },
                dblclickSlide : false,
            },
        });
    });
    

    Then mobile will display Caption & Controls for 7 seconds.

    I'm trying to figure out how to have Controls disappear in less time than the caption (since they overlay the image) but have not figured that out yet.

Sign In or Register to comment.