Get started with chocolat CDN

GPL-3.0 licensed

Chocolat is a lightweight, flexible, and customizable CSS framework for creating beautiful and responsive web designs.

Tags:
  • jquery
  • lightbox
  • plugin
  • responsive

Stable version

Copied!

How to start using chocolat CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with chocolat CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chocolat/dist/chocolat.css">
    <script src="https://cdn.cdnhub.io/chocolat/1.1.2/js/chocolat.min.js"></script>
</head>
<body>
    <button id="gallery-btn">Open Lightbox</button>
    <div id="gallery" style="display: none;">
        <a href="image1.jpg" class="gallery" data-title="Image 1">Image 1</a>
        <a href="image2.jpg" class="gallery" data-title="Image 2">Image 2</a>
        <a href="image3.jpg" class="gallery" data-title="Image 3">Image 3</a>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const galleryBtn = document.getElementById('gallery-btn');
            const gallery = document.getElementById('gallery');

            galleryBtn.addEventListener('click', function() {
                Chocolat.open(gallery, {
                    width: 800,
                    height: 600,
                    title: 'Gallery'
                });
            });

            Chocolat.init();
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions