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...
Use a callback:
$(function(){
$('button').live('click', function() {
$('div').load('test1.txt', function() {
$('#gallery a').lightBox();
});
});
});