Simple Image Gallery based gallery plugin, with a focus on providing a responsive gallery for today's responsive websites. Uses Photoswipe and Masonry
You can see this gallery in action on the demo page
To use this plugin simply download zip of this repository, install, enable it and include an activation tag in article where you want your gallery displayed.
Activation tag sintax:
{gallery}my_gallery_folder{/gallery}
by default root folder where plugin will look for mygalleryfolder defined in activation tag is images, this can be changed ins plugins advanced settings.
Caption file should be named captions.txt or en-GB.txt for multilanguage captions. Of course any langue code can be used.
Caption file example:
gal_1.jpg|Caption
gal_2.jpg|Another Caption
gal_3.jpg|Yet Another Caption
Images are currently ordered by name and not by order in the caption file.
Displays images as inline elements, so they wrap around like text would.
Displays images in flexbox grid with specified number of collums per breakpoint.
Displays images using Masonry js library. Its recomended to set thumbnail hieght to 0 so that all images would have the same width (See below).
If you wish to provide thumbnails yourself, set this to true.
Thumbnails must have the same name as the main image, and must be put in thumbnails folder inside your gallery folder my_gallery_folder/thumbnails. If thumbnails for some images are missing, the plugin will attempt to generate them.
Thumbnails are resized to fit in the defined height and width, keeping original aspect ratio.
For examaple if you have an 1500x1000 image and set thubnail height to 200px and width to 200px image will be resized to 133x200, fitting the larger dimention, and resizing the other to keep the aspect ratio.
Its possible to set height to 0, so that all images would have same width and varying heights. Its also possible to set width to 0 to have same heigh and different width for all the images.
Currently retina images have 2x the pixel density, and are loaded in all devices, in future this will be changed to use srcset attribute, and various sized images.
Set to true if you want to use overlay captions. Pure CSS solution, won't look as good in IE8 or lower.
Here you can set:
- Starting (root) folder for your galleries
- Thumbnail quality
- Where from you wish to load requiered engines like Photoswipe and Masonry. By default they are loaded using CDN
- Options that are passed to Photoswipe, as per Photoswipe documentation
Insert a space if you dont wish to pass any custom options to Photoswipe, by default shareEl: false option is passed.
If you want to get a lightbox just like the Minimal style one in Photoswipe demo, pass these options to Photoswipe:
mainClass: 'pswp--minimal--dark', barsSize: {top:0,bottom:0}, captionEl: false, fullscreenEl: false, shareEl: false, bgOpacity: 0.85, tapToClose: true, tapToToggleControls: false