CODEWITHSUNDEEP
jqueryfancybox
Ken
Ken

Reputation: 3119

fancybox different styles for different images

I'm wanting to control just SOME of the images in my fancybox group.

This is related to another question I've asked in this area but is moving on to a different part of the problem, and so I've started a new question.

Given the code

<div id="gallery"> 
    <a href="photos/pic1.jpg" rel="lightbox-left" title=""> 
        <img src="photos/pic1_2.jpg" /></a> 

    <a href="photos/pic2.jpg" rel="lightbox-left" title="my title" class="flag"> 
        <img src="photos/pic2_2.jpg"  /></a>
</div>

you'll see that the 'a' tag containing second image (pic2.jpg) has a class of 'flag'. This is because I want it to be styled differently from the other one. Let's say, for example, that I want it to have a green background.

I can achieve that for all instances with something like

.fancybox-skin {
    background-color: green;
}

but that applies to ALL the displayed pictures. Clearly my class of 'flag' only applies to MY element and not to the generated fancybox code.

Is there any way I can get control of particular instances of the generated code?

I'm aware of the wrapCSS property but, as I see it, that will put a containing class round ALL the images and not just specified ones... or am I missing something?

Upvotes: 0

Views: 1403

Answers (2)

Ken
Ken

Reputation: 3119

Thanks to @Janis for pointing me in the right direction!

Using the following code attached to the beforeShow event I was able to get to an acceptable effect...

        $('#gallery a').fancybox({          
        beforeShow: function () {
            if ($(this.element).hasClass('flag')) {
                this.skin.css("background-color", "green");                
            }
        }, ...etc...

The main problem I was having was being able to get at properties of the current element which 

$(this.element)

allowed me to do.

Upvotes: 0

Janis
Janis

Reputation: 8769

You can use callbacks to style based on current item. For example:

$(".fancybox").fancybox({
    beforeShow: function() {

        if (this.index == 0) {
            this.skin.css("background-color", "green");

        } else if (this.index == 1) {
            this.skin.css("background-color", "blue");
        }

    }
});​

See in action - http://jsfiddle.net/LehkV/

There are different ways to set parameters individually, see #15 from http://fancyapps.com/fancybox/#useful

Upvotes: 1

Related Questions