Both of the above approaches requires extra markup in the HTML and CSS. By utilizing CSS Pseudo Elements, html markup will be cleaner and easier to read. The cleanliness and readability of markup and code should always be a web developer’s priority.

Chocolat: a responsive lightbox solution

Chocolat, a simple responsive lightbox solution, was used to display the images on this website. Chocolat may not be able to load videos, maps, or iframes into the DOM, e.g., Magnific Popup; However, these features were not necessary in this project.

The jQuery code below demonstrates how the Chocolat lightbox was called. The title tags were removed on hover to prevent the yellow box from showing up. However, when clicked, the title would show up in Chocolat’s Lightbox:

$('#ldg-images').Chocolat({
loop : true,
fullWindow : false,
overlayOpacity : 0.8
});
$(".chocolat-image").hover(function(){
// Get the current title
var title = $(this).attr("title");
// Store it in a temporary attribute
$(this).attr("tmp_title", title);
// Set the title to nothing so we don't see the tooltips
$(this).attr("title","");
});
$(".chocolat-image").click(function(){// Fired when we leave the element
// Retrieve the title from the temporary attribute
var title = $(this).attr("tmp_title");
// Return the title to what it was
$(this).attr("title", title);
});