1

I am having an issue on a website I am creating.

I would like to give the user the possibility to click on a button and to have a jquery.fancybox opening. So far, so good. However, I would like to have a jquery.booklet Inside that fancybox. Here are the links to the websites : Booklet Fancybox

I have almost reached my aim, but I have a final issue I can't solve no matter what I try : the fancybox won't streach to the booklet size. What ever I tried, I always have a little bit of the booklet out of the fancybox, and I need to scroll down to see it.

Here is my code putting the content of "cat2.php" Inside the 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>

And here is the code Inside cat2.php (barely more than an example):

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

Should anyone of you have an idea on how to solve my issue, I would gladely accept the help.

Thanks in advance,

Regards.

Bloodrash
  • 11
  • 1
  • Check http://stackoverflow.com/a/10776520/1055987 and/or http://stackoverflow.com/a/12192258/1055987 if that helps, and try getting the dimensions from the `
    ` inside the cat2.php instead. Make sure both pages are under the same domain and test in a server environment rather than local.
     – JFK Mar 29 '13 at 18:16
  • 1
    Hello. I tried what you've suggested on a my domain. I changed my to , and inside my function calling the fancybox, i added the lines `code`(beforeShow: function(){ this.width = ($('.fancybox-iframe').contents().find('html').width())+50; this.height = ($('.fancybox-iframe').contents().find('html').height())+50; }) It did not have the desired effect. the .width() part is working though, I widden the fancybox, but I cannot make it taller, hence it still has a scrolling bar even if it only takes 2/3 of the page. – Bloodrash Mar 29 '13 at 21:33
  • 1
    of course, I changed the height in my so try and make it vary... – Bloodrash Mar 29 '13 at 22:10
  • I guess you should also need to add `fitToView: false` to your fancybox options – JFK Mar 30 '13 at 01:15
  • Hi. 'fitToView': false did the trick on my example! Thanks a lot. I'll try and adapt it to my needs now. – Bloodrash Mar 30 '13 at 14:45

0 Answers0