WtpFair Bookshelf

This is the bookshelf rendering for WtpFair

by alanbeech

HTML

<script src="http://knockoutjs.com/js/knockout-2.0.0.js"></script>
<img id="BookshelfBackground" data-bind="attr: {src: backgroundImage}" />
<div id="Bookshelf">
<!-- ko foreach: books -->
<div class="book" data-bind="attr: {url: thumbnail}" >
<img title="dfdsfd" class="bookThumbnail" data-bind="attr: {src: thumbnail, title: description}" /></div>
<!-- /ko -->
</div>

CSS

#BookshelfBackground
{
    width: 400px;
    height: 400px;
}

#Bookshelf
{
  position: absolute;
  top:0px;
  border: black solid 0px;
  padding: 0px;
  width:400px;      
}

.book
{
    display: none;
    float:left;
    margin-left: 26px;
    margin-right: 26px;
    margin-top: 15px;
    margin-bottom: 3px;
    cursor: pointer;
}

.bookThumbnail
{
    height: 110px;
}

JavaScript

var wtpFair = {};

var books = [
    { name: "book 1", description: "book description 1", thumbnail: "http://www.european-rubber-journal.com/encryptedpath8739579359385734985985/archive/ERJ%2012-01%20JanFeb%20wpdf/cover.jpg"},
    { name: "book 1", description: "book description 1", thumbnail: "http://www.european-rubber-journal.com/encryptedpath8739579359385734985985/archive/ERJ%2012-01%20JanFeb%20wpdf/cover.jpg"},
    { name: "book 1", description: "book description 1", thumbnail: "http://www.european-rubber-journal.com/encryptedpath8739579359385734985985/archive/ERJ%2012-01%20JanFeb%20wpdf/cover.jpg"},
    { name: "book 1", description: "book description 1", thumbnail: "http://www.european-rubber-journal.com/encryptedpath8739579359385734985985/archive/ERJ%2012-01%20JanFeb%20wpdf/cover.jpg"},
    { name: "book 1", description: "book description 1", thumbnail: "http://www.european-rubber-journal.com/encryptedpath8739579359385734985985/archive/ERJ%2012-01%20JanFeb%20wpdf/cover.jpg"},
    { name: "book 1", description: "book description 1", thumbnail: "http://www.european-rubber-journal.com/encryptedpath8739579359385734985985/archive/ERJ%2012-01%20JanFeb%20wpdf/cover.jpg"},
    { name: "book 1", description: "book description 1", thumbnail: "http://www.european-rubber-journal.com/encryptedpath8739579359385734985985/archive/ERJ%2012-01%20JanFeb%20wpdf/cover.jpg"},
    { name: "book 2", description: "book description 2", thumbnail: "http://www.european-rubber-journal.com/encryptedpath8739579359385734985985/archive/ERJ%2012-01%20JanFeb%20wpdf/cover.jpg"},

    { name: "book 4", description: "book description 4", thumbnail: "http://www.european-rubber-journal.com/encryptedpath8739579359385734985985/archive/ERJ%2012-01%20JanFeb%20wpdf/cover.jpg"}
];

wtpFair.viewModel = {
enableDetails: function() {            
         alert(0);                
     },
    books: ko.observableArray(books),
        backgroundImage:   ...