book reader

by Richard Hunter

HTML

<button data-forward-button class="forward-button">forward</button>
<button data-back-button class="back-button">back</button>
<section class="blog__container">
    <div class="pages-container">
         <h3 class="blog__article__header">Edinburgh's Secret Leonardo</h3>

        <div data-pages class="pages">
            <p>The Ruskin Madonna, also called the 'Virgin adoring the Christ Child' is a Fifteenth century panel painting, currently hanging in the National Gallery of Scotland in Edinburgh, which is attributed to the workshop of Andrea del Verrocchio. <span data-citation="" data-title="The Virgin Adoring the Christ Child ('The Ruskin Madonna')" data-website="National Galleries of Scotland" data-link="http://www.nationalgalleries.org/collection/artists-a-z/V/308/artist_name/Andrea%20del%20Verrocchio/record_id/2513" data-retrieved="23/03/14"></span>

            </p>
            <figure>
                <img src="http://www.nationalgalleries.org/media/42/collection/2012AA41767.jpg">
            </figure>
            <p>Verrocchio was an Italian artist and sculptor who lived in Florence during the Fifteenth century. He ran a large studio through which passed some of the most talented artists of the time e.g. Perugino, Lorenzo Di Credi, Botticelli, Ghirlandaio, and Leonardo Da Vinci. <span data-citation="" data-title="Andrea di Cione" data-website="Virtual Uffizi" data-link="http://www.virtualuffizi.com/andrea-di-cione-called-verrocchio.html" data-retrieved="23/03/14"></span>Although Verrocchio was not a painter himself, a number of paintings that were created within his workshop survive. These would have been executed by his assistants and students, perhaps to his designs. A notable feature of this group of works is the diversity of different styles employed between then and within them. Although It was normal Renaissance practise for artists within the same workshop to collaborate on a painting, they would have been expected to work in the manner of the...

CSS

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
h1 {
    font-size: 40px;
}
h2 {
    font-size: 30px;
}
*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.about {
    background: pink;
    padding: 12px;
    display: table;
    width: 100%;
}
header {
    display: table;
    width: 100%;
}
.about img {
    width: auto;
    float: right;
    margin: 0 12px;
}
header h1, header h2 {
    font-weight: bold;
}
.sitename {
    float: left;
}
.signin {
    float: right;
    width: 240px;
    margin: 12px;
}
.signin label {
    float: left;
    width: 100%;
}
.signin label span {
    width: 40%;
    text-align: right;
    display: inline-block;
    margin-right: 12px;
}
header {
    background: teal;
}
.container {
    width: 1000px;
    margin: 0 auto;
    display: table;
    position: relative;
}
aside {
    width: 30%;
    float:...

JavaScript

(function ($) {

    var $citations = $('[data-citation]');
    var $citationsContainer = $('#citations-container');

    $citations.each(function (index, citation) {

        var $citation = $(citation);

        var title = $citation.data('title');
        var website = $citation.data('website');
        var link = $citation.data('link');
        var retrieved = $citation.data('retrieved');

        $citation = $('<li>' + title + ", " + website + ", " + link + ", " + retrieved + "." + '</li>');

        $citationsContainer.append($citation);

    });


})(jQuery);


function Slider() {

    this.$forward = $('[data-forward-button]');
    this.$back = $('[data-back-button]');
    this.$pages = $('[data-pages]');

    var columnGap = 10;
    this.pageWidth = 552 + columnGap;


    console.log(this.pagesWidth)


    this.$forward.click(this.forward.bind(this));
    this.$back.click(this.back.bind(this));

    this.page = 0;
}

Slider.prototype = {

    forward: function () {

        var markerLeft = $('#marker').position().left;

        var nextLeft = (this.page + 1) * this.pageWidth;

        if (!(nextLeft > markerLeft)) {

            this.page++;
            this._setPage();
        }

        /*  if(this.page + 1 < this.$pages.length) {

            this.page++;
                                                                                                                                                        (
            var $pageSlider = this.$pages.eq(this.page);

            $pageSlider.animate({
                width : '100%'
            });
        }*/

    },

    _setPage: function () {

        this.$pages.animate({

            left: -1 * this.page * this.pageWidth

        });


    },

    back: function () {

        console.log("back");

        if (this.page > 0) {
            this.page--;
            this._setPage();
        }
        /* if(this.page > 0) {

            var $pageSlider =...