WowBook электронная книга для Ucoz


WowBook электронная книга для Ucoz

2291
7.4 из 10
Проголосовало: 3




  • Скачать с сервера
  • Скачать
  • Смотреть демо


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> -->



Вот и все приятного использование!
Автор публикации: Загрузка
Загрузка
renat99, это его n материал
Источник: http://codecanyon.net/ http://zthemes.3dn.ru/ Maguiar Redo...
  • Всего комментариев: 3

doc74
0
doc74 написал: Написано 10 Ноября 2013 в 20:35
Комментарий №3
Кому нужен архив с файлами вот: http://goo.gl/Iemez5
Не обессудьте что файл на моем сайте, скрыл ссылку как мог...

doc74
+3
doc74 написал: Написано 11 Марта 2012 в 23:05
Комментарий №2
Идея!
Вот то что мне нужно!!! cool
renat99 Спасибо!

jaguar37rus
+1
jaguar37rus написал: Написано 11 Марта 2012 в 20:40
Комментарий №1
[удалено]

jaguar37rusОтвет от Администрации:

устное, демо и так есть!


  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    203
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 1
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: