Fancybox for CMS, Prestashop 8.2

[Reeder]

To add the fancybox plugin to PS 8.2 I used this article: https://mypresta.eu/prestashop-17/cms-page-fancybox-gallery.html

Fancybox opens, but the buttons (controls left / right) are not displayed.

I then proceeded as follows and tried to extend the startup script, but nothing works correctly and the controls buttons are not displayed:

example#1:

jQuery(document).ready(function() {
   jQuery('a.fancybx').fancybox({
        openEffect      : 'elastic',
        closeEffect     : 'elastic',
        nextEffect      : 'easeOutBack',
        prevEffect      : 'easeInBack',
        overlayShow   :   'true',
        cyclic    :   'false',
        showNavArrows :   'true'
    })
});  

 

example#2:

$(document).ready(function() {
   $('a.fancybx').fancybox({
        openEffect      : 'elastic',
        closeEffect     : 'elastic',
        nextEffect      : 'easeOutBack',
        prevEffect      : 'easeInBack',
        overlayShow   :   'true',
        cyclic    :   'false',
        showNavArrows :   'true'
    })
});  

 

example#3:

document.addEventListener("DOMContentLoaded", function (event) {

 $("a.fancybox").fancybox();

});

 

example#4:

document.addEventListener("DOMContentLoaded", function (event) {

 $("a.fancybox").fancybox({
        openEffect      : 'elastic',
        closeEffect     : 'elastic',
        nextEffect      : 'easeOutBack',
        prevEffect      : 'easeInBack',
        overlayShow   :   'true',
        cyclic    :   'false',
        showNavArrows :   'true'
    });

});

 

All these scripts open fancybox, but the navigation arrows are missing and I always scroll to the top of the web page. I've already tried a lot of things, I also added the rel="" tag and I don't know if I should use any other tags, but I rather think that there is an error somewhere in the script.

 

Don't you know any practical tips?

Thank you very much and have a nice day.
Peter

 

[Prestashop Addict]

Hi, certainly a css issue, do you see there html code in source?

Edited March 31 by Prestashop Addict (see edit history)

[Reeder]

Hi,

yes I see the CSS in the PS 8.2 header, like this:

<link rel="stylesheet" href="https://jezdecka-staj.cz/js/jquery/plugins/fancybox/jquery.fancybox.css" type="text/css" media="all">

 

 

[Prestashop Addict]

I would say html arrows in source code generated

[Reeder]

oh yes, the buttons are not generated in the HTML code.

How can I fix this please?

[Knowband Plugins]

Do you have the site URL to check the same?

[Reeder]

Hi, yes: 

 

https://jezdecka-staj.cz/content/category/2-nabidka-jezdeckych-lekci

 

 

[Knowband Plugins]

There is no "showNavArrows" option in PS fancybox i.e. https://jezdecka-staj.cz/js/jquery/plugins/fancybox/jquery.fancybox.js

I can see the "arrows" option. You can try with "arrows": 1

instead of showNavArrows :   'true'

[Reeder]

I tried this examples:

-----example 1----

document.addEventListener("DOMContentLoaded", function (event) {
 $("a.fancybox").fancybox({
        "arrows" :   1
    });
});

 

----example 2----

document.addEventListener("DOMContentLoaded", function (event) {
 $("a.fancybox").fancybox({
        arrows :   'true'
    });
});

 

-----example 3 ---------

document.addEventListener("DOMContentLoaded", function (event) {
 $("a.fancybox").fancybox({
        arrows :   '1'
    });
});

 

Fancybox opens, but the left/right buttons are not there...
The strange thing is that when I open it, it scrolls the page to the top.. which fancybox doesn't do by default...

Can't those buttons be disabled somewhere?

 

 

[Reeder]

  On 4/1/2025 at 9:04 AM, Reeder said:

I tried this examples:

-----example 1----

document.addEventListener("DOMContentLoaded", function (event) {
 $("a.fancybox").fancybox({
        "arrows" :   1
    });
});

 

----example 2----

document.addEventListener("DOMContentLoaded", function (event) {
 $("a.fancybox").fancybox({
        arrows :   'true'
    });
});

 

-----example 3 ---------

document.addEventListener("DOMContentLoaded", function (event) {
 $("a.fancybox").fancybox({
        arrows :   '1'
    });
});

 

Fancybox opens, but the left/right buttons are not there...
The strange thing is that when I open it, it scrolls the page to the top.. which fancybox doesn't do by default...

Can't those buttons be disabled somewhere?

 

  On 4/1/2025 at 9:04 AM, Reeder said:

I tried this examples:

-----example 1----

document.addEventListener("DOMContentLoaded", function (event) {
 $("a.fancybox").fancybox({
        "arrows" :   1
    });
});

 

----example 2----

document.addEventListener("DOMContentLoaded", function (event) {
 $("a.fancybox").fancybox({
        arrows :   'true'
    });
});

 

-----example 3 ---------

document.addEventListener("DOMContentLoaded", function (event) {
 $("a.fancybox").fancybox({
        arrows :   '1'
    });
});

 

Fancybox opens, but the left/right buttons are not there...
The strange thing is that when I open it, it scrolls the page to the top.. which fancybox doesn't do by default...

Can't those buttons be disabled somewhere?

 

 

Expand  

I tried this tutorial on PS 1.7 and it works there too without buttons and scrolls the page to the top...

Expand  

 

[Reeder]

Got it! 🤠

and adding the attribute rel="yourRel" to all <a> links, like this

Thanks for your help and effort Knowband Plugins & Prestashop Addict