Home› General support

zpBootstrap - Question for Vincent

tplowe56 Member
edited January 2021 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

  • vincent3569 Member, Translator

    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.

  • vincent3569 Member, Translator

    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)

  • tplowe56 Member

    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 2021

    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');
  • tplowe56 Member

    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.

  • tplowe56 Member

    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.

  • tplowe56 Member

    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 2021

    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.

  • vincent3569 Member, Translator

    @fretzl
    my theme have a specific js file to configure fancybox (js/zpB_fancybox_config.js) and this is the better way to add some code rather add it in fonction.php as you suggested.
    but thanks for it :-)

    @tplowe56
    thanks for the tips to hack fancybox core, but it requires to hack jquery.fancybox.js and then minify it in jquery.fancybox.min.js

    I created a ticket on fancybox's github (https://github.com/fancyapps/fancybox/issues/2545), and with all answears, there are some ways to configure fancybox to suit your needs.

  • vincent3569 Member, Translator
    edited January 2021

    for exemple, you can change js/zpB_fancybox_config.js like that:

    $(document).ready( function() {
    $().fancybox({
        // FancyBox shows only filtered items with Isotope
        selector : $("#isotope-wrap").length ? '.isotope-item:visible > [data-fancybox="images"]' : '[data-fancybox="images"]',
        loop : true,
        preventCaptionOverlap: true,
        idleTime : 10,
        margin : [20, 0],
        buttons : [
            'thumbs',
            'slideShow',
            'close'
        ],
        protect : true,
        animationEffect : 'fade',
        touch : {
            vertical : false
        },
        slideShow : {
            autoStart : false,
            speed : 3000
        },
        clickContent : function( current, event ) {
            return current.type === 'image' ? 'toggleControls' : false;
        },
        clickSlide : false,
        clickOutside : false,
        dblclickContent : function( current, event ) {
            return current.type === 'image' ? 'next' : false;
        },
        caption : function( instance, item ) {
            if ($(this).find('.caption').length) {
                return $(this).find('.caption').html();
            } else {
                return $(this).attr('title');
            };
        },

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

    I changed/added

            preventCaptionOverlap: true,
        idleTime : 10,

    in global options

    and

            mobile : {
            thumbs : false,
            idleTime : 5,

    for mobiles options

    let me know if it's OK for you with these changes

  • tplowe56 Member

    Thanks so much Vincent. That works great. To be honest, I never knew that "min" was a minified version of a larger file. Your method is very clean and simple.

    I have one further question. What file would I edit to remove the word "Album" and adjust the remaining margin in my header. It seems a bit redundant. Thanks for all your help

    header

  • acrylian Administrator, Developer

    I would assume the "Albums" might be the top level h1 headline which is important for SEO. The breadcrumb could also act as the headline to avoid the "redundancy".

  • vincent3569 Member, Translator

    it is not so easy at it seems...
    This title in Gallery/Albums/Images pages is also used for pages title.
    As far i can see, you use zenpage plugin to mange some pages (User Guide and Memory Map).
    I can point you the code to remove, but it also remove titles of theses pages.

  • tplowe56 Member

    Oh ok I see. I better leave it alone. Thanks.

  • tplowe56 Member
    edited January 2021

    Vincent, I discovered that if you leave the "Gallery Title" blank at admin>>options>>gallery it will eliminate the Title line in the header but not effect pages titles. The one adverse side effect is that it eliminates the root folder in bread crumbs.

    But it does allow a very clean look, as I have also eliminated some other elements in the header.

    header

    https://www.loweprofile.com/gallery/

Sign In or Register to comment.