I’ve seen a few similar posts to my problem, but none that have helped

Question

0

Editorial Team

Asked: May 28, 20262026-05-28T03:08:16+00:00 2026-05-28T03:08:16+00:00

I’ve seen a few similar posts to my problem, but none that have helped

0

I’ve seen a few similar posts to my problem, but none that have helped me solve it yet.

I have an index.php with a AJAX jQuery UI menu calling .html files brought in via AJAX when clicked.

Within the .html files (4) I’m trying to use one fancybox via the iFrame technique. Once it’s clicked on the initial homepage (displayed through first .html) the fancybox works fine. But when you click to another button on the menu that loads another .html page, the fancybox does not work. And after when you navigate back the home page where it worked on initial page load, it doesn’t work again.

I’ve tried debugging by moving all the jQuery libraries calls and related CSS and inline JS to the main index.php page, the site then broke. Then I tried just loading the libraries there and trying to initiate with the inline JS in each individual AJAX called .html. Then tried a few more variations of these types of debugging and still nothing.

Does anyone know how I can use fancybox via iFrame within AJAX loaded pages?

! UPDATE JAN 9, here’s what I’m trying now & still failing (please help!):

<script type="text/javascript">
    $(document).ready(function() {
        /*
         *   Examples - various
         */
        $('#various7').load(toLoad,'',showNewContent);

        $("#various7").fancybox({
            'width'                         : '95%',
            'height'                        : '95%',
            'autoScale'                     : false,
            'transitionIn'                  : 'none',
            'transitionOut'                 : 'none',
            'type'                          : 'iframe'
        });

    });
</script>

Below is full code ———–

Here’s my index.php markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>American Grown - in dev</title>

    <link rel="stylesheet" type="text/css" href="http://rh-dev.us.mytest.com/crown/features/css/mainstyles.css">
    <link rel="stylesheet" href="css/jquery.ui.all.css">

    <script src="http://jqueryui.com/jquery-1.6.2.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.core.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.widget.js"></script>
    <script src="http://jqueryui.com/ui/jquery.ui.tabs.js"></script>


<!--[if lte IE 7]>
<meta http-equiv="refresh" content="0; url=http://rh-dev.us.mytest.com/crown/features/AmericanGrown/indexie.html" />
<script type="text/javascript">
/* <![CDATA[ */
window.top.location = 'http://rh-dev.us.mytest.com/crown/features/AmericanGrown/indexie.html';
/* ]]> */
</script>
<![endif]-->

    <script>
    $(function() {
        $( "#tabs" ).tabs({
            ajaxOptions: {
                error: function( xhr, status, index, anchor ) {
                    $( anchor.hash ).html(
                        "Couldn't load this tab. We'll try to fix this as soon as possible. " +
                        "If this wouldn't be a demo." );
                }
            }
        });
    });
    </script>

<style>

<!--Inline Styles to override UI theme-->

h1 { font-family: Georgia, Regular; font-size: 30px; color: #8E4925; }
h2 { font-family: Georgia, Regular; font-size: 20px; color: #000; line-height: 30px;}
p { font-family: Georgia, Regular; font-size: 16px; color: #000; padding: 4px; line-height: 25px;}

p.buyhead { font-family: Georgia, Regular; font-size: 18px; color: #000; padding: 4px; line-height: 25px; font-weight: bold;}

.ui-tabs .ui-tabs-nav {
margin:0;
}

.ui-widget-header {
border:1px solid #AAAAAA;
color:#222222;
font-weight:bold;
}

.ui-tabs .ui-tabs-nav li {
border-bottom:0 none !important;
float:left;
list-style:none outside none;
margin:0 2.2em 1px 0;
padding:0;
position:relative;
white-space:nowrap;
}


.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background:url("select state") repeat-x scroll 50% 50% #FFFFFF;
border:1px solid #AAAAAA;
color:#212121;
font-weight:normal;
}

.ui-tabs .ui-tabs-nav {
margin:0;
padding:0;
}

.ui-widget-header {
background: none;
}


.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 0; }

.ui-tabs .ui-tabs-nav li.ui-tabs-selected {
    padding-bottom: 0px;
}

.ui-widget-header {
    border: 0;
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background: none;
}

.ui-state-default, .ui-state-default, .ui-widget-header .ui-state-default {
background: none;
}

.ui-tabs .ui-tabs-nav li a {
    float: left;
    padding: 0.5em 1.1em;
}

<!--Using CSS sprites-->

#nav-example, #tabs {
    background:url("http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif") no-repeat;
    width: 760px;
    height: 42px;
    padding: 0;
    padding-top: -2px;
}

#nav-example li, #nav-example a {
    height: 41px;
    display: block;
    width:214px;
}

