1

作成中の Web サイトで問題が発生しています。

ユーザーがボタンをクリックして jquery.fancybox を開くことができるようにしたいと思います。ここまでは順調ですね。ただし、そのファンシーボックス内に jquery.booklet を入れたいと思います。ウェブサイトへのリンクは次の とおり です。

ほぼ目標に到達しましたが、最終的に解決できない問題があります。ファンシーボックスが小冊子のサイズに伸びません。何をしようとしても、私はいつも小冊子を飾り箱から少し取り出しており、それを見るには下にスクロールする必要があります。

ファンシーボックス内に「cat2.php」のコンテンツを配置するコードは次のとおりです。

    <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