An ES6 JavaScript accordion gallery component.
<div id="acc-container"></div>
<script>
import { buildGallery } from 'accordion-gallery-min.js';
const options = {
//Required.
images: [{
image: 'images/1.jpg',
caption: 'This is a caption with a button.',
buttonText: 'Click me!',
buttonLink: 'https://www.pexels.com/photo/grayscale-photography-of-woman-1572878/'
}],
//Defaults / Optional.
linksInNewTab: true,
captionPosition: 'bottom',
captionBkgColor: 'rgba(255,255,255,0.75)',
featuredImage: undefined,
featuredWidth: 5,
media: {
320: [0, 1, 2, 3],
425: [0, 1, 2],
768: [5, 6]
},
galleryWidth: '100%',
galleryHeight: '100vh',
opacity: 0.25,
shadow: true,
speed: 300,
radius: 0,
scale: 1
};
buildGallery(options);
</script>The options parameter must be passed to the buildGallery() function as an object.
All options (except images) have a default value so you need only specific the options that you wish to explicitly set.
Type: Array
Set the images as well as any captions or buttons. Each image must be added as an object and can include image as a URL, caption as a string, buttonText as a string and buttonLink as a URL.
Example:
images: [{
image: 'images/1.jpg',
caption: 'This is a caption with a button.',
buttonText: 'Click me!',
buttonLink: 'https://www.pexels.com/photo/grayscale-photography-of-woman-1572878/'
},
{
image: 'images/2.jpg',
buttonText: 'Solo button!',
buttonLink: 'https://www.pexels.com/photo/grayscale-photo-of-topless-woman-1164674/'
},
{
image: 'images/3.jpg',
caption: 'This is a solo caption.',
},
{
image: 'images/4.jpg'
}
]Type: boolean
Specifies if clicked buttons should open in a new tab or within the current tab.
Example:
linksInNewTab: trueType: string
Accepts: 'noopener' || 'noreferrer'
Specifies the link type for cross-origin destinations.
Example:
linkType: 'noopener'Type: string
Accepts: 'top' || 'middle' || 'bottom'
Specifies where on the image the caption and button should appear.
Example:
linksInNewTab: 'top'Type: string
Accepts: Any color format as a string.
Specifies the background color for the caption and button container.
Example:
captionBkgColor: '#000' //Sets the container to a black background.Type: number
Accepts: A number equal to one of the images in the gallery. Images are zero indexed so if you want to feature the first image, you must specify 0 as the value.
Specifies an image to focus as a feature. This image is always expanded when the user is not interacting with the gallery.
Example:
featuredImage: 3 //Features the 4th image.Type: number
Accepts: A number above 1.
Specifies the width of the hovered/featured image. A greater number will provide a larger feature.
Example:
featuredWidth: 3Type: object
Accepts: Any key as a number followed by an array as a value.
Specifies break points at which the gallery should shrink to show less images. The array specifies which images should be removed. Again, images are zero indexed so removing images 1 & 2 would mean adding [0, 1].
Example:
{
320: [0, 1, 2, 3], //Removes images 1,2,3,4 on screens equal to or less than 320px wide.
425: [0, 1, 2], //Removes images 1,2,3 on screens equal to or less than 425px wide.
768: [5, 6] //Removes images 6,7 on screens equal to or less than 768px wide.
}Type: string
Accepts: Any width value as a string.
Specifies the width of the gallery on the page.
Example:
galleryWidth: '100%'Type: string
Accepts: Any height value as a string.
Specifies the height of the gallery on the page.
Example:
galleryHeight: '100vh'Type: number
Accepts: Any number value between 0 - 1.
Specifies the opacity of the un-hovered images.
Example:
opacity: 0.25Type: boolean
Specifies if hovered images should have a box-shadow.
Example:
shadow: trueType: number
Accepts: Any number above 0.
Specifies the transition speed of the gallery. This is set in ms so a value of 1000 = 1 second.
Example:
speed: 300 //Equal to 0.3 seconds.Type: string
Accepts: Any radius value as a string.
Specifies the border radius for caption containers and images on hover.
Example:
radius: '50px'Type: number
Accepts: Any number below 1.
Specifies the scale rate for un-hovered images.
Example:
scale: 0.75Check out the gallery from the demo folder.
Tim Dunphy
This project is licensed under the MIT License - see the LICENSE.md file for details.
Thank you to the following for providing outstanding photography for the demo gallery.
Thank you to @ZephSibley for the help with testing.