JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<!DOCTYPE html>
<html>
<body>
<div id="image-gallery">

<ul data-bind="foreach: pagedImages" id="image-gallery">
<li data-bind="css: { 'third-image-child': $index() == 0 }">
<div class="image-thumb" data-bind="style: { backgroundImage: 'url(' + imageLink +')'}">
    <a class="image-thumb-link" data-bind="attr: { href: imagePageLink}" href="gallery-single.html"></a>
</div>
<div class="image-text">
    <a data-bind="attr: { href: imagePageLink}" href="gallery-single.html"><span class="image-title" data-bind="text: imageTitle"></span></a><br />
    <span data-bind="text: userFullName">Username</span><br />
    <span data-bind="text: imageDate">Image Date</span>
</div>
</li>
</ul>   

</div>
</body>
</html>

CSS

.third-image-child { color: red; }

JavaScript

var DisplayGallery = function(jsondata) {
    var viewModel = {
        fields: ko.observableArray(jsondata),
        pageSize: ko.observable(9),
        pageIndex: ko.observable(0),
        previousPage: function() {
            this.pageIndex(this.pageIndex() - 1);
        },
        nextPage: function() {
            this.pageIndex(this.pageIndex() + 1);
        }
    };



    viewModel.maxPageIndex = ko.dependentObservable(function() {
        return Math.ceil(this.fields().length / this.pageSize()) - 1;
    }, viewModel);


    viewModel.pagedImages = ko.dependentObservable(function() {
        var size = this.pageSize();
        var start = this.pageIndex() * size;
        return this.fields.slice(start, start + size);
    }, viewModel);


    ko.applyBindings(viewModel);
};

var data = [];
for (var i = 0; i < 100; i++) {
    data.push({
        imageLink: "http://sample-image.jpg",
        imagePageLink: "http://",
        imageTitle: "Title here" + i,
        userFullName: "Name" + i,
        imageDate: "Description" + i
    })
}
DisplayGallery(data);