View Full Version : Initiate fancybox on dynamically loaded content via AJAX

05-23-2009, 10:09 AM
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:
var $paginanummerpersonal = 0;
$("#nextpagepersonal").click(function() {
if($paginanummerpersonal==2) $paginanummerpersonal=0;
$paginanummerpersonal +".html", function(){
}) ;
$("#previouspagepersonal").click(function() {
if($paginanummerpersonal<0) $paginanummerpersonal=1;
$paginanummerpersonal +".html", function(){
}) ;

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"
<script type="text/javascript" src="http://www.mathijsdelva.be/Vault/
<script type="text/javascript" src="http://www.mathijsdelva.be/Vault/
<script type="text/javascript">
$(document).ready(function() {
'hideOnContentClick': false,
'zoomSpeedIn': 0,
'zoomSpeedOut': 0,
'overlayShow': true

<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"
<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"
<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!

05-24-2009, 07:27 AM