#nav-example li {
    float: left;
    list-style: none;
    display: inline;
    text-indent: -9999em;
}

#nav-example-01 { width: 210px; }
#nav-example-02 { width: 210px; }
#nav-example-03 { width: 210px; }

#nav-example-01 a:hover, a:active { background:url("http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif") 0px -50px no-repeat; }
#nav-example-02 a:hover, a:active  { background:url("http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif") -255px -50px no-repeat; }
#nav-example-03 a:hover, a:active  { background:url("http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif") -500px -50px no-repeat; }

<!--End Inline Styles to override UI theme-->

</style>

</head>

<body style="background-color: #FFFDEF;">

<div id="pagewrap" style=" background-color: #fff; width:800px; height: 1200px; margin: 0 auto; border-right: 1px solid #cccc99 ;border-left: 1px solid #cccc99;">

<div id="headerbox">

<center><img src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/Header.gif" style="padding:40px;" border="0"></center>

</div>

<div class="demo" style="margin-left: 18px; margin-top: -16px;">

<div id="tabs" style="border-top:1px solid #CCCC99; border-bottom: 1px solid #CCCC99; border-right:0px; border-left:0px; height: 48px;"> 
    <ul id="nav-example">
        <li id="nav-example-01"><a class="item1" href="ajax/content1.html">About the Book</a></li>
        <li id="nav-example-02"><a class="item2" href="ajax/content2.html">Join us on Facebook</a></li>
        <li id="nav-example-03"><a class="item3" href="ajax/content3.html">Get email Updates</a></li>
    </ul>
    <div id="tabs-1">

    </div>
</div>
</div>
</div>

</body>
</html>

Here’s the code I have near the initial head in each AJAX .html page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

<script type="text/javascript" src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.mousewheel-3.0.4.pack.js">
</script>
<script type="text/javascript" src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.fancybox-1.3.4.pack.js">
</script>

<link rel="stylesheet" type="text/css" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/fancybox/jquery.fancybox-1.3.4.css" media="screen">


    <!--JS for Fancybox iFrame buybtn-->

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

                          $("#various7").fancybox({
                                'width'                         : '95%',
                                'height'                        : '95%',
                                'autoScale'                     : false,
                                'transitionIn'          : 'none',
                                'transitionOut'         : 'none',
                                'type'                          : 'iframe'
                        });

                });
</script>

<!--End JS for Fancybox iFrame buybtn-->

And calling to action with:

<a id="various7" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/iframe/buybutton.html" name="various7"><img src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/buythebook_btn.png" style="margin-top:-50px;"
" border="0"></a>

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-05-28T03:08:16+00:00

This happens because the fancybox will not initiate when the ajax call is triggered.

Try moving the fancybox code in each AJAX .html page after the “a” tag which calls the fancybox.

Try something similar to this.

<a id="various7" href="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/iframe/buybutton.html" name="various7"><img src="http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/buythebook_btn.png" style="margin-top:-50px;" border="0"></a>
<script type="text/javascript">
$(document).ready(function() {
                      $("#various7").fancybox({
                            'width'                         : '95%',
                            'height'                        : '95%',
                            'autoScale'                     : false,
                            'transitionIn'          : 'none',
                            'transitionOut'         : 'none',
                            'type'                          : 'iframe'
                    });

            });
</script>

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I’ve seen a few similar posts to my problem, but none that have helped

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply