Показать сообщение отдельно
  #1 (permalink)  
Старый 03.09.2014, 23:22
Новичок на форуме
Отправить личное сообщение для smithana Посмотреть профиль Найти все сообщения от smithana
 
Регистрация: 03.09.2014
Сообщений: 1

реализовать turn.js
с 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>


Техподдержка молчит как партизан.
Подскажите пожалуйста как реализовать скрытие полочки книг и открытие самой книжки? В идеале такое же плавное открытие книги как у них. Или это не простая задача?
Также буду благодарен если подскажите аналогичные скрипты.
Спасибо!
Ответить с цитированием