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").fancybo x({ '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?
$("a.accessory16").fancybo
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>
The problem is most likely not in the fancybox but in the rendered code for the page 2 via AJAX.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.