Thumbnail grid

In this tutorial, we'll create a thumbnail grid that shows an enlargement of the clicked image in a new panel.

Just like in the off-canvas menu tutorial, we'll start with creating a .html page, include the needed .js and .css files and setup the HTML for the page.

Lets 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 the panel and the thumbnails. Most commonly, you'd add these styles to an external .css file.

<style>
   #my-thumbs {
      padding: 0;
      overflow: hidden;
   }
   #my-thumbs::before,
   #my-thumbs::after {
      content: none;
   }
   #my-thumbs img {
      width: calc( 33.33% - 10px );
      height: 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">
      <img src="" />
   </div>
</nav>

Write some CSS to style the enlargement. Most commonly, you'd add these styles to an external .css file.

<style>
   #my-enlargement {
      padding-left: 0;
      padding-right: 0;
   }
   #my-enlargement::before,
   #my-enlargement::after {
      content: none;
   }
   #my-enlargement img {
      max-width: 100%;
      max-height: 100%;
      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 use the effects extension to open the enlargement from the bottom.

<script>
   document.addEventListener(
      "DOMContentLoaded", () => {
         const menu = new Mmenu( "#my-menu", {
            "extensions": [
               "fx-panels-slide-up"
            ]
         });

         const api = menu.api;
         const thumbs = document.querySelctor( "#my-thumbs" );
         const enlargement = document.querySelctor( "#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.querySelctor( "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" />
   </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 id="my-footer"></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">
            <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", {
                  "extensions": [
                     "fx-panels-slide-up"
                  ]
               });

               const api = menu.api;
               const thumbs = document.querySelctor( "#my-thumbs" );
               const enlargement = document.querySelctor( "#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.querySelctor( "img" ).setAttribute( "src", large );
                        api.openPanel( enlargement );
                     }
                  }
               );
            }
         );
      </script>
   </body>
</html>

Next tutorial:
Customized colors