Get started with lory.js CDN

MIT licensed

Lory.js is a lightweight library for responsive image loading and optimization.

Tags:
  • responsive
  • lightweight
  • minimalistic
  • carousel
  • slider
  • touch
  • slideshow
  • jQuery
  • mobile

Stable version

Copied!

How to start using lory.js CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with lory.js CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lory/2.5.3/css/lory.min.css">
    <script src="https://cdn.cdnhub.io/lory.js/2.5.3/lory.min.js"></script>
</head>
<body>
    <div id="lory-container">
        <button id="load-more">Load More</button>
        <ul id="lory-list"></ul>
    </div>

    <script>
        const container = document.getElementById('lory-container');
        const loadMoreButton = document.getElementById('load-more');
        const loryList = document.getElementById('lory-list');

        const lory = new Lory({
            container,
            element: 'ul',
            size: 'small',
            columns: 3,
            gap: 15,
            threshold: 0,
            callback: () => {
                if (lory.hasMore) {
                    loadMoreButton.disabled = false;
                }
            },
            loadMore: () => {
                // Add new items to the list here
                // For example, using an AJAX call or fetching data from an API
                const newItems = fetchNewItems();
                loryList.append(...newItems);
            },
        });

        loadMoreButton.addEventListener('click', () => {
            lory.loadMore();
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions