?
Solved

Fancybox Issue

Posted on 2009-12-30
2
Medium Priority
?
343 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:mrsports
2 Comments
 
LVL 58

Expert Comment

by:amit_g
ID: 26148538
The problem is most likely not in the fancybox but in the rendered code for the page 2 via AJAX.
0
 
LVL 19

Accepted Solution

by:
Albert Van Halen earned 2000 total points
ID: 26193941
The code is correct, however the fancyboxes are being created while loading the document.
This works in page 1, which is probably the landing page, and when that page is completely rendered document.ready kicks in.
Page 2 is being retreived via AJAX methods and content in your first page is being replaced.
document.ready will NEVER kick in...
However, jQuery 'parses' script tags which are in the content loaded via ajax, so you need to create methods which will create the fancy boxes which will be available.

In the callback of your ajax call you can call that method.

See code below

This should work, if not let me know...


<script type="text/javascript">
function createFancyBoxes() {
  $(".color26").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 700, 'frameHeight': 725, 'overlayShow': false });
  $(".font26").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'frameWidth': 720, 'frameHeight': 775, 'overlayShow': false });
  // etc
}

$(document).ready(createFancyBoxes);
</script>

// When retrieving page 2 via ajax use the success callback and execute the createFancyBoxes method
$.ajax({
  url: "page2.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
    createFancyBoxes();
  }
});

Open in new window

0

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Custom Android App Development is the need of an hour for several businesses. If you go through the right firm for Android Application Development, it can make a huge difference to the ways in which customers interact with your business.
Before you approach an Ionic Mobile App development company for developing mobile apps using the ionic framework, you must know why you should choose the framework. Let's try to understand that through this article.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Suggested Courses
Course of the Month4 days, 21 hours left to enroll

601 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question