Skip to content

Instantly share code, notes, and snippets.

@matbrgz

matbrgz/book-viewer.markdown

Created June 24, 2018 06:25
Show Gist options
  • Save matbrgz/fa06e51d47fb0daeff38fae4a1b891ac to your computer and use it in GitHub Desktop.
Save matbrgz/fa06e51d47fb0daeff38fae4a1b891ac to your computer and use it in GitHub Desktop.
Download ZIP
Book Viewer
Raw
book-viewer.markdown

Book Viewer

Weekend Project. I wanted to build a book viewer that was browsable, searchable and show details of each individual books.

A Pen by Joe on CodePen.

License.

Raw
index.html
<div id="main-container" class="main-container nav-effect-1">
<nav class="nav-menu nav-effect-1" id="menu-1">
<h2 class="">The Library</h2>
<ul>
<li><a class="" href="#">Checkout</a></li>
<li><a class="" href="#">Return</a></li>
<li><a class="" href="#">About</a></li>
<li><a class="" href="#">Contact</a></li>
</ul>
</nav>
<div class="main clearfix">
<!-- Header Content -->
<header id="header" class="page-header">
<div class="page-header-container row">
<!-- Logo -->
<div class="main-logo">
<a href="#" class="logo">The Library</a>
</div>
<div class="menu-search">
<!-- Main Navigation -->
<div class="main-navigation">
<a href="#">Menu</a>
</div>
<!-- Search -->
<div class="catalog-search">
<input class="shuffle-search input_field " type="search" autocomplete="off" value="" maxlength="128" id="input-search" />
<label class="input_label" for="input-search">
<span class="input_label-content">Search Library</span>
<span class="input_label-search"></span>
</label>
</div>
</div>
</div>
</header>
<!-- Main Section -->
<div class="page-container">
<div class="page-title category-title">
<!-- <h1>Book Viewer</h1> -->
</div>
<section id="book_list">
<div class="toolbar row">
<div class="filter-options small-12 medium-9 columns">
<a href="#" class="filter-item active" data-group="all">All Categories</a>
<a href="#" class="filter-item" data-group="fantasy">Fantasy</a>
<a href="#" class="filter-item" data-group="sci-fi">Sci-Fi</a>
<a href="#" class="filter-item" data-group="classic">Classics</a>
<a href="#" class="filter-item" data-group="fairy">Fairy Tale</a>
<a href="#" class="filter-item" data-group="young">Young Adult</a>
</div>
<div class="small-12 medium-3 columns">
<select class="sort-options">
<option value="" disabled selected>Sort by</option>
<option value="" >Featured</option>
<option value="title">Alphabetical</option>
<option value="date-created">Published</option>
</select>
</div>
</div>
<div class="grid-shuffle">
<ul id="grid" class="row">
<li class="book-item small-12 medium-6 columns" data-groups='["classic"]' data-date-created='1937' data-title='Of Mice and Men' data-color='#fcc278'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_1-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Of Mice and Men</h3>
<p class="author">by John Steinbeck &bull; 1937</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_1-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Of Mice and Men</h2>
<p class="author">by John Steinbeck</p>
<p class="published">1937</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic","young"]' data-date-created='1951' data-title='The Catcher in the Rye' data-color='#009c8b'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_2-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">The Catcher in the Rye</h3>
<p class="author">by J.D. Salinger &bull; 1951</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_2-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">The Catcher in the Rye</h2>
<p class="author">by J.D. Salinger</p>
<p class="published">1951</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic","sci-fi"]' data-date-created='1949' data-title='1984' data-color='#9c9688'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_3-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">1984</h3>
<p class="author">by George Orwell &bull; 1949</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_3-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">1984</h2>
<p class="author">by George Orwell</p>
<p class="published">1949</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic","young"]' data-date-created='1954' data-title='Lord of the Flies' data-color='#db2e0f'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_4-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Lord of the Flies</h3>
<p class="author">by William Golding &bull; 1954</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_4-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Lord of the Flies</h2>
<p class="author">by William Golding</p>
<p class="published">1954</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic"]' data-date-created='1925' data-title='The Great Gatsby' data-color='#e3b005'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_5-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">The Great Gatsby</h3>
<p class="author">by F. Scott Fitzgerald &bull; 1925</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_5-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">The Great Gatsby</h2>
<p class="author">by F. Scott Fitzgerald</p>
<p class="published">1925</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic"]' data-date-created='1851' data-title='Moby Dick' data-color='#a9afad'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_6-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Moby Dick</h3>
<p class="author">by Herman Melville &bull; 1851</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_6-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Moby Dick</h2>
<p class="author">by Herman Melville</p>
<p class="published">1851</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic","sci-fi"]' data-date-created='1962' data-title='A Clockwork Orange' data-color='#fe7b21'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_7-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">A Clockwork Orange</h3>
<p class="author">by Anthony Burgess &bull; 1962</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_7-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">A Clockwork Orange</h2>
<p class="author">by Anthony Burgess</p>
<p class="published">1962</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic","fairy"]' data-date-created='1835' data-title='The Princess and the Pea' data-color='#aea98c'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_8-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">The Princess and the Pea</h3>
<p class="author">by Hans Christian Andersen &bull; 1835</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_8-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">The Princess and the Pea</h2>
<p class="author">by Hans Christian Andersen</p>
<p class="published">1835</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic","fairy"]' data-date-created='1900' data-title='The Wonderful Wizard of Oz' data-color='#705e1e'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_9-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">The Wonderful Wizard of Oz</h3>
<p class="author">by L. Frank Baum &bull; 1900</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_9-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">The Wonderful Wizard of Oz</h2>
<p class="author">by L. Frank Baum</p>
<p class="published">1900</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic","fairy"]' data-date-created='1934' data-title='Mary Poppins' data-color='#939894'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_10-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Mary Poppins</h3>
<p class="author">by P.L. Travers &bull; 1934</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_10-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Mary Poppins</h2>
<p class="author">by P.L. Travers</p>
<p class="published">1934</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic","fairy"]' data-date-created='1740' data-title='Beauty and the Beast' data-color='#b4aa91'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_11-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Beauty and the Beast</h3>
<p class="author">by Gabrielle-Suzanne Barbot de Villeneuve &bull; 1740</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_11-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Beauty and the Beast</h2>
<p class="author">by Gabrielle-Suzanne Barbot de Villeneuve</p>
<p class="published">1740</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["classic","fairy"]' data-date-created='1812' data-title='Rapunzel' data-color='#725d64'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_12-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Rapunzel</h3>
<p class="author">by Friedrich Schulz &bull; 1812</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_12-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Rapunzel</h2>
<p class="author">by Friedrich Schulz</p>
<p class="published">1812</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["fantasy","young"]' data-date-created='1997' data-title="Harry Potter and the Sorcerer's Stone" data-color='#7a4930'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_13-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Harry Potter and the Sorcerer's Stone</h3>
<p class="author">by J.K. Rowling &bull; 1997</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_13-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Harry Potter and the Sorcerer's Stone</h2>
<p class="author">by J.K. Rowling</p>
<p class="published">1997</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["fantasy","young"]' data-date-created='1998' data-title='Harry Potter and the Chamber of Secrets' data-color='#800020'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_14-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Harry Potter and the Chamber of Secrets</h3>
<p class="author">by J.K. Rowling &bull; 1998</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_14-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Harry Potter and the Chamber of Secrets</h2>
<p class="author">by J.K. Rowling</p>
<p class="published">1998</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["fantasy","young"]' data-date-created='1999' data-title="Harry Potter and the Prisoner of Azkaban" data-color='#603060'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_15-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Harry Potter and the Prisoner of Azkaban</h3>
<p class="author">by J.K. Rowling &bull; 1999</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_15-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Harry Potter and the Prisoner of Azkaban</h2>
<p class="author">by J.K. Rowling</p>
<p class="published">1999</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["fantasy","young"]' data-date-created='2000' data-title="Harry Potter and the Goblet of Fire" data-color='#9a9c43'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_16-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Harry Potter and the Goblet of Fire</h3>
<p class="author">by J.K. Rowling &bull; 2000</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_16-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Harry Potter and the Goblet of Fire</h2>
<p class="author">by J.K. Rowling</p>
<p class="published">2000</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["fantasy","young"]' data-date-created='2003' data-title="Harry Potter and the Order of the Phoenix" data-color='#2c63a0'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_17-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Harry Potter and the Order of the Phoenix</h3>
<p class="author">by J.K. Rowling &bull; 2003</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_17-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Harry Potter and the Order of the Phoenix</h2>
<p class="author">by J.K. Rowling</p>
<p class="published">2003</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["fantasy","young"]' data-date-created='2005' data-title="Harry Potter and the Half-Blood Prince" data-color='#658539'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_18-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Harry Potter and the Half-Blood Prince</h3>
<p class="author">by J.K. Rowling &bull; 2005</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_18-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Harry Potter and the Half-Blood Prince</h2>
<p class="author">by J.K. Rowling</p>
<p class="published">2005</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
<li class="book-item small-12 medium-6 columns" data-groups='["fantasy","young"]' data-date-created='2007' data-title="Harry Potter and the Deathly Hallows" data-color='#b06010'>
<div class="bk-img">
<div class="bk-wrapper">
<div class="bk-book bk-bookdefault">
<div class="bk-front">
<div class="bk-cover" style="background-image: url('http://interactivejoe.com/book-viewer/assets/images/bk_19-small.jpg')"></div>
</div>
<div class="bk-back"></div>
<div class="bk-left"></div>
</div>
</div>
</div>
<div class="item-details">
<h3 class="book-item_title">Harry Potter and the Deathly Hallows</h3>
<p class="author">by J.K. Rowling &bull; 2007</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus nisi, eget pulvinar in, molestie et arcu.</p>
<a href="#" class="button ">Details</a>
</div>
<div class="overlay-details">
<a href="#" class="close-overlay-btn">Close</a>
<div class="overlay-image">
<img src="http://interactivejoe.com/book-viewer/assets/images/bk_19-large.jpg" alt="Book Cover">
<div class="back-color"></div>
</div>
<div class="overlay-desc activated">
<h2 class="overlay_title">Harry Potter and the Deathly Hallows</h2>
<p class="author">by J.K. Rowling</p>
<p class="published">2007</p>
<p class="synopsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor mauris,
non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<a href="#" class="button preview">Preview</a>
</div>
<div class="overlay-preview">
<a href="#" class="back-preview-btn">Back</a>
<h4 class="preview-title">Preview</h4>
<div class="preview-content">
<h5>Chapter 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus convallis sem. Nunc sed tristique augue. Aenean at nulla vel lacus volutpat bibendum vitae ut nibh. Aliquam eu metus et purus rutrum malesuada. Aenean in auctor
mauris, non vulputate libero. Nullam auctor, purus ut cursus convallis, lectus tellus dignissim lectus, id tempor ipsum leo ut nulla. Vestibulum vitae elit erat.<br>&nbsp;<br>&nbsp;</p>
</div>
</div>
</div>
</li>
</ul>
</div>
</section>
</div>
<!-- Footer Content -->
<footer id="footer" class="page-footer">
<div class="row footer-wrapper">
<div class="original-version small-12 columns"><a href="http://interactivejoe.com/book-viewer/" target="_blank"><em>Original Version can be found here.</em></a></div>
<div class="copyright small-12 columns">&copy; 2016 - <a href="http://interactivejoe.com/" target="_blank">InteractiveJoe</a></div>
</div>
</footer>
</div>
<!-- /main -->
<div class="main-overlay">
<div class="overlay-full"></div>
</div>
</div>
<!-- /main-container -->
Raw
script.js
// Get Color Attribute
// Set the background book color
$("li.book-item").each(function() {
var $this = $(this);
$this.find(".bk-front > div").css('background-color', $(this).data("color"));
$this.find(".bk-left").css('background-color', $(this).data("color"));
$this.find(".back-color").css('background-color', $(this).data("color"));
$this.find(".item-details a.button").on('click', function() {
displayBookDetails($this);
});
});
function displayBookDetails(el) {
var $this = $(el);
$('.main-container').addClass('prevent-scroll');
$('.main-overlay').fadeIn();
$this.find('.overlay-details').clone().prependTo('.main-overlay');
$('a.close-overlay-btn').on('click', function(e) {
e.preventDefault();
$('.main-container').removeClass('prevent-scroll');
$('.main-overlay').fadeOut();
$('.main-overlay').find('.overlay-details').remove();
});
$('.main-overlay a.preview').on('click', function() {
$('.main-overlay .overlay-desc').toggleClass('activated');
$('.main-overlay .overlay-preview').toggleClass('activated');
});
$('.main-overlay a.back-preview-btn').on('click', function() {
$('.main-overlay .overlay-desc').toggleClass('activated');
$('.main-overlay .overlay-preview').toggleClass('activated');
});
}
/*
* Offcanvas Menu
*/
// Open Offcanvas Menu
$('.main-navigation a').on('click', function() {
$('.main-container').addClass('nav-menu-open');
$('.main-overlay').fadeIn();
});
// Close Offcanvas Menu
$('.overlay-full').on('click', function() {
$('.main-container').removeClass('nav-menu-open');
$('.main-container').removeClass('prevent-scroll');
$(this).parent().fadeOut();
$(this).parent().find('.overlay-details').remove();
});
/*
* Shuffle.js for Search, Catagory filter and Sort
*/
// Initiate Shuffle.js
var Shuffle = window.shuffle;
var bookList = function(element) {
this.element = element;
this.shuffle = new Shuffle(element, {
itemSelector: '.book-item',
});
this._activeFilters = [];
this.addFilterButtons();
this.addSorting();
this.addSearchFilter();
this.mode = 'exclusive';
};
bookList.prototype.toArray = function(arrayLike) {
return Array.prototype.slice.call(arrayLike);
};
// Catagory Filter Functions
// Toggle mode for the Catagory filters
bookList.prototype.toggleMode = function() {
if (this.mode === 'additive') {
this.mode = 'exclusive';
} else {
this.mode = 'additive';
}
};
// Filter buttons eventlisteners
bookList.prototype.addFilterButtons = function() {
var options = document.querySelector('.filter-options');
if (!options) {
return;
}
var filterButtons = this.toArray(options.children);
filterButtons.forEach(function(button) {
button.addEventListener('click', this._handleFilterClick.bind(this), false);
}, this);
};
// Function for the Catagory Filter
bookList.prototype._handleFilterClick = function(evt) {
var btn = evt.currentTarget;
var isActive = btn.classList.contains('active');
var btnGroup = btn.getAttribute('data-group');
if (this.mode === 'additive') {
if (isActive) {
this._activeFilters.splice(this._activeFilters.indexOf(btnGroup));
} else {
this._activeFilters.push(btnGroup);
}
btn.classList.toggle('active');
this.shuffle.filter(this._activeFilters);
} else {
this._removeActiveClassFromChildren(btn.parentNode);
var filterGroup;
if (isActive) {
btn.classList.remove('active');
filterGroup = Shuffle.ALL_ITEMS;
} else {
btn.classList.add('active');
filterGroup = btnGroup;
}
this.shuffle.filter(filterGroup);
}
};
// Remove classes for active states
bookList.prototype._removeActiveClassFromChildren = function(parent) {
var children = parent.children;
for (var i = children.length - 1; i >= 0; i--) {
children[i].classList.remove('active');
}
};
// Sort By
// Watching for the select box to change to run
bookList.prototype.addSorting = function() {
var menu = document.querySelector('.sort-options');
if (!menu) {
return;
}
menu.addEventListener('change', this._handleSortChange.bind(this));
};
// Sort By function Handler runs on change
bookList.prototype._handleSortChange = function(evt) {
var value = evt.target.value;
var options = {};
function sortByDate(element) {
return element.getAttribute('data-created');
}
function sortByTitle(element) {
return element.getAttribute('data-title').toLowerCase();
}
if (value === 'date-created') {
options = {
reverse: true,
by: sortByDate,
};
} else if (value === 'title') {
options = {
by: sortByTitle,
};
}
this.shuffle.sort(options);
};
// Searching the Data-attribute Title
// Advanced filtering
// Waiting for input into the search field
bookList.prototype.addSearchFilter = function() {
var searchInput = document.querySelector('.shuffle-search');
if (!searchInput) {
return;
}
searchInput.addEventListener('keyup', this._handleSearchKeyup.bind(this));
};
// Search function Handler to search list
bookList.prototype._handleSearchKeyup = function(evt) {
var searchInput = document.querySelector('.shuffle-search');
var searchText = evt.target.value.toLowerCase();
// Check if Search input has value to toggle class
if (searchInput && searchInput.value) {
$('.catalog-search').addClass('input--filled');
} else {
$('.catalog-search').removeClass('input--filled');
}
this.shuffle.filter(function(element, shuffle) {
// If there is a current filter applied, ignore elements that don't match it.
if (shuffle.group !== Shuffle.ALL_ITEMS) {
// Get the item's groups.
var groups = JSON.parse(element.getAttribute('data-groups'));
var isElementInCurrentGroup = groups.indexOf(shuffle.group) !== -1;
// Only search elements in the current group
if (!isElementInCurrentGroup) {
return false;
}
}
var titleElement = element.querySelector('.book-item_title');
var titleText = titleElement.textContent.toLowerCase().trim();
return titleText.indexOf(searchText) !== -1;
});
};
// Wait till dom load to start the Shuffle js funtionality
document.addEventListener('DOMContentLoaded', function() {
window.book_list = new bookList(document.getElementById('grid'));
});
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/4.0.0/shuffle.min.js"></script>
Raw
style.scss
/*
* Imports
*/
@import url(https://fonts.googleapis.com/css?family=Lato:400,300,700,900);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700);
@import url('https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css');
/*
* Variables
*/
$global-width: 1024px;
// Colors
$library-palette: ( primary: #219e9a,
);
$primary: #219e9a;
$light-gray: #ecf0f1;
$medium-gray: #d2d6d5;
$dark-gray: #313131;
$black: #000;
$white: #fff;
// Typography
$body-font-family: 'Lato',
'Helvetica Neue',
Helvetica,
Arial,
sans-serif;
/* Single Line truncation */
@mixin truncate() {
// width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Multiline truncation */
@mixin multi-truncate($font-size: 15px,
$line-height: 1.4,
$lines-to-show: 3) {
display: block;
display: -webkit-box;
height: $font-size * $line-height * $lines-to-show;
/* Fallback for non-webkit */
font-size: $font-size;
line-height: $line-height;
-webkit-line-clamp: $lines-to-show;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
/*
* Global styles
*/
html,
body,
.main,
.main-container {
height: 100%;
}
body {
font-family: $body-font-family;
color: $dark-gray;
background: $light-gray;
}
.row {
max-width: $global-width;
}
/*
* Typography
*/
body,
p,
a,
li {
font-family: $body-font-family;
font-size: 15px;
}
a {
color: $primary;
}
h2,
h3 {
margin-top: 6px;
margin-bottom: 6px;
font-size: 28px;
font-weight: bold;
letter-spacing: -1px;
color: $dark-gray;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 24px;
}
h4 {
margin-bottom: 12px;
font-size: 22px;
line-height: 40px;
color: rgba($dark-gray, 0.7);
}
p:not(.author) {
font-size: 15px;
font-weight: 300;
line-height: 1.4;
}
p.author {
margin-bottom: 10px;
letter-spacing: -1px;
font-weight: 400;
color: rgba($dark-gray, 0.5);
}
/*
* Button
*/
a.button {
margin-bottom: 0;
padding: 8px 14px;
font-size: 14px;
font-weight: 600;
border-radius: 3px;
background-color: rgba($dark-gray, 0.5);
&:hover,
&:focus {
background-color: $primary;
}
}
/*
* Header
*/
.page-header {
position: relative;
margin-bottom: 55px;
width: 100%;
border-bottom: 1px solid $medium-gray;
background-color: $white;
}
.main-logo {
display: inline-block;
padding: 1em;
width: auto;
a.logo {
display: block;
width: 150px;
height: 40px;
text-indent: -9999px;
background: url("http://interactivejoe.com/book-viewer/assets/images/logo.svg");
background-color: $white;
transition: background-color 250ms ease-out;
&:hover,
&:focus {
background-color: $light-gray;
}
}
}
.menu-search {
float: right;
width: calc(100% - 200px);
}
/*
* Search Input
*/
.catalog-search {
position: relative;
// z-index: 1;
// display: inline-block;
margin: 0 20px;
max-width: 275px;
width: calc(100% - 2em);
vertical-align: top;
overflow: hidden;
float: right;
}
.input_field {
position: relative;
display: block;
float: right;
margin-top: 10px;
padding: 14px 7px 0;
width: 100%;
border: none;
border-radius: 0;
color: $dark-gray;
font-weight: normal;
font-family: $body-font-family;
background: none;
box-shadow: none;
-webkit-appearance: none;
/* for box shadows to show on iOS */
&:focus {
outline: none;
border: none;
background: none;
box-shadow: none;
-webkit-appearance: none;
.input_label-content {
bottom: 20px;
}
}
}
.input_label {
position: absolute;
display: inline-block;
bottom: 0;
left: 0;
padding: 0 0.25em;
width: 100%;
height: calc(100% - 1em);
color: $medium-gray;
font-weight: light;
font-size: 15px;
text-align: left;
pointer-events: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-touch-callout: none;
user-select: none;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: calc(100% - 10px);
border-bottom: 1px solid rgba($dark-gray, 0.45);
}
&:after {
content: '';
position: absolute;
top: 0;
left: 0;
margin-top: 2px;
width: 100%;
height: calc(100% - 10px);
border-bottom: 3px solid $primary;
transform: translate3d(-100%, 0, 0);
transition: transform 0.3s;
}
}
.input_label-content {
position: absolute;
width: 100%;
bottom: 14px;
}
.input_label-search {
position: relative;
display: block;
color: rgba($dark-gray, 0.45);
&:after {
content: '\f002';
position: absolute;
top: 7px;
right: 5px;
font-family: 'fontawesome';
}
}
.input_field:focus + .input_label::after,
.input--filled .input_label::after {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.input_field:focus + .input_label .input_label-content,
.input--filled .input_label-content {
-webkit-animation: anim-1 0.3s forwards;
animation: anim-1 0.3s forwards;
}
@-webkit-keyframes anim-1 {
50% {
opacity: 0;
-webkit-transform: translate3d(1em, 0, 0);
transform: translate3d(1em, 0, 0);
}
51% {
opacity: 0;
-webkit-transform: translate3d(-1em, -40%, 0);
transform: translate3d(-1em, -40%, 0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0, -40%, 0);
transform: translate3d(0, -40%, 0);
}
}
@keyframes anim-1 {
50% {
opacity: 0;
bottom: 24px;
-webkit-transform: translate3d(5em, 0, 0);
transform: translate3d(5em, 0, 0);
}
51% {
opacity: 0;
bottom: 24px;
-webkit-transform: translate3d(-5em, -40%, 0);
transform: translate3d(-5em, -40%, 0);
}
100% {
opacity: 1;
bottom: 24px;
-webkit-transform: translate3d(0, -40%, 0);
transform: translate3d(0, -40%, 0);
}
}
/*
* Menu
*/
.main-navigation {
position: relative;
float: right;
margin: 16px 0;
padding: 0 20px;
height: 40px;
border-left: 1px solid $medium-gray;
a {
display: inline-block;
line-height: 40px;
vertical-align: middle;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
color: $dark-gray;
&:before {
content: '\f0c9';
position: relative;
display: inline-block;
padding-right: 10px;
font-family: "fontawesome";
font-size: 18px;
font-weight: 400;
color: rgba($dark-gray, 0.45);
vertical-align: middle;
}
}
}
/*
* Off Canvas Menu
*/
.main-container {
position: relative;
overflow-x: hidden;
&.prevent-scroll,
&.nav-menu-open {
overflow: hidden;
}
}
// Offcanvas Menu
.nav-menu {
position: absolute;
top: 0;
right: 0;
z-index: 100;
visibility: visible;
width: 300px;
height: 100%;
background: $primary;
-webkit-transition: all 0.5s;
transition: all 0.5s;
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
&:after {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.2);
content: '';
opacity: 1;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
display: none;
}
h2 {
margin: 0;
padding: 1em;
color: rgba(0, 0, 0, 0.4);
text-shadow: 0 0 1px rgba(0, 0, 0, 0.1);
font-weight: 300;
font-size: 2em;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
a {
display: block;
padding: 1em 1em 1em 1.2em;
outline: none;
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2);
color: #f3efe0;
text-transform: uppercase;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.1);
letter-spacing: 1px;
font-weight: 400;
-webkit-transition: background 0.3s, box-shadow 0.3s;
transition: background 0.3s, box-shadow 0.3s;
}
&:first-child {
a {
box-shadow: inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 1px rgba(0, 0, 0, 0.2);
}
}
&:hover {
background: rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -1px rgba(0, 0, 0, 0);
color: #fff;
}
}
}
// If menu OPEN
.nav-menu-open {
.nav-menu {
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
&:after {
width: 0;
height: 0;
opacity: 0;
-webkit-transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
transition: opacity 0.5s, width 0.1s 0.5s, height 0.1s 0.5s;
}
}
}
/*
* book List
*/
// Filterable
.toolbar {
margin-bottom: 30px;
// max-width: 960px;
border-bottom: 1px solid $medium-gray;
select {
margin-bottom: 7px;
color: $dark-gray;
font-size: 14px;
border: none;
// border-bottom: 1px solid rgba($dark-gray, 0.45);
background-color: transparent;
}
.filter-options {
line-height: 40px;
}
a.filter-item {
margin-right: 16px;
padding-bottom: 18px;
font-size: 14px;
color: $dark-gray;
border-bottom: 0px solid transparent;
transition: all 250ms ease-out;
&:last-child {
margin-right: 0;
}
&.active {
padding-bottom: 15px;
color: $primary;
font-weight: bold;
border-bottom: 3px solid $primary;
}
}
}
// List Items
#grid {
margin-bottom: 60px;
}
.book-item {
margin: 15px 0;
padding: 15px;
list-style-type: none;
&:after {
content: '';
position: absolute;
top: 0;
right: 15px;
width: calc(100% - 105px);
height: 100%;
border-radius: 3px;
box-shadow: 0 0 0 0 transparent;
background-color: rgba($white, 0);
z-index: -1;
transition: all 250ms ease-out;
}
&:hover {
&:after {
box-shadow: 0px 1px 1px 1px rgba($medium-gray, 0.5);
background-color: $white;
}
.item-img {
img {
box-shadow: 0px 0px 10px 0px rgba($dark-gray, 0.25);
}
}
a.button {
background-color: $primary;
}
.bk-bookdefault {
-webkit-transform: rotate3d(0, 1, 0, 25deg);
transform: rotate3d(0, 1, 0, 25deg);
}
.bk-back {
opacity: 1;
}
}
.item-img {
display: inline-block;
float: left;
padding-right: 30px;
img {
box-shadow: 0 0 0 0 transparent;
transition: all 250ms ease-out;
}
}
.item-details {
padding-right: 30px;
}
h3 {
@include truncate;
}
p:not(.author) {
@include multi-truncate;
}
}
/*
* Book Rotate
*/
.bk-img {
position: relative;
display: inline-block;
float: left;
padding-right: 30px;
list-style: none;
.bk-wrapper {
position: relative;
width: 150px;
height: 215px;
float: left;
z-index: 1;
-webkit-perspective: 1400px;
perspective: 1400px;
&:last-child {
margin-right: 0;
}
}
.bk-book {
position: absolute;
width: 100%;
height: 215px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
}
.bk-book > div,
.bk-front > div {
display: block;
position: absolute;
}
.bk-front {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 0% 50%;
transform-origin: 0% 50%;
-webkit-transition: -webkit-transform .5s;
transition: transform .5s;
-webkit-transform: translate3d(0, 0, 20px);
transform: translate3d(0, 0, 20px);
z-index: 10;
> div {
z-index: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
border-radius: 0 3px 3px 0;
box-shadow: inset 4px 0 10px rgba(0, 0, 0, 0.1);
}
&:after {
content: '';
position: absolute;
top: 1px;
bottom: 1px;
left: -1px;
width: 1px;
}
}
.bk-front,
.bk-back,
.bk-front > div {
width: 150px;
height: 215px;
}
.bk-left,
.bk-right {
width: 40px;
left: -20px;
}
.bk-back {
-webkit-transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, 20px);
transform: rotate3d(0, 1, 0, -180deg) translate3d(0, 0, 20px);
box-shadow: 5px 7px 15px rgba(0, 0, 0, 0.3);
border-radius: 3px 0 0 3px;
opacity: 0;
transition: opacity 250ms ease-out;
&:after {
content: '';
position: absolute;
top: 0;
left: 10px;
bottom: 0;
width: 3px;
background: rgba(0, 0, 0, 0.06);
box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}
}
.bk-left {
height: 215px;
-webkit-transform: rotate3d(0, 1, 0, -90deg);
transform: rotate3d(0, 1, 0, -90deg);
h2 {
width: 215px;
height: 40px;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(90deg) translateY(-40px);
transform: rotate(90deg) translateY(-40px);
}
}
.bk-cover {
/*background-image: url(../images/1.png);*/
background-repeat: no-repeat;
background-position: 10px 40px;
&:after {
content: '';
position: absolute;
top: 0;
left: 10px;
bottom: 0;
width: 3px;
background: rgba(0, 0, 0, 0.06);
box-shadow: 1px 0 3px rgba(255, 255, 255, 0.1);
}
}
/* Individual style & artwork */
.bk-cover {
background-repeat: no-repeat;
background-position: top left !important;
}
.bk-front > div,
.bk-left {
background-color: $primary;
}
}
/*
* Lightbox
*/
.main-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: rgba($dark-gray, 0.65);
.overlay-full {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.overlay-details {
position: absolute;
display: block;
z-index: 1;
top: 50%;
left: 50%;
width: 100%;
max-width: 800px;
max-height: 480px;
padding: 40px;
overflow: hidden;
border-radius: 3px;
background-color: $white;
box-shadow: 0px 2px 1px 2px rgba($black, 0.3);
transform: translate(-50%, -50%);
}
.overlay-image {
// position: relative;
display: inline-block;
margin-right: 30px;
max-width: 275px;
vertical-align: top;
img {
position: relative;
display: inline-block;
z-index: 1;
box-shadow: -12px 12px 15px -5px rgba(0, 0, 0, 0.3);
}
.back-color {
position: absolute;
top: 0;
left: 0;
width: 275px;
height: 100%;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
background-color: green;
}
}
.close-overlay-btn {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
opacity: 0.3;
text-indent: -9999px;
transition: opacity 250ms ease-out;
&:hover {
opacity: 1;
}
&:before {
content: ' ';
position: absolute;
left: 15px;
width: 2px;
height: 33px;
background-color: $dark-gray;
}
&:after {
content: ' ';
position: absolute;
left: 15px;
width: 2px;
height: 33px;
background-color: $dark-gray;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
.back-preview-btn {
position: absolute;
top: 7px;
left: -34px;
// top: 15px;
// left: 15px;
width: 30px;
height: 30px;
opacity: 0.3;
text-indent: -9999px;
transition: opacity 250ms ease-out;
&:hover {
opacity: 1;
}
&:before {
content: ' ';
position: absolute;
left: 15px;
width: 2px;
height: 15px;
background-color: $dark-gray;
}
&:after {
content: ' ';
position: absolute;
top: 10px;
left: 15px;
width: 2px;
height: 15px;
background-color: $dark-gray;
}
&:before {
transform: rotate(45deg);
}
&:after {
transform: rotate(-45deg);
}
}
.overlay-desc {
display: inline-block;
margin-top: -400px;
width: calc(100% - 320px);
vertical-align: top;
transition: all 500ms ease-out;
&.activated {
display: inline-block;
margin-top: 0;
}
}
.overlay-preview {
position: relative;
display: inline-block;
float: right;
margin-top: 40px;
width: calc(100% - 310px);
vertical-align: top;
transition: all 500ms ease-out;
&.activated {
margin-top: -430px;
}
}
.preview-content {
// position: relative;
padding-right: 24px;
padding-top: 10px;
@include multi-truncate(15px,
1.5,
16);
overflow: scroll;
text-overflow: clip;
font-weight: 400;
h5,
p {
font-family: 'Roboto Slab', serif;
}
h5 {
font-weight: bold;
}
p {
font-weight: normal;
}
&:before {
content: '';
position: absolute;
left: 0;
top: 40px;
width: 100%;
height: 30px;
background: rgba(255, 255, 255, 0);
background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 1) 80%);
}
&:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 50px;
background: rgba(255, 255, 255, 0);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 1) 80%);
}
}
}
// Lightbox details for book item
.overlay-details {
display: none;
}
/*
* Footer
*/
#footer {
margin-top: 60px;
padding: 15px 0 20px;
border-top: 1px solid $white;
background-color: rgba($dark-gray, 0.5);
div,
a,
p {
color: $white;
font-size: 12px;
text-align: center;
}
}
Raw
styles
<link href="https://cdn.jsdelivr.net/foundation/6.2.0/foundation.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment