Недавно клиенту устанавливал, вдруг кому еще пригодится...
Из архива во вложении
Папку pages вместе с содержимым скопировать в корень сайта
jquery.min.js pcvector.js turn.js turn.min.js положить в
/core/js/ в
ваш_сайт/css/ваша_тема/stylesheet/stylesheet.css в самый низ добавить
/*Листание*/
#magazine{
margin:0 10%;
}
#magazine .turn-page{
background-color:#ccc;
background-size:100% 100%;
}
в
ваш_сайт/css/ваша_тема/theme/head.tpl.html перед тегом </head> добавить
<!--Листать страницы-->
<script type="text/javascript" src="./core/js/jquery.min.js"></script>
<script type="text/javascript" src="./core/js/turn.min.js"></script>
в
ваш_сайт/css/ваша_тема/theme/index.tpl.html перед тегом </body> добавить
{literal}<script type="text/javascript">
$('#magazine').bind('turned', function(e, page) {
console.log('Current view: ', $('#magazine').turn('view'));
})
$('#magazine').turn({width: 800, height: 568, acceleration: true, shadows: !$.isTouch});
</script>{/literal}
(тут можно изменить высоту и ширину контейнера)
В нужном вам месте "книжку" вывести кодом
<div id="magazine">
<div style="background-image:url(./pages/1.png);"></div>
<div style="background-image:url(./pages/2.png);"></div>
<div style="background-image:url(./pages/3.png);"></div>
<div style="background-image:url(./pages/4.png);"></div>
<div style="background-image:url(./pages/5.png);"></div>
<div style="background-image:url(./pages/6.png);"></div>
</div>
где url(./pages/1.png) - адрес вашей картинки, в данном случае - корень сайта, папка pages
пример
http://dudkov.ua/info/primer-listaniya/[вложение удалено администратором]