Off-canvas grid gallery is a great solution for displaying photos in an eye-catchy way.
Creating galleries is always a challenge for designers and developers. Every web professional is aware of the simple lightbox solution that displays images in a nice gallery and when a particular image is clicked,the same is shown on the screen on the top of all content. This solution is widely adopted all over the web and I am wondering why not use something different and more appealing.
Luckily, the web is evolving every day and many developers are creating new solutions to show visual content in more appealing way.
The solution for today is a wonderful jQuery plugin that can be used on photography or artistic websites to show work in a great way.
This plugin is very lightweight and it can be implemented on whatever framework you are using to build websites. It also has an option to add text under the image so artists will be happy as they can add explanations for their works.
All in all, this is a lovely plugin that will be a great choice for any website that needs an eye-catchy grid gallery.
Let’s have a look at the steps to implement off-canvas grid gallery. Make sure that you check the demo below.
HTML
First of all, you need to create the structure for the images. To do so, create a list of thumbnails for the gallery as it is shown below.
<main role="main" id="main"> <section class="tiles-a"> <ul> <li> <a href="#" style="background: url('thumb-1.jpg'); background-size: cover;" aria-controls="aside" aria-expanded="false"> <div class="details visually-hidden"> <img src="large-1.jpg" alt="Image Alt"> <div class="text-copy wrapper"> <h3>Title 1</h3> <p>Descriptiont 1</p> </div> </div> </a> </li> <li> <a href="#" style="background: url('thumb-2.jpg'); background-size: cover;" aria-controls="aside" aria-expanded="false"> <div class="details visually-hidden"> <img src="large-2.jpg" alt="Image Alt"> <div class="text-copy wrapper"> <h3>Title 2</h3> <p>Descriptiont 2</p> </div> </div> </a> </li> <li> <a href="#" style="background: url('thumb-3.jpg'); background-size: cover;" aria-controls="aside" aria-expanded="false"> <div class="details visually-hidden"> <img src="large-3.jpg" alt="Image Alt"> <div class="text-copy wrapper"> <h3>Title 3</h3> <p>Descriptiont 3</p> </div> </div> </a> </li> </ul> </section> </main>
Next step is to create an off-canvas are for the larger version of the images with the help of the aside tag:
<aside role="complementary" id="aside" aria-hidden="true" aria-expanded="false"> <a href="#" class="close"> <img src="close.svg" alt="Close button"> <span class="visually-hidden">Return to main content </span> </a> <div class="aside--details" tabindex="0" aria-live="polite" aria-atomic="true" aria-label="Image details"> </div> </aside>
CSS
To make this piece of code pretty we should some CSS3 styles.
* { box-sizing: boder-box; }
body { margin: 0; }
#main {
position: relative;
z-index: 20;
background: #fff;
-webkit-transition: -webkit-transform .6s ease;
transition: transform .6s ease;
}
@media (min-width: 640px) {
#main { padding: 1em; }
}
.fake-section {
background: #eee;
height: 300px;
}
.tiles-a {
width: 100%;
position: relative;
overflow: hidden;
}
.tiles-a ul {
margin: 0;
padding: 0;
}
.tiles-a li { list-style: none; }
@media (min-width: 640px) {
.tiles-a li {
float: left;
width: 33.33%;
}
}
.tiles-a a {
margin: 1em;
display: block;
background: #222;
padding-top: 73%;
height: 0;
}
#aside {
position: fixed;
top: 0;
right: 0;
width: 60%;
height: 100%;
background: #eee;
overflow-y: scroll;
z-index: 10;
}
#aside img {
width: 100%;
height: auto;
vertical-align: top;
}
#aside .wrapper { padding: 1em; }
#aside .close {
width: 25px;
display: block;
position: absolute;
top: 1em;
right: 1em;
background-color: rgba(0, 0, 0, 0.5);
border-radius: 50%;
}
.show-detail { overflow: hidden; }
.show-detail #main {
-webkit-transform: translateX(-60%);
-ms-transform: translateX(-60%);
transform: translateX(-60%);
}
.visually-hidden {
position: absolute;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
Adding the jQuery library
At this point, we should link the jQuery library and add the required plugin.
<script src="jquery-2.1.4.min.js"></script> <script src="toggleAria.js"></script>
A pinch of code magic.
In order to finish off the grid gallery, we should add some code to activate it all.
var $parent = $("#main"),
$aside = $("#aside"),
$asideTarget = $aside.find(".aside--details"),
$asideClose = $aside.find(".close"),
$tilesParent = $(".tiles-a"),
$tiles = $tilesParent.find("a"),
slideClass = "show-detail";
// tile click
$tiles.on("click", function(e){
e.preventDefault();
e.stopPropagation();
if(!$("html").hasClass(slideClass)){
$tiles.removeClass("active");
$(this).addClass("active");
$(this).attr("aria-expanded","true");
loadTileData($(this));
}else{
killAside();
$(this).attr("aria-expanded","false");
}
});
// kill aside
$asideClose.on("click", function(e){
e.preventDefault();
killAside();
});
// load data to aside
function loadTileData(target){
var $this = $(target),
itemHtml = $this.find(".details").html();
$asideTarget.html(itemHtml);
showAside();
}
// show/hide aside
function showAside(){
if(!$("html").hasClass(slideClass)){
$("html").toggleClass(slideClass);
$aside.attr("aria-hidden","false");
focusCloseButton();
}
}
// handle esc key
window.addEventListener("keyup", function(e){
// grab key pressed
var code = (e.keyCode ? e.keyCode : e.which);
// escape
if(code === 27){
killAside();
}
}, false);
// kill aside
function killAside(){
if($("html").hasClass(slideClass)){
$("html").removeClass(slideClass);
sendFocusBack();
$aside.attr("aria-hidden","true");
$tiles.attr("aria-expanded","false");
}
}
// send focus to close button
function focusCloseButton(){
$asideClose.focus();
}
// send focus back to item that triggered event
function sendFocusBack(){
$(".active").focus();
}
// handle body click to close off-canvas
$parent.on("click",function(e){
if($("html").hasClass(slideClass)){
killAside();
}
});