Get started with jqlouds CDN

MIT licensed

JQLouds is a library for implementing responsive image galleries with lazy loading.

Tags:
  • clouds
  • decoration
  • jQuery
  • interface
  • animation

Stable version

Copied!

How to start using jqlouds CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with jqlouds CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.cdnhub.io/jqlouds/0.2.3/jquery.jqlouds.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-5">JQLouds Example</h1>
        <div id="louds-container">
            <button class="btn btn-primary mb-3" id="loadMoreBtn">Load More</button>
            <ul id="louds-list"></ul>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            const LOAD_MORE_BUTTON = '#loadMoreBtn';
            const LOUDS_CONTAINER = '#louds-container';
            const LOUDS_LIST = '#louds-list';
            const LOUDS_COUNT = 10;
            let currentPage = 1;

            $(LOAD_MORE_BUTTON).on('click', function() {
                $.jqlouds({
                    url: 'https://api.example.com/louds?page=' + currentPage,
                    container: LOUDS_CONTAINER,
                    list: LOUDS_LIST,
                    count: LOUDS_COUNT,
                    callback: function(data) {
                        if (data.length < LOUDS_COUNT) {
                            $(LOAD_MORE_BUTTON).hide();
                        }
                        currentPage++;
                    }
                });
            });
        });
    </script>
</body>
</html>
Copied!
Copied!

All versions