Автор Тема: Эффект перелистывания страниц Shop-Script Lego 5  (Прочитано 10969 раз)

Оффлайн lugobor

  • Пользователь
  • **
  • Сообщений: 83
    • Просмотр профиля
    • Студия web дизайна Lugobor
Недавно клиенту устанавливал, вдруг кому еще пригодится...

Из архива во вложении

Папку 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/

[вложение удалено администратором]
« Последнее редактирование: Декабря 17, 2012, 02:55:49 am от lugobor »
Студия web дизайна http://lugobor.ru