Search code examples
jqueryloadliveimage

JQUERY live with AJAX


I want to use AJAX with .live() so i can make things neat. I wan to know how it is done, I have provided a basic function: on a button click a tag is placed in a . But i need to use live() in order to use a lightbox on that image.

$(document).ready(function()
{
    $("button").click(function()
    {
        $("div").load('test1.txt')
    });
});

LIGHTBOX:

$(function()
{
    $('#gallery a').lightBox();
});

CSS:

<style type="text/css">
    /* jQuery lightBox plugin - Gallery style */
    #gallery
    {
        background-color: #444;
        padding: 10px;
        width: 520px;
    }

    #gallery ul
    { 
        list-style: none;
    }

    #gallery ul li 
    { 
        display: inline;
    }

    #gallery ul img
    {
        border: 5px solid #3e3e3e;
        border-width: 5px 5px 20px;
    }

    #gallery ul a:hover img
    {
        border: 5px solid #fff;
        border-width: 5px 5px 20px;
        color: #fff;
    }

    #gallery ul a:hover 
    { 
        color: #fff;
    }
</style>

USAGE: div tag with id=gallery

HTML:
 <link rel="stylesheet" type="text/css" href="../style-projects-jquery.css" />    

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery.lightbox-0.5.css" media="screen" />

<h2 id="example">Example</h2>
<p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p>
<div id="gallery">
    <ul>
        <li>
            <a href="photos/image1.jpg" title="Utilize a flexibilidade dos seletores da jQuery e crie um grupo de imagens como desejar. $('#gallery').lightBox();">
                <img src="photos/thumb_image1.jpg" width="72" height="72" alt="" />
            </a>
        </li>
</ul>
</div>

If someone can help me change the .click() function...


Solution

  • Use a callback:

    $(function(){
    
        $('button').live('click', function() {
            $('div').load('test1.txt', function() {
                $('#gallery a').lightBox();
            });
        });
    
    });