Image Gallery Demo 1: Lightbox 2


Image Galleries

One of the nice things about the web is the ability to display images, and display them in a variety of ways. One of the frustrating things about the web is the same. It can be difficult.

Lightbox 2

While trying to figure out how to do all this, I stumbled across Lightbox 2 by Lokesh Dhakar on the web. This is designed to work with Bootstrap and other frameworks, and works pretty well (it doesn't seem to require Bootstrap specifically). Details can be found here: [Lightbox 2].

It took me a while to get it to work the way I wanted, but I ended up with something that was pretty good. However, I ended up rolling my own using Bootstrap's modals -- I have some specific needs for images that were not covered by Lokesh's work and I figured out how to do what I wanted. I have also documented my own version which is in the menu above.

That said, I wanted to show how to set this up, because frankly it wasn't quite as easy as it sounded.

Like a lot of these packages, there are multiple files needed:

The location of the files is important, particularly the images -- that messed me up for awhile (I couldn't figure out why they weren't showing up -- d'oh!).

You also need your images, and a definition of the thumbnail versions of them.

The Styles

In your cascading style sheet for your own web app, or in the page you need the following styles (these are for the thumbnails):

               .gallery_image
               {
                  float: left;
                  width: 220px;
                  height: 305px;
                  border: solid 1px #ccc;
                  margin: 5px;
                  border-radius: 5px;
                  text-align: center;
                  overflow-y: auto;
               }
               
               .gallery_thumbnail
               {
                  border: solid 1px #ccc;
                  border-radius: 2px;
                  background: white;
                  margin-top: 5px;
                  max-width: 200px;
                  max-height: 220px;
               }
               
               /* DIV for the caption/credit text */
               .gallery_title
               {
                  text-align: center;
                  font-size: 16px;
                  margin-top: 15px;
                  margin-bottom: 20px;
               }
               
               .gallery_caption
               {
                  font-weight: bold;
                  font-size: 18px;
                  line-height: 1em;
               }
               
               .gallery_credit
               {
                  font-style: italic;
                  font-size: 14px;
                  line-height: 1em;
               }
            

HTML for Images

Each image needs to use the same set of tags, changing out just the items that need to be changed, the caption, the path to the image name, etc.:

               <div class="gallery_image">
                  <a href="path_to_image/imagename.jpg" data-lightbox="gallery" data-title="caption for image">
                     <img src="path_to_image/imagename.jpg" class="gallery_thumbnail" />
                  </a>
                  <div class="gallery_title">
                     <p class="gallery_caption">caption for image</p>
                     <p class="gallery_credit">Credit: Photographer Credit</p>
                  </div>
               </div> <!-- / gallery_image -->
            

The anchor tag (<a href ...>) has the items that are necessary for the lightbox code to load properly. It looks for the attribute data-lightbox followed by the name of the the gallery. The useful thing here is that if you change this to a different name, you would have a different gallery. So if you wanted three sets of images on a page, you might want to have three different names. The lightbox Javascript code reads all this into arrays, and deals with it appropriately. If there are three images in the first gallery, and four in the second, it can deal with it.

The gallery_title and associated CSS classes are used for text associated with the thumbnail images, and aren't part of Lightbox -- they are for my own image displays.

The example for this will be below, after I show the Javascript, but it will include a set of images from Dath to Stock Photos (website reference will be added at the end of the page).

The Javascript

The following Javascript would go after any script tags used to include Javascript code in your page:

               <!-- lightbox options: -->
               <script>
                  lightbox.option(
                  {
                     'wrapAround' : true,
                     'maxHeight' : 700,
                     'fixedNavigation': true,
                     'alwaysShowNavOnTouchDevices' : true
                  });
               </script>
            

The options are important ...:
"wrapAround" tells the Lightbox code to read all the information in the array and if you use the next button to wrap back to the first image.
"maxHeight" tells Lightbox the maximum height of the image window -- it will never be larger than that (in pixels).
You can see the documentation for other options.

Example Lightbox Image Gallery

The following is a set of images from Death to Stock Photos, all set using the appropriate HTML tags so that we get a set of thumbnail images. Clicking on any of them should bring up the lightbox window and you can see how it works.


I put a break tag in after the last image, but I could also have included the whole set of images in a div tag, with the only purpose being that a div tag breaks up the page at that point. Leaving both of these out would cause, when resizing your screen, the images to wrap correctly, but the text under the last image might end up to the right of it instead.

Summary

That's about all there is to this one. It wasn't as hard to set up as it seemed it ought to be, because the coder who created it (and deserves all the credit) really did the hard work. As noted, the instructions I could find never mentioned the images, or the path to the images used for the close, next/previous, etc buttons on the screen. I was taking a look at the Javascript file and stumbled across the fact that I had not placed them in the "images" folder off the root of the site. Doing so solved the problem.

Of course, to use in a PHP application where you stream out the HTML using PHP this gets a bit more complex. You have to be careful of your delimiters (quotes: single and double quotes -- you can nest them but carefully).

Why did I choose to eventually write my own image gallery instead? Well, I have this crazy idea that it would be nice to be able to, for say, a travelogue, display a description of images that gives details of what is in the image, that kind of thing. Lightbox does not have that ability, and after staring at the code for it, I decided to not try to add it to the existing code. Hence, I ended up rolling my own. If you look in the menu for these pages you will find "Image Gallery" or whatever I used in the menu, and that will point you at what I ended up with.

Credit Where Credit Is Due

As noted, Lokesh Dhakar wrote Lightbox 2. Details can be found here: [Lightbox 2], you can download the master files for it, and place the files in the suggested appropriate places -- all will be well. If you choose to use this, you should of course credit the author of the code.

The photos used are from [Death to Stock Photos]. If you sign up, they will, once a month, email a set of photographs that you can use free for whatever purposes you wish. I have found that they are generally decent photos, and while the topics range all over the place, they can be useful for, if nothing else, examples ...