Get started with galleriffic CDN

MIT licensed

Library: Galleriffic. Creates customizable image galleries easily.

Tags:
  • jquery
  • gallery
  • images

Stable version

Copied!

How to start using galleriffic CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with galleriffic CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/galleriffic/2.0.1/jquery.galleriffic.css" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.cdnhub.io/galleriffic/2.0.1/jquery.galleriffic.min.js"></script>
    <style>
        #thumbnails {
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 100%;
            position: relative;
        }
        #thumbnails li {
            width: 100px;
            height: 100px;
            float: left;
            margin-right: 1px;
            margin-bottom: 1px;
        }
        #thumbnails img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="galleriffic">
        <ul id="thumbnails">
            <li><img src="image1.jpg" alt="Image 1" /></li>
            <li><img src="image2.jpg" alt="Image 2" /></li>
            <li><img src="image3.jpg" alt="Image 3" /></li>
            <li><img src="image4.jpg" alt="Image 4" /></li>
            <li><img src="image5.jpg" alt="Image 5" /></li>
        </ul>
    </div>

    <script>
        $(document).ready(function() {
            $('#galleriffic').galleriffic({
                delay: 3500,
                numThumbs: 5,
                preloadAhead: 1,
                imageContainerSel: '#thumbnails',
                bindThumbs: '#galleriffic'
            });
        });
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions