zpBootstrap - Question for Vincent

tplowe56

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

vincent3569

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

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

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

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

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

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

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

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

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

@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

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

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

acrylian

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

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

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

tplowe56

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.

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