Sign in

Зарегистрируйтесь, чтобы стать полноправным участником сообщества Masterpro.ws.

Booklet. И еще один jQuery plugin

Возможно, кого-либо заинтересует такой вот, согласитесь, довольно эффектный способ презентации контента на своем сайте?

 

Вам понадобится всего только jQuery plugin Booklet, который вы всегда можете скачать с сайта разработчика; ну и еще потребуется разместить на страничке сайта такой примерно код (варианты зависят уже только от вас и вашей фантазии):

 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.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.min.js" type="text/javascript"></script>
<link href="/booklet/jquery.booklet.1.4.0.css" type="text/css" rel="stylesheet" media="screen, projection, tv" />
<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>
$(function() {
$('#mybook').booklet({
auto: true,
delay: 2000
});
});
<!--[if lte IE 6]>
<script src="/DD_belatedPNG.js" type="text/javascript"></script>
<script type="text/javascript">
DD_belatedPNG.fix(".b-shadow-f, .b-shadow-b, .b-p0, .b-p3, .b-arrow-next div, .b-arrow-prev div");
</script>
<![endif]-->

 

Плагин довольно интересен; разраб предусмотрел для вас множество интересных фичей, посредством которых вы сможете добиться самых различных эффектов его работы. Подробнее, примеры кода и документация - на домашней странице проекта.

Оставить комментарий

Добавьте ваш комментарий