Question

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

我想让用户可以点击按钮并打开jquery.fancybox。到现在为止还挺好。但是，我想在fancybox里面有一个jquery.booklet。以下是网站的链接： Booklet Fancybox

我几乎达到了我的目标，但无论我尝试什么，我都有一个无法解决的最后一个问题：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>

这里是代码Inside 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>

如果你们中的任何人都知道如何解决我的问题，我会很乐意接受这个帮助。

提前致谢，

问候。

在jquery.fancybox中包含一个jquery.booklet - 滚动问题

0 个答案: