Initiate fancybox on dynamically loaded content via AJAX

[Mathijs]

Hello,

i'm having some problems with Fancybox. I have a design.html where i
have a list of images. I can click on those and fancybox gets
activated. I also created an ajax script telling the website to load
external .html files into the standard div in design.html by clicking
on a next or previous arrow. The ajax code is as following:

------

$(document).ready(function(){

var $paginanummerpersonal = 0;

$("#nextpagepersonal").click(function() {
$paginanummerpersonal++;
if($paginanummerpersonal==2) $paginanummerpersonal=0;
$(".loadpagepersonal").hide();
$(".loadpagepersonal").load("artwork/personal/personalpage"+
$paginanummerpersonal +".html", function(){
$(this).fadeIn
(200);
}) ;
});

$("#previouspagepersonal").click(function() {
$paginanummerpersonal--;
if($paginanummerpersonal<0) $paginanummerpersonal=1;
$(".loadpagepersonal").hide();
$(".loadpagepersonal").load("artwork/personal/personalpage"+
$paginanummerpersonal +".html", function(){
$(this).fadeIn
(200);
}) ;
});
});

-------

Very simple it is ;-)

Now, the problem is, when i click 'previous' or 'next' at least once,
the external pages are loaded and i can never get back my original
contentdiv on the design.html page. That's normal, since ajax loaded
the content from now on. Fancybox however refuses to load when i click
on an image from the newly loaded content. A new content page looks
like this:

----

<script src="http://www.mathijsdelva.be/Vault/js/jquery-1.3.2.min.js"
type="text/javascript"></script>
<script type="text/javascript" src="http://www.mathijsdelva.be/Vault/
js/jquery.fancybox.js"></script>
<script type="text/javascript" src="http://www.mathijsdelva.be/Vault/
js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a.personal").fancybox({
'hideOnContentClick': false,
'zoomSpeedIn': 0,
'zoomSpeedOut': 0,
'overlayShow': true
});
});
</script>
<link rel="stylesheet" href="http://www.mathijsdelva.be/Vault/style/
jquery.fancybox.css" type="text/css" media="screen" />

<a rel="personal" href="artwork/personal/big/1.png"
class="personal"><img src="artwork/personal/1.png" alt="1"
class="nopadding"/></a>
<a rel="personal" href="artwork/personal/big/2.png"
class="personal"><img src="artwork/personal/2.png" alt="2" /></a>
<a rel="personal" href="artwork/personal/big/3.png"
class="personal"><img src="artwork/personal/3.png" alt="3" /></a>
<a rel="personal" href="artwork/personal/big/4.png"
class="personal"><img src="artwork/personal/4.png" alt="4"
class="nopadding"/></a>
<a rel="personal" href="artwork/personal/big/5.png"
class="personal"><img src="artwork/personal/5.png" alt="5" /></a>

-----

What am i doing wrong? Am i missing something? Can anyone help?

Thanks a lot!

[Mathijs]

Nobody?

[Mathijs]

Seriously nobody? :s

On May 22, 10:22 am, Mathijs <mathijs.de...@gmail.com> wrote:
> Nobody?

[Kurisu]

I'm also having this problem. Hoping someone will know how to solve it.

[Kurisu]

Ok I solved this issue. When my ajax query returned and I inserted the
dynamically loaded content into the page I added this piece of code

$("a").fancybox();

[Mathijs]

Where should i add that exactly?

[Kurisu]

I would try adding it after this line

--------
$(this).fadeIn
(200);
--------

so it should be
--------
$(this).fadeIn
(200); $("a").fancybox();
--------

doing the same thing for both the previous and next sections.

[Mathijs]

Doesn't work :-( And it's very random.. Sometimes the overlay loads
but the image doesn't; sometimes nothing happens; sometimes the image
opens in a new window. Any other solutions?

[Kurisu]

Unfortunately I've ever used jquery before to load dynamic content
with ajax, I just created my own simple ajax call from scratch.
Perhaps looking at my code will help you out.

This is the function that handles when the ajax data has been fetched.

function handleStateChange() {
if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
var data
data = xmlHttp.responseText.split('~~~~');
if(data2[0] == "not found"){
alert('oh dear :o - ' + data[1]);
}else{
document.getElementById('projecttitle').innerHTML = data[0];
document.getElementById('projectdata').innerHTML = data[1];
document.getElementById('projectinfo').innerHTML = data[2];
$("a#thumbs").fancybox({
'zoomOpacity' : true,
'overlayShow' : false,
'zoomSpeedIn' : 500,
'zoomSpeedOut' : 500
});

}
}
}

[Mathijs]

Can't seem to fix it! Is it possible that i give you my code through e-
mail? I'd really like this fixed..

[Kurisu]

Sure, I'll certinately have a go at it.

email me: chris AT network-13 dot com

[Mathijs]

Thanks! Check your email :-)

[Vilz]

use "$.get" instead ".load()"

it's work
$.get(photos.html, function(data){
$(".photos").html(data);
$(".photos a").fancybox();
});

[hexid]

I am also having this same issue...

my site is located at hexid.co.cc
when i load the pictures tab and click on an image it takes me to the
jpg file...
but if i go to hexid.co.cc/pictures and click on the thumbnail there
then fancybox will load...
any clues how to bypass this??

my content loading script is:


$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
var href = $(this).attr('href');
if(hash==href.substr(0,href.length-5)){
var toLoad = hash+'.html #content';
$('#content').load(toLoad)
}
});

$('#nav li a').click(function(){

var toLoad = $(this).attr('href')+' #content';
$('#content').hide('fast',loadContent);
$('#load').remove();
$('#wrapper').append('<span id="load">LOADING...</span>');
$('#load').fadeIn('normal');
window.location.hash = $(this).attr('href').substr(0,$(this).attr
('href').length-4);
function loadContent() {
$('#content').load(toLoad,'',showNewContent())
}
function showNewContent() {
$('#content').show('normal',hideLoader());
}
function hideLoader() {
$('#load').fadeOut('normal');
}
return false;

});

});

[j.pitcher]

hexid,

the issue for you (educated guess) is the script to activate FB on
"gallery" classes:

$(document).ready(function() {
$("a.gallery").fancybox();
});

This gets applied when the *page* loads. But since you're loading
content via AJAX, those anchors aren't there to start with and thus
don't work.

You need to use some sort of callback function with your AJAX loading
to apply fancybox to the gallery links *after* the new content is
loaded in.

[sathish kumar palanisamy]

Hey fantastic. it works for me.. great help thank you