Fancy box for dynamically loaded Images

[Web designer from kerala]

Hi,
There is a gallery in my page and I m using Fancy box. This works fine
but not with dynamically created ( images from ajax request ) images.

How to do jQuery bind function with Fancybox ?


The one like

$('.g_div a').bind("click",function(){
//code here ;
});

Thanks in advance

[JFK]

you could use either the livequery plugin
http://groups.google.com/group/fancybox/browse_thread/thread/f75a88d7dd30c071/

or jQuery delegate()

<script type="text/javascript">
$(document).ready(function() {
$(document).delegate("'.g_div a", "click", function(event){
event.preventDefault();
$.fancybox(this,{
// fancybox options
'padding': 0
}); // closes fancybox
}); // closes delegate
}); // closes ready
</script>

some further reading
http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

On Aug 19, 9:16 am, Web designer from kerala <rajeeshrsn...@gmail.com>
wrote:

[JFK]

A side note:

When using jQuery delegate() we don't actually have to wait for the
document to be ready (has been fully loaded) so the following script:
<script type="text/javascript">
/* <![CDATA[ */
$(document).delegate(".fancyLink", "click", function(event){
event.preventDefault();
$.fancybox(this,{
// API options

'padding': 0
}); // closes fancybox
}); // closes delegate

/* ]]> */
</script>

will work for any present (existing) elements ......
<a href="images/01.jpg" class="fancyLink">existing element</a>

..... or future (dynamically loaded) elements in the document
<a href="images/02.jpg" class="fancyLink">added dynamically via ajax
or php</a>

so here it is a working example:

<script type="text/javascript">
/* <![CDATA[ */
$(document).delegate("a.fancyLink", "click", function(event){
event.preventDefault();
$.fancybox(this,{
// API options

'padding': 0
}); // closes fancybox
}); // closes delegate

$(document).ready(function() {
$("a.addNew").click(function(){
$("#future").html('<a href="images/03.jpg" class="fancyLink">added
element 3</a>');
}); // closes click
}); // closes ready
/* ]]> */
</script>

<a href="images/01.jpg" class="fancyLink">element 1</a><br />
<a href="images/02.jpg" class="fancyLink">element 2</a><br />
<a href="javascript:;" class="addNew">add new element</a>
<div id="future"></div>

On Aug 19, 9:53 am, JFK <jfk.d...@gmail.com> wrote:
> you could use either the livequery pluginhttp://groups.google.com/group/fancybox/browse_thread/thread/f75a88d7...

>
> or jQuery delegate()
>
> <script type="text/javascript">
> $(document).ready(function() {
> $(document).delegate("'.g_div a", "click", function(event){
> event.preventDefault();
> $.fancybox(this,{
> // fancybox options
> 'padding': 0}); // closes fancybox
> }); // closes delegate
> }); // closes ready
>
> </script>
>

> some further readinghttp://www.alfajango.com/blog/the-difference-between-jquerys-bind-liv...