Coding a Responsive Lightbox Image Gallery for Website Portfolios
Plenty of free open source plugins have been created for managing online portfolios. You can build image carousel sliders, popup galleries, modal windows, or similar effects with just a few blocks of JavaScript. But coding a responsive portfolio requires some extra care and attention to finer details.
Live Demo - Download Source Code
In this tutorial I want to demonstrate how you can build a fully-responsive lightbox gallery for any type of portfolio. I'll be working with the Magnific Popup plugin which is free to download and include on any web project. The gallery supports responsive design with an easy setup using the jQuery library.
Getting Started
First we'll need to download a copy of the Magnific Popup plugin along with the latest jQuery library. Magnific Popup includes both a .JS and .CSS file which needs to be added into the primary HTML page. Along with these resources I've also created my own stylesheet named styles.css.
<!doctype html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html"> <title>Responsive Lightbox Portfolio Gallery - Template Monster Demo</title> <meta name="author" content="Jake Rocheleau"> <link rel="shortcut icon" href="http://static.tmimgcdn.com/img/favicon.ico"> <link rel="icon" href="http://static.tmimgcdn.com/img/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="css/styles.css"> <link rel="stylesheet" type="text/css" media="all" href="css/magnific-popup.css"> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script> </head> <body> <div id="wrapper"> <h1>Responsive Lightbox Portfolio</h1> <ul id="portfolio" class="clearfix"> <li></li> <!-- https://dribbble.com/shots/1543255-Brick-and-Bay-Windows --> <li></li> <!-- https://dribbble.com/shots/1543899-iPad-icons --> <li></li> <!-- https://dribbble.com/shots/1543085-Profile --> <li></li> <!-- https://dribbble.com/shots/1543210-574 --> <li></li> <!-- https://dribbble.com/shots/1543610-Rive-Radio-app-icon-design --> <li></li> <!-- https://dribbble.com/shots/1543316-Blood-Pressure-App --> <li></li> <!-- https://dribbble.com/shots/1544255-Memories-Feed --> <li></li> <!-- https://dribbble.com/shots/1544323-bc-pixels-fluid --> </ul> </div> <script type="text/javascript"> $(function(){ $('#portfolio').magnificPopup({ delegate: 'a', type: 'image', image: { cursor: null, titleSrc: 'title' }, gallery: { enabled: true, preload: [0,1], // Will preload 0 - before current, and 1 after the current image navigateByImgClick: true } }); }); </script> </body> </html> |
The portfolio gallery itself is quite simple and doesn't require a whole lot of excess HTML. I've setup my example using an unordered list since most developers find this to be an easy solution. We need a hyperlink or another HREF value to indicate the full popup image, along with an inner thumbnail image to display on the page.
You'll notice I've added some additional text onto each link with the title attribute. This can be displayed in the lightbox using a plugin option which I'll explain later. If the viewer has JavaScript disabled then clicking on a thumbnail will lead directly to the full-sized image source as a fallback method.
The plugin allows for a responsive lightbox by default, however we need to write some extra CSS media queries to make the thumbnails responsive. Since the UL element holds a number of internal floating thumbnails I've included the .clearfix class onto this container. It creates a more flexible design when using percentage width values.
CSS Layout Design
The most important piece of my custom CSS is the responsive portfolio container. What's the use of a responsive lightbox plugin if the layout isn't even responsive? Sounds like the start of a bad joke with no punchline.
But thankfully it's pretty easy to setup a responsive layout using this portfolio container. We just need to create fluid widths for each unordered list item and use media queries to break down rows into columns.
/** page structure **/ #wrapper { display: block; max-width: 1100px; margin: 0 auto; } #portfolio { display: block; } #portfolio li { display: block; float: left; width: 30%; max-width: 400px; margin-right: 20px; margin-bottom: 20px; } #portfolio li a { display: block; padding: 8px; background: #fff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.25); -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.25); box-shadow: 1px 2px 2px rgba(0,0,0,0.25); } .mfp-title { font-size: 1.2em; color: #ddd !important; font-weight: 700; } |
The entire webpage is contained inside a #wrapper div which expands to a maximum width of 1100px. This can become smaller down to any reasonable screen size and the images should resize appropriately. This is because I've setup each list item to use a width of 30% to allow 3 images per row. The anchor links use box shadows and extra padding for a cleaner thumbnail effect.
The very last selector .mfp-title targets caption text found on the lightbox popup window. It's a class setup by the plugin and I'm simply updating the text to appear larger and easier to read against the darker background.
/** media queries **/ @media screen and (max-width: 780px) { #portfolio li { width: 45%; } } @media screen and (max-width: 550px) { #portfolio { text-align: center; } #portfolio li { float: none; display: inline-block; width: 80%; margin-bottom: 30px; } } |
Finally at the bottom of my stylesheet you'll notice this block of media queries. The two breakpoints occur at 780px and 550px for two-item rows and single-item rows, respectively. Because the image thumbnails are flexible they will continually resize smaller as the window gets smaller.
At a certain point 3 items per row appear way too small and don't provide a great user experience. This can be fixed by increasing the size of each list item, which also increases the size of each internal thumbnail. Below a viewport of 551px the images stop floating and become centered in the layout with 1 thumbnail per row.
Initializing Magnific Popup
Having already included the CSS/JS files, all we need to do is setup the final jQuery code snippet. This requires a number of options which can be understood by glossing over the official documentation. But I'll explain each one for this example so it's a bit clearer.
$(function(){ $('#portfolio').magnificPopup({ delegate: 'a', type: 'image', image: { cursor: null, titleSrc: 'title' }, gallery: { enabled: true, preload: [0,1], // Will preload 0 - before current, and 1 after the current image navigateByImgClick: true } }); }); |
This jQuery selector is targeting the entire #portfolio container which is necessary for the gallery to work properly. This doesn't need to be an unordered list, just some type of container element. After calling the magnificPopup() method I've passed a number of options used for customizing the script.
First is delegate which references the child element within the container used as a click event handler. Whenever a user clicks any of the internal anchor links we should display a new lightbox. The default type is image but this can be setup to work with other types such as video or even plain HTML.
Inside this image type is another set of options we can customize. cursor updates to a regular pointer because the default is a magnifying glass. Also titleSrc is how we can apply each title attribute onto the lightbox as caption text. It's possible to set this as any other attribute like data-caption or even write your own custom function.
The last block contains gallery options which setup the image gallery. This allows viewers to rotate between images instead of using individual lightboxes for each one. preload is a nice option which pulls the image source from the current and next gallery item automatically. You can find a complete list of options from the gallery section on the plugin documentation page.
Closing
As a designer myself I've learned how important it is to build a solid portfolio. Not just the work quality(which is essential) but also the interface design. Responsive portfolios are definitely the best option when searching for jobs or potential freelance clients who may be accessing your website from any screen size. Although this tutorial is somewhat of a basic example, you should see how easy it is to expand this plugin to fit any type of website layout.
First it was design, then writing, and now affiliate marketing. Over a period of 6-7 years he wrote a lot of content for many websites. You can reach Jake on Twitter.
Get more to your email
Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.
Leave a Reply
You must be logged in to post a comment.