A plugin for lightgallery which adds an exif panel
- Copy the files from the
distfolder 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.
-
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.
-
Use data attributes for images in the gallery. Below is a list of data attributes / corresponding exif names
| 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 |
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
- jQuery based lightweight photo gallery: lightgallery
- Simple js map library: LeafletJS
- Exif parsing library: exif-js
- RobG for his take on exif dates: stackoverflow