2 different fancybox in onepage

Question

I have 2 types of fancyboxes in same page:

1. picture gallery - fancybox with no border (padding set t 0 in options) , different close button etc
2. normal fancybox- This has border etc

The problem that I have is when I click the picture gallery , it works good. But after that when I click the normal fancybox link, this one also seems to work like the picture gallery ( I mean no border, different close button etc).

this happens vice versa too. That is the picture gallery works normal when clicked after the normal link.

I have 2 different link with 2 different classes - fancybox, fancybox_picture.

On document load I write

 $('.fancybox.iframe').fancybox({
 //options
 });

 $('.fancybox_picture.iframe').fancybox({
 //different options
 });

I tried using .live () also, but no luck.

Answer 1

Fancybox (v2.x) uses a special class name to determine the type of content : fancybox.iframe

Your selector $('.fancybox.iframe') is confusing fancybox.

It would be better to use $('.fancybox') and $('.fancybox_picture') only.

On the other hand, if you want to open fancybox with "iframe" type of content, you have two (better) options :

1) Select the API option type: "iframe" within your custom fancybox script like

 $('.fancybox').fancybox({
  //options
  type: "iframe"
 });
 $('.fancybox_picture').fancybox({
  //different options
  type: "iframe"
 });

... or

2) Add the class fancybox.iframe to your anchor like

<a href="{target}" class="fancybox fancybox.iframe"> open 01</a>
<a href="{target}" class="fancybox_picture fancybox.iframe"> open 02</a>