Problem in integrating .js files for lightbox with previous ones

Question

Hi guys, i am really messing up with this, could somebody help me here, please.

what i am doing? -> I have developed an app in which I need lightbox effect(overlay) i.e when user will enter his name and click the button, he'll be shown a lightbox(simply telling him that process is going on. you need to wait.), he can then close the box.(This is because process may take 5 mins if he is a big user.)

what i have done? -> There are 2-3 previous .js files included in my home.php, and when i implement these lightbox's .js files it doesnot work for lightbox: Here is my code in home.php: /this is overall css file

< link rel="stylesheet" href="style.css" type="text/css" />

//this is for lightbox

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>

//css for lightbox effect

<link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />

//this is jquerylibrary

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

//this is for ajax script

<script type="text/javascript" language="javascript" src="ajax_navigation.js">
</script>

//this is swfobject.js for piechart

<script type="text/javascript" src="js/swfobject.js"></script>

<script type="text/javascript">
    function senddata(){

        //here is some code for piechart
    }

$(document).ready(function(){
    $.get('/get_home_data.php', function(data){
        $('#get_data').html(data);
    });

    $("#btn_submit").bind('click', function(){

        if($('#tnm').val() != ''){

        $('#loadimg').html('<img src="images/ajax-loader(3).gif">');
            $('#lightbox').html('<img src="images/image-1.jpg" rel="lightbox" title="my caption">');
            $('#loadimg').show();
            $('#lightbox').show();      
            $.get('/userinfo.php?tnm='+$('#tnm').val(), '', function(data){
                    $('#get_data').html(data);
                    $('#lightbox').hide();
    $('#loadimg').hide();   
   });
        }
});

    $('#tnm').bind('keyup', function(e){
        if(e.keyCode == 13) {
            $("#btn_submit").trigger('click');
        }
    });
});
</script>

this is so far(sorry for being lengthy), all the div ids are called properly in the body.

Now I am facing? -> I have included these three .js files for lightbox above, but not getting the effect, when i put these .js files at last it doesn't call get_home_data.php and disables click event, but gives the lightbox effect. I can understand that putting it lastly doesn't execute above jquery part.

i am really struggling hard to get this done and i reached upto this, my whole app is ready just without this lightbox.

I'll really appreciate your help guys. (and will happily provide more details if required. )

Thank you in advance.

Answer 1

Do you you have the images (with rel="lightbox") already in your page or you are only adding them using the jquery part? In my opinion the initialization of lightbox needs the images to be already in the page. Which implementation of lightbox do you use? This one?

If so, try to call initLightbox(); after your jquery code statements (after the statement that loads the images).