Thumbnail Scroller by Malihu, A Carousel Demo

In previous articles code for the lightSlider HTML jQuery carousel was used for a thumbnail scroller and image gallery. An alternative jQuery based scroller is the Malihu jQuery Thumbnail Scroller. This article shows how to implement an image carousel and image gallery using the Malihu scroller.

To try this tutorial create a empty directory and start with a basic HTML web page called index.html (on Windows create it in Notepad or a free editor like Notepad++ which supports color coding):

<!DOCTYPE html>
<html>
    <head></head>
    <body></body>
</html>

From the Malihu scroller page download the zip (thumbnail-scroller-master.zip). From the zip copy the jquery.mThumbnailScroller.css and jquery.mThumbnailScroller.js files into an empty subdirectory. Here a directory called code is used. Reference the Cascading Style Sheet (CSS) file with a link HTML tag and the JavaScript (.js) file with a script tag. Also reference jQuery in a script tag. Add the following between the head tags:

<link href="code/jquery.mThumbnailScroller.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="code/jquery.mThumbnailScroller.js"></script>

As for many carousel implementations the HTML images are place into an unorder list, ul. Each list item, li, has an img tag (use you own images or download the demo code in malihu-demo.zip for the images used here). The ul is placed between the body tags:

<ul>
    <li><img src="images/breads_thumbnail.jpg" alt="Breads"/></li>
    <li><img src="images/oranges_thumbnail.jpg" alt="Oranges"/></li>
    <!-- And all 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>

Unlike the lightSlider carousel the Malihu scroller requires the ul to be wrapped in a div (division) tag with an id attribute (to identify it to the code). The Malihu web page says the div requires some style settings of overflow: auto; height: auto;. It can also be given a width, e.g. width: 500px;:

<div id="malihu" style="overflow: auto; width: 500px; height: auto;">
    <ul>
    .
    <!-- List items -->
    .
    </ul>
</div>

Finally before the closing body tag the scroller is initialised with some jQuery code in a script tag:

<script>
    $(document).ready(function () {
        $("#malihu").mThumbnailScroller();
    });
</script>

Try the [demo]() using hovering the mouse along the images to acivate the scolling. It will work on mobile devices because the Malihu scroller (las does lightSlider) supports touch input. Here is a full HTML example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Thumbnail Scroller Example</title>
        <!-- thumbnail scroller stylesheet -->
        <link href="code/jquery.mThumbnailScroller.css" rel="stylesheet" />
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="code/jquery.mThumbnailScroller.js"></script>
    </head>
    <body>
        <div id="malihu" style="overflow: auto; width: 500px; height: auto;">
            <ul>
                <li><img src="images/breads_thumbnail.jpg" alt="Breads"/></li>
                <li><img src="images/oranges_thumbnail.jpg" alt="Oranges"/></li>
                <li><img src="images/butternut_squash_thumbnail.jpg" alt="Butternut Squash"/></li>
                <li><img src="images/carrots_thumbnail.jpg" alt="Carrots"/></li>
                <li><img src="images/chickens_at_market_thumbnail.jpg" alt="Chickens at Market"/></li>
                <li><img src="images/edible_fungi_thumbnail.jpg" alt="Edible Fungi"/></li>
                <li><img src="images/fish_at_market_thumbnail.jpg" alt="Fish at Market"/></li>
                <li><img src="images/flaming_cocktails_thumbnail.jpg" alt="Flaming Cocktails"/></li>
                <li><img src="images/orange_juice_thumbnail.jpg" alt="Orange Juice"/></li>
                <li><img src="images/peaches_thumbnail.jpg" alt="Peaches"/></li>
                <li><img src="images/peppers_thumbnail.jpg" alt="Peppers"/></li>
                <li><img src="images/pomegranate_thumbnail.jpg" alt="Pomegranate"/></li>
                <li><img src="images/pumpkins_thumbnail.jpg" alt="Pumpkins"/></li>
                <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>
        </div>
        <script>
            $(document).ready(function () {
                $("#malihu").mThumbnailScroller();
            });
        </script>
    </body>
</html>

As for the lightSlider tutorials the Malihu scroller can be used as the basis for image gallery. Start by adding a img tag below the ul to show the full size image. Setting the src and alt attributes for the first image in the scroller. It is given an id so the code can address it, and styling to handle the large image sizes:

    </ul>
    <img id="picture" src="images/breads.jpg" alt="Breads" style="max-width: 100%; height: auto !important;"/>
</div>

When the thumbnail image is clicked a data attribute (here called src after the image source attribute) is used to obtain the URL for the full size picture. Therefore a data-src attribute is assigned to each image:

<ul>
    <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>
    <!-- And all 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>

The jQuery code set the larger picture is in a function on the thumbnail click (the alt attribute is assigned to help accessibility). Put this code after the call to mThumbnailScroller:

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

Try the Malihu based image gallery demo on the carousel demos page. If it is required for the mouse pointer to change to indicate thumbnails are clickable wrap them in an anchor, a, tag, e.g.:

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

Malihu supports scrolling using mouse clicks if preferred, e.g.:

$("#malihu").mThumbnailScroller({
    type:"click-50",
    theme:"buttons-in"
});

Tek Eye

Thumbnail Scroller by Malihu, A Carousel Demo

See Also

Do you have a question or comment about this article?