Thumbnail grid

In this tutorial, we'll create a thumbnail grid that shows an enlargement of the clicked image in a new panel. Just follow the tutorial step by step and you'll have it up and running in no time.

Lets start with creating a .html file and add the markup for the page. If you need help with this part, please read the off-canvas menu tutorial first.

Now add a <div /> with another <div /> for the menu. We'll give the <div />s an ID so we can target them later on.

<div id="my-menu">
    <div id="my-thumbs"></div>
</div>

Now add some <img />s in the inner <div />.

<div id="my-menu">
    <div id="my-thumbs">
        <img src="path/to/thumb/1.png" />
        <img src="path/to/thumb/2.png" />
        <img src="path/to/thumb/3.png" />
        <img src="path/to/thumb/4.png" />
        <!-- more <img />s -->
    </div>
</div>

Write some CSS to style this new markup. Most commonly, you'd write these styles in a separate .css file, but for this tutorial we'll write them in an inline <style />.

<style>
    #my-thumbs {
        padding: 0;
        overflow: hidden;
    }
    #my-thumbs::after {
        clear: both;
        height: 5px;
    }
    #my-thumbs img {
        width: calc( 33.33% - 10px );
        margin: 5px;
        float: left;
    }
</style>

The enlargement

To show the enlargement, lets add another <div /> with an <img /> in the outer <div /> and give it an ID. We'll leave the src attribute for the <img /> empty and populate it (using JavaScript) when clicking on one of the thumbnails.

<nav id="my-menu">
    <div id="my-thumbs">
        <img src="path/to/thumb/1.png" />
        <img src="path/to/thumb/2.png" />
        <img src="path/to/thumb/3.png" />
        <img src="path/to/thumb/4.png" />
        <!-- more <img />s -->
    </div>

    <div id="my-enlargement" data-mm-parent="#my-thumbs">
        <img src="" />
    </div>
</nav>

Write some CSS to style this new markup. Again, for this tutorial we'll write the styles in an inline <style />.

<style>
    #my-enlargement {
        padding-left: 0;
        padding-right: 0;
        background: #111;
    }
    #my-enlargement::after {
        content: none;
    }
    #my-enlargement img {
        max-width: 90%;
        max-height: 90%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate( -50%, -50% );
    }
</style>

Fire the plugin

Now lets fire the plugin and use the API to populate the enlargement src attribute so it shows a larger version of the clicked thumbnail. In this example, we'll assume the larger images have the same name as the thumbnails, but are located in a different folder.

We'll set the title above the main panel to "Photos", and use the navbars add-on so the title will be fixed.

<script>
    document.addEventListener(
        "DOMContentLoaded", () => {
            const menu = new Mmenu( "#my-menu", {
                navbar: {
                    title: "Photos"
                },
                navbars: [ true ]
            } );

            const api = menu.mmApi;
            const thumbs = document.querySelector( "#my-thumbs" );
            const enlargement = document.querySelector( "#my-enlargement" );

            thumbs.addEventListener(
                "click", ( evnt ) => {
                    if ( evnt.target.matches( "img" ) ) {
                        let small = evnt.target.getAttribute( "src" );
                        let large = small.split( "/thumb/" ).join( "/large/" );

                        enlargement.querySelector( "img" ).setAttribute( "src", large );
                        api.openPanel( enlargement );
                    }
                }
            );
        }
    );
</script>

Recap

You now have a .html file which looks something like this.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>My webpage</title>
        <link href="path/to/my-styles.css" rel="stylesheet" />
        <link href="path/to/mmenu.css" rel="stylesheet" />

        <style>
            #my-thumbs {
                padding: 0;
                overflow: hidden;
            }
            #my-thumbs::after {
                clear: both;
                height: 5px;
            }
            #my-thumbs img {
                width: calc( 33.33% - 10px );
                height: calc( 33.33% - 10px );
                margin: 5px;
                float: left;
            }
            #my-enlargement {
                padding-left: 0;
                padding-right: 0;
                background: #111;
            }
            #my-enlargement::after {
                content: none;
            }
            #my-enlargement img {
                max-width: 90%;
                max-height: 90%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate( -50%, -50% );
            }
        </style>
    </head>
    <body>
        <!-- The page -->
        <div id="my-page">
            <div id="my-header">
                <a href="#my-menu">Open the menu</a>
            </div>
            <div id="my-content"></div>
        </div>

        <!-- The menu -->
        <nav id="my-menu">
            <div id="my-thumbs">
                <img src="path/to/thumb/1.png" />
                <img src="path/to/thumb/2.png" />
                <img src="path/to/thumb/3.png" />
                <img src="path/to/thumb/4.png" />
                <!-- more <img />s -->
            </div>

            <div id="my-enlargement" data-mm-parent="#my-thumbs">
                <img src="" />
            </div>
        </nav>

        <script src="path/to/mmenu.js"></script>
        <script>
            Mmenu.configs.offCanvas.page.selector = "#my-page";

            document.addEventListener(
                "DOMContentLoaded", () => {
                    const menu = new Mmenu( "#my-menu", {
                        navbar: {
                            title: "Photos"
                        },
                        navbars: [ true ]
                    });

                    const api = menu.mmApi;
                    const thumbs = document.querySelector( "#my-thumbs" );
                    const enlargement = document.querySelector( "#my-enlargement" );

                    thumbs.addEventListener(
                        "click", ( evnt ) => {
                            if ( evnt.target.matches( "img" ) ) {
                                let small = evnt.target.getAttribute( "src" );
                                let large = small.split( "/thumb/" ).join( "/large/" );

                                enlargement.querySelector( "img" ).setAttribute( "src", large );
                                api.openPanel( enlargement );
                            }
                        }
                    );
                }
            );
        </script>
    </body>
</html>

Next tutorial:
Customized colors