с js на вы, но уж подкинули задачку и хочется разобраться.
Есть такой замечательный модуль для просмотра книжек:
http://turnjs.com/
пример у меня получилось реализовать. Странички отображаются и замечательно перелистываются.
Загвоздка в реализации аналогичной полочки книг, как у них на главной странице.
На данный момент полочка реализована вот так:
<div style="background: url('turn_js/wall-bookshelf.png') no-repeat scroll left bottom; height: 305px;">
<div style="float: left; padding: 0 10px 0 60px;"><a href="turn_js/index.html"><img src="turn_js/1.jpg" border="0" /></a></div>
<div><a href="turn_js/index.html"><img src="turn_js/2.jpg" border="0" /></a></div>
</div>
в index.html соответственно их пример:
<style type="text/css">
#magazine{
margin:0 10%;
}
#magazine .turn-page{
background-color:#ccc;
background-size:100% 100%;
}
</style>
<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>
<script type="text/javascript">
function test() {
$('#magazine').turn({
width: 1152,
height: 752,
autoCenter: true});
}
</script>
Техподдержка молчит как партизан.
Подскажите пожалуйста как реализовать скрытие полочки книг и открытие самой книжки? В идеале такое же плавное открытие книги как у них. Или это не простая задача?
Также буду благодарен если подскажите аналогичные скрипты.
Спасибо!
