brunjo / rowGrid.js

A small, lightweight JavaScript plugin for placing items in straight rows (jQuery and vanilla JS version) – Demo:
http://brunjo.github.io/rowGrid.js/
MIT License
670 stars 78 forks source link

Accessibility #17

Closed terenceingram closed 9 years ago

terenceingram commented 9 years ago

Do you have an option to click say a button to load more instead of just scrolling?

brunjo commented 9 years ago

Yes, it's possible. Here is an example of how you can implement it:

<div class="container">
    <div class="item">
        <img src="path/to/image" width="320" height="200" />
    </div>
    <div class="item">
        <img src="path/to/image" width="290" height="200" />
    </div>
    <!-- more items -->
</div>
<button class="btn-more">Load more</button>
$(".container").rowGrid({
    minMargin: 10,
    maxMargin: 35,
    itemSelector: ".item"
});

$(".btn-more").on("click", function() {
    // here you can do an AJAX request
    var newItems = "<div class='item'><img src='http://placehold.it/310x200' /></div>"

    // append new items
    $(".container").append(newItems);
    // arrange appended items
    $(".container").rowGrid("appended");
});
terenceingram commented 9 years ago

Thanks will give it a go.