Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   реализовать turn.js (https://javascript.ru/forum/dom-window/49928-realizovat-turn-js.html)

smithana 03.09.2014 23:22

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


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

nesfiraty 04.09.2014 10:37

не могу точно сказать не пинай ногами сам сравнительно недавно ковыряю js. в общем я бы попробовал создать такую же структуру html как у них в примере + ковырять скрипт придется скорее всего эта структура выплывает из скрипта... тогда возможно есть какой то элемент которому задается класс и скрипт при его обнаружении генерирует такую структуру. в общем надо ковыряться))

nesfiraty 04.09.2014 10:43

не знаю насколько это будет эффективно но попробуй через F12 поковырять книжную полочку и скрипт глядишь наступит просветление))


Часовой пояс GMT +3, время: 05:07.