How to replace default controls with custom buttons in Fancybox 2.1.5?

Question

In Fancybox 2.1.5, I want to replace the default controls with my custom buttons (new preloader + close / next / prev commands on the sprite).

I'm not sure how to adjust CSS code correctly. I tried to change the CSS as follows , but there is something wrong, the "next" icon appears in the upper right corner instead of "close".

You can see my code for this meaning .

Answer 1

No need to link to the original CSS file, use the tpl API option, not how

 $(".fancybox").fancybox({ tpl: { closeBtn: '<a title="Close" class="fancybox-item fancybox-close myClose" href="javascript:;"></a>' } }); 

Note that I added the myClose class to set my own CSS properties, background image, etc., for example

 .myClose { height: 50px; width: 50px; background: #ff0000; } 

See JSFIDDLE for an example.

Do the same for prev / next icons. Check API documentation (do a tpl search)