If all the rest was easy, wait to see how Lightbox just fits in. Have you ever clicked on an image an it opened big on top of the rest of the content? Sure. That’s maybe Lightbox. To get it working for your images you just have to add a link to the images, one that points to the full size of the image, containing a data attribute of your choice. All pictures with the same data attribute will form a gallery and will be linked together with navigation links for the next and the previous. Bam— all of a sudden we have a nice photo overlay and a gallery! Now, the container would look like this:

<div id="container">
	 <div class="item small">
	 	<a href="images/images1-full.jpg" data-lightbox="snapshots">
	 		<img class="snap" alt="" src="images/images1.jpg" />
	 <div class="item small">
	 	<a href="images/images2-full.jpg" data-lightbox="snapshots">
	 		<img class="snap" alt="" src="images/images2.jpg" />
	 <div class="item small">
	 	<a href="images/images3-full.jpg" data-lightbox="snapshots">
	 		<img class="snap" alt="" src="images/images3.jpg" />


*For it to work you need to be sure you copy the css and img folders too into the project.

Troubleshooting —positioning

By default Lightbox will detect which side —horizontal or vertical— is bigger in relation to the viewer’s aspect ratio, scale that and calculate the other while saving the proportion of the image. That is to fit both, height and width, inside the screen (and also centered). But trying on some WordPress installs directly, overloaded with actions and filters, may prevent from functioning correctly and give you a headache. As always, try on a blank canvas first, before you spend hours and hours looking into the plugin’s code. By the way, I was referring to this function:

preloader.onload = function() {
 	var $preloader, imageHeight, imageWidth, maxImageHeight, maxImageWidth, windowHeight, windowWidth;
 	$image.attr('src', _this.album[imageNumber].link);
 	$preloader = $(preloader);
 	if (_this.options.fitImagesInViewport) {
	 	windowWidth = $(window).width();
	 	windowHeight = $(window).height();
	 	maxImageWidth = windowWidth - _this.containerLeftPadding - _this.containerRightPadding - 20;
	 	maxImageHeight = windowHeight - _this.containerTopPadding - _this.containerBottomPadding - 110;
	 	if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) {
		 	if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) {
			 	imageWidth = maxImageWidth;
			 	imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10);
		 	} else {
			 	imageHeight = maxImageHeight;
			 	imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10);
return _this.sizeContainer($image.width(), $image.height());

Follow to next page to set up everything into a WordPress page template.

Author: Bea Cabrera

Freelance Filmmaker with a passion for big cities, snowboard, cinema and a weakness for the smell of freshly ground coffee. Engineer & Graphic Designer in a previous life, loving and living both: art and technology.  

Leave a Reply

Your email address will not be published.

You may use these <abbr title="HyperText Markup Language">html</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


This site uses Akismet to reduce spam. Learn how your comment data is processed.