lightgallery-exif

A plugin for lightgallery which adds an exif panel

Demo

Using It

• Copy the files from the dist folder to your own project.
• You can choose either minified or non-minified, you only need one of the sets - both are not necessary.
• Add the stylesheet + script into your html files (where you created the lightgallery):

<link rel="stylesheet" href="css/lg-exif.min.css">
...
<script src="js/lg-exif.min.js"></script>

There are 2 ways for this plugin to work.

1. Use EXIF info from the image files themseleves. This plugin can scrape the exif info off of the thumbnails that are on the page. This is the simplest if you already have the info hanging around.

2. Use data attributes for images in the gallery. Below is a list of data attributes / corresponding exif names

EXIF Info Provided

| EXIF Value | Data Attribute | |------------|----------------| | Filename | data-filename | | DateTimeOriginal | data-datetimeoriginal | | FNumber | data-fnumber | | ExposureTime | data-exposuretime | | ISOSpeedRatings | data-isospeedratings | | FocalLength | data-focallength | | LensModel | data-lensmodel | | Model | data-model | | Make | data-make | | GPSLatitude | data-gpslatitude | | GPSLongitude | data-gpslongitude | | GPSLatitudeRef | data-gpslatituderef | | GPSLongitudeRef | data-gpslongituderef | | GPSAltitude | data-gpsaltitude |

Building It

It couldn't be much easier to get a minifed version from scratch!

$ npm install
$ npm install -g gulp-cli     # If you don't already have gulp globally installed
$ gulp

Attributions

• jQuery based lightweight photo gallery: lightgallery
• Simple js map library: LeafletJS
• Exif parsing library: exif-js
• RobG for his take on exif dates: stackoverflow