Включение jquery.booklet в jquery.fancybox - проблемы с прокруткой
У меня проблема с сайтом, который я создаю.
Я хотел бы дать пользователю возможность нажать на кнопку и открыть jquery.fancybox. Все идет нормально. Тем не менее, я хотел бы иметь jquery.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>
Если у кого-нибудь из вас есть идея, как решить мою проблему, я с радостью приму помощь.
Заранее спасибо,
С уважением.