CODEWITHSUNDEEP
jqueryhtmlcssfancyboxfancybox-2
user2427839
user2427839

Reputation:

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

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.

Upvotes: 6

Views: 14472

Answers (1)

JFK
JFK

Reputation: 41143

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)

Upvotes: 16

Related Questions