open Fancybox in tabs

Question

Hello all. I am using PHP + jQuery + Fancybox in my project. I have multiple tabs that get created dynamically. I have got a star icon on every tab header and on clicking them I want to open a fancybox.

My tabs are basically ul-li with following dynamic code.

$("#tabs").append("<li class='current'><a class='tab' id='tab_" +
    tabCnt + "<a href='#loginBox_div' class='login_link'> <img src='star.png' style='cursor:pointer'/> </a>" + "<a href='javascript:void(0);' class='remove'>x</a></li>");

in my index file :

$(document).ready(function() {

        $("a.login_link").fancybox({
            'titlePosition'     : 'inside',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none'
        });     

    });

The problem is that when I click on star icon of first tab, the loginBox_div (fancybox) opens properly. But when my second tab is created and when I click on its star icon, the fancybox is not opening although the class is applied in second and successive tabs. No javascript errors too. Please show me the way. Thank you.

Answer 1

I have got the solution :)
I had to initialize fancybox ie write following fancybox code, every time I opened a new tab. Make sure we dont have to do this for the first tab as it is already initialized in index file.

$("a.login_link").fancybox({
            'titlePosition'     : 'inside',
            'transitionIn'      : 'none',
            'transitionOut'     : 'none'
        });