CODEWITHSUNDEEP
jquerycssfancyboxstylingfancybox-2
kingsfoil
kingsfoil

Reputation: 3875

Styling two instances of fancybox-close on the same page with possible use of wrapCSS attribute

I have two fancyboxes on the same page, and I would like to have a different style/position of the fancybox-close button for one of them.

It was recommended for me to use the wrapCSS API option, however, I don't know how to use it and I haven't found any detailed documentation of how it works. I've seen a few people talk about it here on stackoverflow, but not in enough detail that I could glean how to use it (e.g. Custom styles for multiple instances of Fancybox among others).

Therefore my question is:

Is it the wrapCSS option a viable route for adding additional style to the fancybox-close selector? and how do I use it? (a reference/link to good documentation on this would be a perfectly acceptable answer)

Is there any other viable option?

I would love to see some code examples when applicable.

Upvotes: 1

Views: 957

Answers (1)

JFK
JFK

Reputation: 41143

In this case I wouldn't use the wrapCSS option but adding an extra class to those elements I want with a different style, i.e.

<a class="fancybox" rel="gallery" href="http://fancyapps.com/fancybox/demo/1_b.jpg">Fancybox-close button is on the right</a>

<a class="fancybox closeLeft" rel="gallery" href="http://fancyapps.com/fancybox/demo/2_b.jpg">Fancybox-close button is on the left</a>

Notice that the second link has the class closeLeft, which tells me the fancybox close button will positioned on the left rather than the default position (right)

Then I would use the afterShow callback to validate the class and change the style accordingly :

$(".fancybox").fancybox({
    afterShow: function () {
        if ($(this.element).is(".closeLeft")) {
            // change styles for this element
            $(".fancybox-close").css({
                left: -18,
                right: "auto"
            });
        }
    }
});

See JSFIDDLE

Upvotes: 2

Related Questions