WowBook является JQuery плагин, который позволяет создавать Интернет-издания (например, книги или журнала) Создатель Maguiar,Redo
Особенности:
*.Два реалистичные эффекты переключения страниц, по одной на твердом переплете и других регулярных листов бумаги. *.Поддерживает все основные браузеры (резервный для IE7 и IE8) *.Прост в использовании: создать содержание с помощью HTML и CSS. *.Ссылки работают, как ожидалось: создать ссылку на страницу или элемент в книге, а книга покажет соответствующую страницу зум *.Слайд-шоу *.клавиатуры (конфигурируемый) *.Колесико мыши навигации (конфигурируемый) *Автоматической нумерации страниц
Демо
Установка
Скачиваем файлы. Загружаем файлы в файловый менеджер.
И вставляем этот код в конструктор, или отделённую страницу сайта.
Code <!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="en" class="no-js ie7"> <![endif]--> <!--[if IE 8 ]> <html lang="en" class="no-js ie8"> <![endif]--> <!--[if IE 9 ]> <html lang="en" class="no-js ie9"> <![endif]--> <!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]--> <head> <meta charset="utf-8"> <style> .js #features { margin-left: -12000px; width: 100%; } </style> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<!-- CSS : implied media="all" --> <link rel="stylesheet" href="http://3.s3.envato.com/files/20765626/css/style.css?v=2"> <link rel="stylesheet" href="/css/wow_book.css" type="text/css" /> <link rel="stylesheet" type="text/css" href="/css/preview.css"> <script src="/js/less-1.0.41.min.js" type="text/javascript"></script>
</head> <body> <div id="container"> <nav> <ul> <li><a id='first' href="#" title='Назад на 2 листа' >Назад на 2 листа</a></li> <li><a id='back' href="#" title='Назад' >Назад</a></li> <li><a id='next' href="#" title='Вперед'>Вперед</a></li> <li><a id='last' href="#" title='Вперед на 2 странице' >Вперед на 2 странице</a></li> <li><a id='zoomin' href="#" title='Приблизить' >Приблизить</a></li> <li><a id='zoomout' href="#" title='Уменьшить' >Уменьшить</a></li> <li><a id='slideshow' href="#" title='Авто перелистывание' > Авто перелистывание </a></li> </ul> </nav>
<div id="main"> <img id='click_to_open' src="/images/click_to_open.png" alt='click to open' /> <div id='features'> <div id='cover'> </div>
<div class='feature pagefx hardpage'> <p class='subtitle'>Листать страницы эффективно</p> <h1>Легко и проста</h1> <p>Этот эффект переворачивает страницу, как в твердом переплете.</p> <p> Вы можете сделать свою страницу...книгу </p> <br/><br/> <h1>Основное!</h1> <p>В одном модуле используется разные скрипты.</p> <p>Так как он не использует CSS преобразований, он используется на странице со вспышкой или в качестве запасного варианта на старых браузерах.</p> </div> <div class='feature pagefx softpage'> <p class='subtitle'>Покадрового эффекта</p> <h1>Softpage</h1> <p> Этот эффект Softpages складки, как обычный лист бумаги. </p> <p> Перетащите край страницы и посмотреть, как она складывается хорошо. </p> </div>
<div class='feature easy'> <h1>EASY</h1> <p> Create your content with the skills and tools you already know, like HTML, Javascript and CSS. </p> </div> <div class='feature easy'> <div class='doc js'>{js}</div> <div class='doc html'><html></div> <div class='doc css'>CSS</div> </div>
<div class='feature design'> <h1>DESIGN</h1> <div class='subtitle'>так, как вы привыкли</div> </div> <div class='feature design'> <p> Пусть книга вписывается в дизайн вашего сайта, а не наоборот. </p> </div>
<div id='zoom-feature' class='feature'> <h1>Увеличить</h1> </div> <div id='zoom-feature2' class='feature'> <p>Функция масштабирования позволяет пользователям увеличивать содержание в восхищаются все минимумом деталей.</p> <p>Настраиваемый, несколько уровней масштабирования.</p> <p>Дизайн среды: контролировать размер и положение книги при увеличении масштаба.</p> </div>
<div class='deeplinking feature'> <h1>Глубокая связь</h1> <p> Создать ссылку на любой странице, и они будут работать, как ожидается, как и <a href='http://zthemes.3dn.ru/' target="_blank" >этого</a> (открывается в новом окне). </p> <p> wowBook ??обновления адресной строке браузера, чтобы указать на текущей странице, что позволяет пользователю закладки, что он видит и вернуться позже. </p> </div> <div class='deeplinking feature'> <h1>Задняя опора кнопку</h1> <p> wowBook ??не нарушает кнопку назад вашего браузера. </p> <p style="text-align: center"> <img src="/images/back.png" /> </p> </div> <div class='feature numbering'> <h1>Автоматическая нумерация страниц</h1> <p> Нумерация страниц вашей книги скучно , Особенно в процессе разработки. Давайте wowBook ??сделает это за вас. </p> <p> Выберите, где начинаются и где заканчивается. </p> <p> Настроить внешний вид и положение с помощью CSS. </p> </div> <div class='feature slideshow'> <h1>Слайд-шоу</h1> <p>Поверните вашу книгу в режиме слайд-шоу.</p> <p>Вы можете выбрать, если вы хотите паузу при наведении курсора мыши тоже.</p> <a href='http://mediadesign.deviantart.com'><img src='/images/projector.png' alt='projector' /></a> </div>
<div class='feature flash'> <h1>FLASH</h1> <p>Это можно использовать флэш в ваших книгах, но вы будете ограничены в "основной эффект переворота" на странице, которые имеют объект вспышкой (и только на этой странице).</p> <p>В настоящее время большинство браузеров не поддерживают и CSS преобразования используется wowbook применительно к объекту флэш-памяти.</p> </div> <div class='feature wowbook-basic-page flash-demo'> <object width="350" height="180" type="application/x-shockwave-flash" data="http://3.s3.envato.com/files/18725871/preview.swf" id="large_item_preview_container"> <param name="base" value="http://3.s3.envato.com/files/18725871/"> <param name="wmode" value="opaque"> </object> </div>
<div class='feature more'> <h1>and MORE</h1> </div> <div class='feature more'> <ul> <li>поддержка браузеров : <img src='/images/browser_logos-32.png' alt='browser logos'/></li> <li>навигация с помощью клавиатуры</li> <li>Колесико навигации / зумом</li> <li>Играть переворота звук</li> <li>документация</li> <li>исходный код</li> <li>Примеры</li> <li>Богатые API</li> </ul> </div>
</div> <!-- features -->
</div> <footer>
</footer> </div> <!--! end of #container --> </div>
<script type="text/javascript" src="http://3.s3.envato.com/files/20765626/./js/libs/jquery-1.7.1.min.js"></script> <sscript src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></sscript> <script>// !window.jQuery && document.write(unescape('%3Cscript src="http://3.s3.envato.com/files/20765626/js/libs/jquery-1.7.1.min.js"%3E%3C/script%3E'))</script> <script type="text/javascript" src="http://3.s3.envato.com/files/20765626/./wow_book/wow_book.min.js"></script> <style>
</style> <script type="text/javascript"> $(document).ready(function() { $('#features').wowBook({ height : 500 ,width : 800 ,centeredWhenClosed : true ,hardcovers : true ,turnPageDuration : 1000 ,numberedPages : [1,-2] ,transparentPages : true ,controls : { zoomIn : '#zoomin', zoomOut : '#zoomout', next : '#next', back : '#back', first : '#first', last : '#last', slideShow : '#slideshow' }, }).css({'display':'none', 'margin':'auto'}).fadeIn(1000);
$("#cover").click(function(){ $.wowBook("#features").advance(); }); }); </script>
<!-- scripts concatenated and minified via ant build script--> <script src="http://3.s3.envato.com/files/20765626/js/plugins.js"></script> <script src="http://3.s3.envato.com/files/20765626/js/script.js"></script> <!-- end concatenated and minified scripts-->
<!--[if lt IE 7 ]> <script src="/js/dd_belatedpng.js"></script> <script> DD_belatedPNG.fix('img, .png_bg'); //fix any <img> or .png_bg background-images </script> <![endif]-->
<!-- <footer> --> <br/> <table border="0" cellpadding="4" cellspacing="0" width="100%" style="border:1px solid #A9B8C2;"> <tr><td align="center" style="background:#F4F4F4;">[COPYRIGHT]</td></tr> <tr><td align="center" style="background:#F4F4F4;">$POWERED_BY$</td></tr> </table> <!-- </footer> -->
</body> </html>
<!-- <popup> --> <table border="0" cellpadding="2" cellspacing="1" style="background:#A9B8C2;" width="100%"> <tr><td style="background:#D4DFF7;" align="center"><b>[TITLE]</b></td></tr> <tr><td align="center" style="background:#F4F4F4;padding:5px;">[BODY]</td></tr> </table> <!-- </popup> -->
|