1

我在创建的网站上遇到问题。

我想让用户可以点击一个按钮并打开一个 jquery.fancybox。到目前为止，一切都很好。但是，我想在那个花式框中有一个 jquery.booklet。以下是网站的链接： Booklet Fancybox

我几乎达到了我的目标，但是我有一个无论我尝试什么都无法解决的最后一个问题：fancybox 不会超出小册子的大小。无论我尝试过什么，我总是从花哨的盒子里拿出一点小册子，我需要向下滚动才能看到它。

这是我将“cat2.php”的内容放入fancybox的代码：

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<script type="text/javascript" src="javascript/fancybox/lib/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="javascript/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript" src="javascript/fancybox/source/jquery.fancybox.js?v=2.1.4"></script>
<link rel="stylesheet" type="text/css" href="javascript/fancybox/source/jquery.fancybox.css?v=2.1.4" media="screen" />
<link rel="stylesheet" type="text/css" href="javascript/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" />
<script type="text/javascript" src="javascript/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>
<link rel="stylesheet" type="text/css" href="javascript/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" />
<script type="text/javascript" src="javascript/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
<script type="text/javascript" src="javascript/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>

    <script type="text/javascript">     
            $(document).ready(function() {
            $('.fancybox').fancybox({
            'width':'100%',
            'height':'100%',
            'padding':0
            });
        });
</script>

<center>
     <a class="fancybox fancybox.iframe" id="test" href="catalogue_je/cat2.php"><img src="images/design/Cliquez_ici.jpg" /></a>
</center>

这是 cat2.php 中的代码（仅是一个示例）：

    <!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
        <link rel="icon" type="image/png" href="/images/design/favicon.png" />
        <title>Catalogue en ligne</title>
        <script src="booklet/jquery-1.7.2.min.js" type="text/javascript"></script>
        <script src="booklet/jquery-ui-1.8.21.min.js" type="text/javascript"></script>
        <script src="booklet/jquery.easing.1.3.js" type="text/javascript"></script>
        <script src="booklet/jquery.booklet.1.4.0.js" type="text/javascript"></script>
        <!--<link rel="stylesheet" href="style_catalogue.css" />-->
        <link href="booklet/jquery.booklet.1.4.0.css" type="text/css" rel="stylesheet" media="screen, projection, tv" />

        <script>

$(function() { 

 //single book 

 $('#mybook').booklet({
    'height':'100%'

 }); 

//multiple books with ID's 

 $('#mybook1, #mybook2').booklet(); 

//multiple books with a class 

$('.mycustombooks').booklet(); 

}); 

        </script>


    </head>
    <body>

<div id="mybook"> 
    <div>  
        <h3>Yay, Page 1!</h3> 
    </div> 
    <div>  
        <h3>Yay, Page 2!</h3> 
    </div> 
    <div>  
        <h3>Yay, Page 3!</h3> 
    </div> 
    <div>  
        <h3>Yay, Page 4!</h3> 
    </div> 
</div> 


    </body>
</html>

如果你们中的任何人对如何解决我的问题有任何想法，我会很乐意接受帮助。

提前致谢，

问候。

4

0 回答 0