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!