Link to home
Start Free TrialLog in
Avatar of mrsports
mrsports

asked on

Fancybox Issue

I have built a page that has many custom fancyboxes on it.  They all work perfectly.  I reference all of them by class.  For example:

$("a.accessory16").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 630, 'frameHeight':550, 'overlayShow': false });

I have a page on the website that displays our designs.  The designs are broken into 3 pages.  When the page first loads, page 1 displays perfectly and all fancyboxes work.  However, when you click page 2, it through ajax dynamically updates the display with the new page 2 designs.  All of the new page 2 code has the EXACT same references to the classes etc. yet after page2 loads, the same classes for fancybox don't work and it lauches the links without the fancybox.  I have confirmed that the code from page references the classes exactly the same.  

So, my question is when you are dynamically pulling in content that has fancybox calls in it, and the javascript for the fancy box already exists on the page, what would cause the fancyboxes to no longer work?



This is a sample link:

<a class="iframe accessory16" href="accessories.cfm?id=16"><img src="../../images/theme/icon-accessories.gif" border="0" /></a>

The javascript code:

<script type="text/javascript">	 
$(document).ready(function() {

$(".color26").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 700, 'frameHeight': 725, 'overlayShow': false });
$(".font26").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 720, 'frameHeight': 775, 'overlayShow': false });
$(".customize26").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 522, 'frameHeight': 615, 'overlayShow': false });
$(".customphoto26").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 525, 'frameHeight': 500, 'overlayShow': false });


$(".selecttheme26").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });




$(".color16").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 715, 'frameHeight': 820, 'overlayShow': false });
$(".customize16").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 541, 'frameHeight': 627, 'overlayShow': false });
$(".maring16").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 538, 'frameHeight': 500, 'overlayShow': false });


$(".selecttheme16").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });




$(".color18").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 700, 'frameHeight': 900, 'overlayShow': false });
$(".customize18").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 525, 'frameHeight': 627, 'overlayShow': false });
$(".customphoto18").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 525, 'frameHeight': 500, 'overlayShow': false });


$(".selecttheme18").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });




$(".color14").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 700, 'frameHeight': 770, 'overlayShow': false });
$(".customize14").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 538, 'frameHeight': 627, 'overlayShow': false });
$(".customphoto14").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 525, 'frameHeight': 500, 'overlayShow': false });
$(".maring14").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 538, 'frameHeight': 627, 'overlayShow': false });


$(".selecttheme14").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });




$(".color27").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 700, 'frameHeight': 690, 'overlayShow': false });
$(".font27").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 700, 'frameHeight': 775, 'overlayShow': false });
$(".customize27").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 538, 'frameHeight': 627, 'overlayShow': false });
$(".customphoto27").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 525, 'frameHeight': 500, 'overlayShow': false });


$(".selecttheme27").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });




$(".color15").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 700, 'frameHeight': 700, 'overlayShow': false });


$(".selecttheme15").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });




$(".color25").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 700, 'frameHeight': 770, 'overlayShow': false });
$(".customize25").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 540, 'frameHeight': 575, 'overlayShow': false });
$(".customphoto25").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 525, 'frameHeight': 350, 'overlayShow': false });


$(".selecttheme25").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });




$(".color17").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 700, 'frameHeight': 800, 'overlayShow': false });
$(".customize17").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 522, 'frameHeight':608, 'overlayShow': false });
$(".customphoto17").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 525, 'frameHeight': 360, 'overlayShow': false });


$(".selecttheme17").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });





$(".selecttheme3").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });




$(".customize12").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 522, 'frameHeight':488, 'overlayShow': false });


$(".selecttheme12").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });




$(".customize24").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 540, 'frameHeight':627, 'overlayShow': false });


$(".selecttheme24").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });




$(".color21").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 700, 'frameHeight': 800, 'overlayShow': false });


$(".selecttheme21").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });





$(".selecttheme13").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });





$(".selecttheme20").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });




$(".customize6").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 522, 'frameHeight':410, 'overlayShow': false });


$(".selecttheme6").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });




$(".customize23").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 522, 'frameHeight':482, 'overlayShow': false });


$(".selecttheme23").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });





$(".selecttheme22").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });




$(".customize8").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 522, 'frameHeight':410, 'overlayShow': false });


$(".selecttheme8").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });





$(".selecttheme7").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });





$(".selecttheme1").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });





$(".selecttheme9").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });





$(".selecttheme5").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });





$(".selecttheme19").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });





$(".selecttheme4").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });





$(".selecttheme2").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 550, 'frameHeight': 400, 'overlayShow': false });



$(".accessory12").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 630, 'frameHeight':550, 'overlayShow': false });

$(".accessory14").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 630, 'frameHeight':550, 'overlayShow': false });

$(".accessory15").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 630, 'frameHeight':550, 'overlayShow': false });

$(".accessory16").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 630, 'frameHeight':550, 'overlayShow': false });

$(".accessory17").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 630, 'frameHeight':550, 'overlayShow': false });

$(".accessory18").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 630, 'frameHeight':550, 'overlayShow': false });

$(".accessory20").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 630, 'frameHeight':550, 'overlayShow': false });

$(".accessory24").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 630, 'frameHeight':550, 'overlayShow': false });

$(".accessory25").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 630, 'frameHeight':550, 'overlayShow': false });

$(".themeoverview").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 630, 'frameHeight':565, 'overlayShow': false });
});
</script>

Open in new window

Avatar of amit_g
amit_g
Flag of United States of America image

The problem is most likely not in the fancybox but in the rendered code for the page 2 via AJAX.
ASKER CERTIFIED SOLUTION
Avatar of Albert Van Halen
Albert Van Halen
Flag of Netherlands image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial