HTML Scrolling Carousel Image Gallery

This tutorial covers creating an HTML image gallery by extending the code from the article HTML Image Scroller Carousel Example. The previous post created the image scroller using the lightSlider content carousel. The code in this article extends that carousel so that it can be used as a HTML gallery. For a picture gallery the thumbnail images can be scrolled and a click on a thumbnail shows a larger version of the image. The code and images used here are available in a download, gallery_demo.zip.

HTML Image Gallery Using a Scrolling Carousel

To continue with this article you need an HTML page with the basic working lightSlider image scroller. If you followed the previous article then you will have a web page with a scroller similar to the Basic Horizontal Scroller on the HTML Image Scrolling Carousel Demos page. If not you can either follow the article HTML Image Scroller Carousel Example to generate the starting point, or download the scroller demo code and extract the contents to an empty folder: scroller_demo.zip.

Add the Elements to Display the Gallery Picture

Open the web page in an editor (e.g. Windows Notepad or a similar editor such as Notepad++), the structure holding the image carousel consists of a HTML unordered list, ul, with each list item, li holding an image, img, tag:

<ul id="lightSlider">
    <li><img src="images/breads_thumbnail.jpg" alt="Breads"/></li>
    <li><img src="images/oranges_thumbnail.jpg" alt="Oranges"/></li>
    <!-- The other images -->
    <li><img src="images/wine_cheese_bread_thumbnail.jpg" alt="Wine, Cheese and Bread"/></li>
    <li><img src="images/soft_cheese_thumbnail.jpg" alt="Soft Cheese"/></li>
</ul>

Another img tag, outside the ul will hold the larger picture that is to be displayed when a thumbnail in the carousel is clicked. We could place it so that it sits above the carousel, which is quite common in gallery design. Here it is placed below the carousel. The img has an id attribute (set to picture) that will be used by the code (when the code assigns the larger image). By default it starts with the first image shown in the carousel:

    .
    <!-- The other images -->
    .
    <li><img src="images/soft_cheese_thumbnail.jpg" alt="Soft Cheese" /></li>
</ul>
<img id="picture" src="images/breads.jpg" alt="Breads"/>

Because the large pictures can consume a lot of space the gallery is placed in a div (division) tag and styling used to limit the maximum width (500 pixels on the div and 100% on the image):

<div style="max-width:500px">
    <ul id="lightSlider">
        .
        <!-- List items and images -->
        .
    </ul>
    <img id="picture" src="images/breads.jpg" alt="Breads" style="max-width: 100%;"/>
</div>

A data attribute for each thumbnail image stores the URL of the full size image, this will be used by the code to assign the URL to the larger image. Here the data attribute is named after the src (source) attribute for an img tag, hence the attribute is called data-src. (A data attribute can take any name after the hypen). One data-src attribute is assigned to each thumbnail image:

<ul id="lightSlider">
    <li><img src="images/breads_thumbnail.jpg" alt="Breads" data-src="images/breads.jpg"/></li>
    <li><img src="images/oranges_thumbnail.jpg" alt="Oranges" data-src="images/oranges.jpg"/></li>
    <!-- The other images -->
    <li><img src="images/wine_cheese_bread_thumbnail.jpg" alt="Wine, Cheese and Bread" data-src="images/wine_cheese_bread.jpg"/></li>
    <li><img src="images/soft_cheese_thumbnail.jpg" alt="Soft Cheese" data-src="images/soft_cheese.jpg"/></li>
</ul>

If not using you own images get the larger images from the demo page. The code to read the data-src attribute and assign the URL to the img for the larger picture can be added (to the click event for the thumbnail images). The alt attribute is also assigned (aids accessibility). Note the code uses jQuery to read and assign values:

$("#lightSlider img").click( function() {
    $('#picture').attr('src', $(this).data('src'));
    $('#picture').attr('alt', $(this).attr('alt'));
});

Here is a picture of the gallery in action:

The full HTML source code should be similar to the following:

<!DOCTYPE html>
<html>
    <head>
        <title>Image Gallery Carousel Slider Demo</title>
        <link rel="stylesheet" href="css/lightslider.min.css" />                  
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="js/lightslider.min.js"></script>
    </head>
    <body>
        <div id="gallery" style="max-width: 500px;">
            <ul id="lightSlider">
                <li><img src="images/breads_thumbnail.jpg" alt="Breads" data-src="images/breads.jpg"/></li>
                <li><img src="images/oranges_thumbnail.jpg" alt="Oranges" data-src="images/oranges.jpg"/></li>
                <li><img src="images/butternut_squash_thumbnail.jpg" alt="Butternut Squash" data-src="images/butternut_squash.jpg"/></li>
                <li><img src="images/carrots_thumbnail.jpg" alt="Carrots" data-src="images/carrots.jpg"/></li>
                <li><img src="images/chickens_at_market_thumbnail.jpg" alt="Chickens at Market" data-src="images/chickens_at_market.jpg" /></li>
                <li><img src="images/edible_fungi_thumbnail.jpg" alt="Edible Fungi" data-src="images/edible_fungi.jpg"/></li>
                <li><img src="images/fish_at_market_thumbnail.jpg" alt="Fish at Market" data-src="images/fish_at_market.jpg"/></li>
                <li><img src="images/flaming_cocktails_thumbnail.jpg" alt="Flaming Cocktails" data-src="images/flaming_cocktails.jpg"/></li>
                <li><img src="images/orange_juice_thumbnail.jpg" alt="Orange Juice" data-src="images/orange_juice.jpg" /></li>
                <li><img src="images/peaches_thumbnail.jpg" alt="Peaches" data-src="images/peaches.jpg"/></li>
                <li><img src="images/peppers_thumbnail.jpg" alt="Peppers" data-src="images/peppers.jpg"/></li>
                <li><img src="images/pomegranate_thumbnail.jpg" alt="Pomegranate" data-src="images/pomegranate.jpg"/></li>
                <li><img src="images/pumpkins_thumbnail.jpg" alt="Pumpkins" data-src="images/pumpkins.jpg"/></li>
                <li><img src="images/wine_cheese_bread_thumbnail.jpg" alt="Wine, Cheese and Bread" data-src="images/wine_cheese_bread.jpg"/></li>
                <li><img src="images/soft_cheese_thumbnail.jpg" alt="Soft Cheese" data-src="images/soft_cheese.jpg"/></li>
            </ul>
            <img style="max-width: 100%; height: auto !important;" id="picture" src="images/breads.jpg" alt="Breads"/>
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#lightSlider").lightSlider({autoWidth:true, enableDrag:false});
                $("#lightSlider img").click( function() {
                        $('#picture').attr('src', $(this).data('src'));
                        $('#picture').attr('alt', $(this).attr('alt'));
                });
            });
        </script>
    </body>
</html>

To change the browser's pointer to indicate that a thumbnail is clickable wrap it in a link element (a), e.g.:

<li><a href="#lightSlider"><img src="images/breads_thumbnail.jpg" alt="Breads" data-src="images/breads.jpg"/></a></li>

See Also

• View the above code in action on the HTML Image Scrolling Carousel Demo page.
• Download the above code as a zip file, gallery_demo.zip.
• Look at the lightSlider Examples page to examine more of it's capabilities and see how lightSlider's built in gallery operates.
• Look at an alternative gallery implementation, the Malihu Thumbnail Scroller.