Thumbnail grid

To create a thumbnail grid, lets start with a panel (DIV) and put some thumbnails in it.

<div id="thumbnails">
   <a style="background-image: url(path/to/thumb/1.png);"></a>
   <a style="background-image: url(path/to/thumb/2.png);"></a>
   <a style="background-image: url(path/to/thumb/3.png);"></a>
   <a style="background-image: url(path/to/thumb/4.png);"></a>
   <a style="background-image: url(path/to/thumb/5.png);"></a>
   <a style="background-image: url(path/to/thumb/6.png);"></a>
</div>

Write some CSS to style the thumbnails.

#thumbnails {
   padding: 0;
   overflow: hidden;
}
#thumbnails:before,
#thumbnails:after {
   content: none;
}
#thumbnails a {
   background: none center center / cover no-repeat transparent;
   width: 32.33%;
   height: 0;
   padding-top: 32.33%;
   margin: 0.5%;
   float: left;
}

Wrap it in a node

Wrap the panel in a node (most commonly a NAV element) and give that node an ID:

<nav id="my-menu">
   <div id="thumbnails">
      <a style="background-image: url(path/to/thumb/1.png);"></a>
      <a style="background-image: url(path/to/thumb/2.png);"></a>
      <a style="background-image: url(path/to/thumb/3.png);"></a>
      <a style="background-image: url(path/to/thumb/4.png);"></a>
      <a style="background-image: url(path/to/thumb/5.png);"></a>
      <a style="background-image: url(path/to/thumb/6.png);"></a>
   </div>
</nav>

Add the enlargement

Create a subpanel for the enlargement by putting another DIV in the first DIV, this panel contains only one empty IMG that we'll update when the panel is opened.

Give the second DIV the class "Panel" and an ID and link to it from the first DIV.

<nav id="my-menu">
   <div id="thumbnails">
      <a href="#enlargement" style="background-image: url(path/to/thumb/1.png);"></a>
      <a href="#enlargement" style="background-image: url(path/to/thumb/2.png);"></a>
      <a href="#enlargement" style="background-image: url(path/to/thumb/3.png);"></a>
      <a href="#enlargement" style="background-image: url(path/to/thumb/4.png);"></a>
      <a href="#enlargement" style="background-image: url(path/to/thumb/5.png);"></a>
      <a href="#enlargement" style="background-image: url(path/to/thumb/6.png);"></a>

      <!-- subpanel -->
      <div id="enlargement" class="Panel">
         <img />
      </div>
   </div>
</nav>

Write some CSS to style the enlargement.

#enlargement {
   padding-left: 0;
   padding-right: 0;
}
#enlargement:before,
#enlargement:after {
   content: none;
}
#enlargement img {
   width: 100%;
   height: auto;
}

Javascript

Fire the plugin and update the src attribute of the enlargement IMG when clicking a thumbnail.

<script>
   $(document).ready(function() {
      $("#my-menu").mmenu();
      $("#thumbnails").find( "a" ).click(function() {
         var src = $(this).attr( "style" );  // "background-image: url(path.to/thumb/1.png);"
             src = src.split( "url(" )[ 1 ]; // "path/to/thumb/1.png);"
             src = src.split( ");" )[ 0 ];   // "path/to/thumb/1.png"
             
             src = src.split( "/thumb/" ).join( "/large/" );

         $("#enlargement").find( "img" ).attr( "src", src );
      });
   });
</script>

Note:
Using the background-image url in the style attribute of the A to find the src attribute for the enlargement is a bit unreliable, but it'll do for this tutorial.

Navbar

Instead of just firing the plugin, we can also add a navbar at the top of the menu with a title.

<script>
   $(document).ready(function() {
      $("#my-menu").mmenu({
         navbar: {
            title: "My photos"
         },
         navbars: [{
            position: "top"
         }]
      });
   });
</script>

Next up:
Learn more