Лого www.SiteHere.ru

Предварительный просмотр книги на jQuery — jQuery книга

Предварительный просмотр книги на jQuery

Любой медиафайл можно просматривать в онлайне: смотреть фильмы, слушать музыку, а также читать книги. По поводу последнего хотелось бы поговорить подробнее. Есть множество сайтов, которые предлагают читать книги в онлайне, но делают они это не в очень удобной форме. Конечно, тот способ, о котором я хочу рассказать сегодня, также не лишен минусов, но всё же он предлагает более удобный формат для чтения и предпросмотра книг, чем многие сайты. Не буду много писать, так как легче понять о чем идет речь — всего лишь один раз посмотрев пример. Так что смотрите пример и сами решайте — лучше этот способ чтения книги или нет.

Предварительный просмотр книги

Также есть раньше я рассматривал другой способ просмотра книг:

Что же это за такой способ просмотра книг? Смотрите пример:

Посмотреть примерСкачать

Для создания предварительного просмотра мы будем использовать jQuery плагин — BookBlock от Codrops.

Каждая книга находится в теге <figure>. И вот как расположены эти книги:

Расположение книг

Если вы нажмете по ссылке «Детали», появляется краткое описание книги, количество страниц в книге, а также дата добавления:

Детали книги

Если же вы кликнете по ссылке с текстом «Смотреть», тогда вы можете читать книгу во весь экран:

Просмотр книги во весь экран

Слева и справа находятся стрелки, с помощью можно перелистывать страницы книги:

Перелистывание книги

Если вы решите использовать этот плагин

Я не писал как установить этот плагин, потому что намного легче скачать архив с готовым решением (по ссылке «Скачать», которая находится выше) и посмотреть как там это реализовано, а потом сделать у себя по аналогии (подключить те же стили, скрипты, и разместить те же теги с классами и идентификаторами).

Вывод

Если у вас есть несколько книг и вы хотите их красиво и удобно оформить для пользователя — этот способ вам подойдет однозначно.

Успехов!

С Уважением, Юрий Немец

Источник: http://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/

Рейтинг статьи

Понравилась статья - расскажи друзьям! :)

1 комментарий к записи
  • ИЛЮШКА

    Интересно! Надо бы библиотеку офлайн сделать, а то шкаф забит))) Спасибо вам!

     

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *