Legosp Forum

Shop-Script "Legosp" => Разработка => Тема начата: lugobor от Декабря 17, 2012, 02:52:52 am

Название: Эффект перелистывания страниц Shop-Script Lego 5
Отправлено: lugobor от Декабря 17, 2012, 02:52:52 am

Недавно клиенту устанавливал, вдруг кому еще пригодится...

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

Папку 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/ (http://dudkov.ua/info/primer-listaniya/)

[вложение удалено администратором]