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 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>
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; }
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.
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