A compact javascript library for creating an image gallery.
Size: 4.2KB
The aim is extreme simplicity. To have a working gallery, include the script easy-gallery-min.js, give each image you want in a gallery a custom class, and include a single line of javascript to set everything up. That's it. It's not big, ugly, or in your way.
Compare this to PhotoSwipe, which is 54.0KB minified, and requires the developer to include ~20 lines of HTML and ~10 lines of JS to initialize a gallery.
The parameter true in the constructor specifies that I'm taking advantage of Imgur's url sizing format.
Imgur's styling format means that in my markup, I include a b at the end of each image URL. Imgur serves a thumbnail. Easy-gallery will include remove the b when an image is expanded, loading the full size image.
The final parameter is the asset path of the svg files.
var firstGallery = new Gallery("image-group-1", true, "./svg/");<img class='image-group-1' src='http://i.imgur.com/3gBHbzEb.png' />
<img class='image-group-1' src='http://i.imgur.com/PvHMW7fb.png' />
<img class='image-group-1' src='http://i.imgur.com/Lwxrv1db.png' />
<img class='image-group-1' src='http://i.imgur.com/Y8ufw56b.png'
data-caption='A caption example' />- Capture all images
- Images should expand on click
- Images should collapse on "esc"
- Images should not clip off window and should preserve aspect ratio
- Should maintain across window resizes
- Images should be vertically centered
- Should maintain across window resizes
- Gallery should maintain padding between edges and images
- But should remove padding on smaller window sizes
- Gallery should cycle left/right on ←/→
- Gallery should cycle to beginning from end, and vice versa
- Gallery should collapse on press of "X" icon or click outside of image box
- Gallery should move left/right on tap of hit boxes
- Display comments
- Images outside of full-screen mode should be thumbnails
- Imgur API
- Smooth loading
- README documentation
- Optimized for mobile