How to replace default controls with custom buttons in Fancybox 2.1.5?
No need to mess with the original CSS file, use the tpl
API option instead like
$(".fancybox").fancybox({
tpl: {
closeBtn: '<a title="Close" class="fancybox-item fancybox-close myClose" href="javascript:;"></a>'
}
});
Notice that I added the class myClose
so I can set its own specific CSS properties, background image, etc. like
.myClose {
height: 50px;
width: 50px;
background: #ff0000;
}
See JSFIDDLE just as an example.
Do the same for the prev/next icons. Check the API documentation (search for tpl)
Related videos on Youtube
hitautodestruct
I'm a freelance front end developer. Mainly interested in the HTML/CSS/JS stack and related technologies. I also dabble in NodeJS, PHP, MySQL, VueJS, AngularJS and other technologies that help with building web related stuff.
Updated on June 04, 2022Comments
-
hitautodestruct almost 2 years
In Fancybox 2.1.5 I want to replace the default controls with my custom buttons (new preloader + close/next/prev buttons on sprite).
I'm not sure how to adjust the css code properly. I tried to modify the CSS as follows, but there's something wrong, the 'next' icon shows up in the top right corner instead of the 'close' button.
You can see my code on this gist.
-
Admin over 10 yearsThanks for the Tips. But this way looks much more complicated than just editing CSS file, which is small and simple enough. Fancybox plugin is used in Prestashop. I don't know where is tpl file needed for this. Altering prestashop template will be more complex, in my opinion. I adjusted jquery.fancybox.css file, it just works as required, example: codepad.org/NXqQL6a0. I'm not sure about some details here:
margin-top: -22px; margin-left: -22px; (line 88,89)
andmargin-top: -15px; (line 137)
- are these values linked with original buttons size or its independent from them? -
JFK over 10 years@triwo the day prestashop decides to update fancybox, then you would need to customize the css file again. This why is not a good idea to mess with the original files (but it's up to you)... and
tpl
is not a file, is an option that you use in your custom fancybox initialization script to override what is in the CSS file without modifying it. -
Admin over 10 yearsI will try custom fancybox initialization script, but now I just want to complete with CSS mods and to get answers on my question.
-
JFK over 10 years@triwo : well, I can assure you, you are taking the long way. Good luck. I will leave my answer in case it helps others.