Jquery Fancybox'；iframe'；在AJAX加载页面中_Jquery_Html_Css_Ajax_Jquery Ui

Jquery Fancybox'；iframe'；在AJAX加载页面中

jquery html css ajax jquery-ui

Jquery Fancybox'；iframe'；在AJAX加载页面中,jquery,html,css,ajax,jquery-ui,Jquery,Html,Css,Ajax,Jquery Ui,我已经看到了一些类似的帖子来解决我的问题，但是没有一篇能帮助我解决这个问题我有一个index.php，带有一个AJAX jQuery UI菜单，在单击时调用通过AJAX引入的.html文件在.html文件（4）中，我试图通过iFrame技术使用一个fancybox。单击初始主页（通过first.html显示）后，fancybox工作正常。但是，当您单击菜单上加载另一个.html页面的另一个按钮时，fancybox无法工作。当您导航回主页时，它在初始页面加载时工作，它就不再工作了我尝试过调试

我已经看到了一些类似的帖子来解决我的问题，但是没有一篇能帮助我解决这个问题

我有一个index.php，带有一个AJAX jQuery UI菜单，在单击时调用通过AJAX引入的.html文件

在.html文件（4）中，我试图通过iFrame技术使用一个fancybox。单击初始主页（通过first.html显示）后，fancybox工作正常。但是，当您单击菜单上加载另一个.html页面的另一个按钮时，fancybox无法工作。当您导航回主页时，它在初始页面加载时工作，它就不再工作了

我尝试过调试，将所有jQuery库调用以及相关的CSS和内联JS移到main index.php页面，然后网站崩溃了。然后我尝试在那里加载库，并尝试在每个名为.html的AJAX中使用内联JS进行初始化。然后又尝试了一些不同类型的调试，但仍然一无所获

有人知道我如何通过iFrame在AJAX加载页面中使用fancybox吗？

！1月9日更新，以下是我正在尝试的内容&仍然失败（请帮助！）：

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


$（文档）.ready（函数（）{
/*
*示例-各种
*/
$（'various7'）.load（toLoad'，showNewContent）；
$（“#various7”）.fancybox({
“宽度”：“95%”，
“高度”：95%，
“自动缩放”：false，
“transitionIn”：“无”，
“transitionOut”：“无”，
“type”：“iframe”
});
});

下面是完整的代码-----------

以下是我的index.php标记：

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


美国成长型开发公司
$（函数（）{
$（“#制表符”）。制表符({
ajaxOptions：{
错误：函数（xhr、状态、索引、锚定）{
$（anchor.hash）.html(
“无法加载此选项卡。我们将尝试尽快修复此问题。”+
“如果这不是演示的话。”）；
}
}
});
});
h1{字体系列：Georgia，常规；字体大小：30px；颜色：#8E4925；}
h2{字体系列：Georgia，常规；字体大小：20px；颜色：1000；行高：30px；}
p{字体系列：乔治亚，常规；字体大小：16px；颜色：1000；填充：4px；行距：25px；}
p、 buyhead{字体系列：Georgia，常规；字体大小：18px；颜色：000；填充：4px；行高：25px；字体重量：粗体；}
.ui选项卡.ui选项卡导航{
保证金：0；
}
.ui小部件头{
边框：1px实心#AAAAA；
颜色：#22222；
字体大小：粗体；
}
.ui选项卡.ui选项卡导航li{
边框底部：0无！重要；
浮动：左；
列表样式：无外无；
裕度：0.2米1px 0；
填充：0；
位置：相对位置；
空白：nowrap；
}
.ui状态活动，.ui小部件内容.ui状态活动，.ui小部件标题.ui状态活动{
背景：url（“选择状态”）重复-x滚动50%50%#FFFFFF；
边框：1px实心#AAAAA；
颜色：#212121；
字体大小：正常；
}
.ui选项卡.ui选项卡导航{
保证金：0；
填充：0；
}
.ui小部件头{
背景：无；
}
.ui状态默认值.ui小部件内容.ui状态默认值.ui小部件标题.ui状态默认值{
边框：0；}
.ui选项卡.ui选项卡导航li.ui-tabs-selected{
垫底：0px；
}
.ui小部件头{
边界：0；
}
.ui状态活动，.ui小部件内容.ui状态活动，.ui小部件标题.ui状态活动{
背景：无；
}
.ui状态默认值、.ui状态默认值、.ui小部件标题.ui状态默认值{
背景：无；
}
.ui选项卡.ui选项卡导航李a{
浮动：左；
填充物：0.5em 1.1em；
}
#导航示例，#选项卡{
背景：url（“http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif）无重复；
宽度：760px；
高度：42px；
填充：0；
衬垫顶部：-2px；
}
#导航示例li，#导航示例a{
高度：41px；
显示：块；
宽度：214px；
}
#导航示例李{
浮动：左；
列表样式：无；
显示：内联；
文本缩进：-9999em；
}
#nav-example-01{宽度：210px；}
#nav-example-02{宽度：210px；}
#nav-example-03{宽度：210px；}
#nav-example-01a:hover，a:active{background:url（“http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif）0px-50px不重复；}
#nav-example-02a:hover，a:active{background:url（“http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif“”-255px-50px不重复；}
#nav-example-03a:hover，a:active{background:url（“http://rh-dev.us.mytest.com/crown/features/AmericanGrown/imgs/nav.gif“”-500px-50px不重复；}

下面是我在每个AJAX.html页面中靠近开头的代码

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


$（文档）.ready（函数（）{
/*
*示例-各种
*/
$（“#various7”）.fancybox({
“宽度”：“95%”，
“高度”：95%，
“自动缩放”：false，
“transitionIn”：“无”，
“transitionOut”：“无”，
“type”：“iframe”
});
});

并呼吁采取行动：

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

有一个可用的项目，可能会对您有所帮助。

当您在加载Ajax的页面上用javascript调用fancybox命令时，问题可能与要成为fancybox的链接有关，该链接尚未创建

尝试在ajax callbac上调用.fancybox（）调用

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