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

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

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

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

• Полноэкранная книга с помощью jQuery и CSS3

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

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

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

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

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

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

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

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

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

Вывод

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

Успехов!

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

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