Mapping Morton Village: Lightbox Images and Captions

During the past few weeks, we’ve focused on getting some technical aspects of the site figured out. I focused on making our images more interactive by giving each one Lightbox attributes, which makes the images/captions larger and ‘pop-out’ from the page. We also gave images captions on the page and in the Lightbox pop-up, though we still need to write captions for many of the images. For the captions on the page, I created a separate div-class for captions in our main CSS file, which centers the caption underneath the images and provides the styling for the caption boxes (white font in a gray box).

Here you can see the Lightbox attributes for an image on our ‘about’ page.

Here you can see how we added captions to images on the page.

Lightbox was a little difficult for me, I’d been working on it for a while before I figured it out. I found that the instructions at this site: http://lokeshdhakar.com/projects/lightbox2/ were much clearer than any other instructions I found.

To add Lightbox to your images, first download the JS and CSS Lightbox files and the ‘Images’ file, then upload these files to your data management site (we use a github repository). Next add the JS and CSS stylesheets to your html –  CSS to the beginning of the html and JS to the end of the html.

Here you can see the code for adding the Lightbox CSS to your HTML pages.

Here you can see how we added our Javascript file to our HTML pages.

Next, add the Lightbox attributes to your images, the ‘data-lightbox’ attribute in the code is used to group images (i.e. using the same ‘data-lightbox’ attribute will place the images in a sequence), while the ‘data-title’ attribute is the image caption. Next, revise the Lightbox CSS to update the relative path of the ‘images’ for the previous and next arrow, closing, and loading images.

Here you can see the code to add Lightbox attributes to your images.

If you have any questions about adding Lightbox attributes to your images, please post a comment! Autumn’s next blog post will focus on adding the intro pop-up to the map page.