Understanding Image Gallery Settings A comprehensive guide to customizing your image gallery
The description of all settings along with their default values can be found in the following instance. Additionally, the article contains a table displaying the options with their available variants. The application's structure allows multiple instances with different configurations of settings to be placed.
<!-- Content -->
<script src="compsoul.js"></script>
<script src="gallery.js"></script>
<script>
new Gallery(".gallery-item").options({
galleryClassContainer: "compsoul-gallery-container",
galleryClassContent: "compsoul-gallery-content",
galleryClassClose: "compsoul-gallery-close",
galleryClassNext: "compsoul-gallery-next",
galleryClassPrev: "compsoul-gallery-prev",
galleryClassProgress: "compsoul-gallery-progress",
galleryClassItem: "compsoul-gallery-item",
galleryClassImage: "compsoul-gallery-image",
galleryClassComment: "compsoul-gallery-comment",
galleryClassZoom: "compsoul-gallery-zoom",
galleryClassFullScreen: "compsoul-gallery-full-screen",
thumbnailsClassContainer: "thumbnails-container",
thumbnailsClassContent: "thumbnails-content",
thumbnailsClassToggle: "thumbnails-toggle",
thumbnailsClassShow: "thumbnails-show",
thumbnailsClassImage: "thumbnails-image",
classActive: "compsoul-active",
classInactive: "compsoul-inactive",
classNext: "compsoul-next",
classPrev: "compsoul-prev",
classFade: "compsoul-fade",
classPast: "compsoul-past",
classReady: "compsoul-ready",
classResize: "compsoul-resize",
classLoader: "compsoul-loader",
classLoading: "compsoul-loading",
classLoaded: "compsoul-loaded",
classError: "compsoul-error",
classZoom: "compsoul-zoom",
classZoomOut: "compsoul-zoom-out",
classOverflow: "compsoul-overflow",
classDirectionNext: "compsoul-direction-next",
classDirectionPrev: "compsoul-direction-prev",
classPlay: "compsoul-play",
classHidden: "compsoul-hidden",
classUnset: "compsoul-unset",
classDrag: "compsoul-drag",
classDisorderly: "compsoul-disorderly",
classLogo: "compsoul-logo",
selector: selector,
close: true,
closeDelay: 200,
next: true,
prev: true,
album: false,
albumStart: 0,
preload: true,
counter: true,
loop: true,
zoom: true,
zoomDelay: 400,
overflow: true,
hash: true,
thumbnails: true,
keyNext: ["ArrowRight", "d", "KeyD"],
keyPrev: ["ArrowLeft", "a", "KeyA"],
keyClose: ["Escape", "x", "KeyX"],
keyCounter: ["Space"],
keyThumbnails: ["t", "KeyT"],
keyZoom: ["z", "KeyZ"],
responsive: {
400: {
loop: false
},
800: {
loop: true
},
1300: {
loop: false
}
}
}).init();
</script>
</body>
</html>Settings Description Table
The added table contains a detailed description of the gallery settings, along with their purpose and available options. The module can be freely expanded by editing the gallery.js file. Selected options have dedicated sub-pages where they have been discussed in more detail.
| Property Name | Default Value | Available Options | Description |
|---|---|---|---|
| close | true | boolean (true, false) | Option responsible for closing the gallery window |
| closeDelay | 200 | number (numbers) | The time needed to complete the gallery window closing animation |
| next | true | boolean (true, false) | Option responsible for launching the next photo |
| prev | true | boolean (true, false) | Option responsible for launching the previous photo |
| album | false | boolean (true, false) | Option responsible for loading a list of photos from other pages |
| albumStart | 0 | number (numbers) | Option indicating the first photo in the album |
| preload | false | boolean (true, false) | Option responsible for preloading photos. This is a test option and should be used with caution, as Chromium does not block the ability to load an unlimited number of photos. With large galleries, it is easy to deplete the user's RAM resources. |
| counter | true | boolean (true, false) | Option responsible for showing slides |
| loop | true | boolean (true, false) | Option allowing gallery looping |
| zoom | true | boolean (true, false) | Option allowing maximum photo zoom |
| zoomDelay | 400 | number | Time necessary to perform the animation of closing the maximally zoomed photo |
| overflow | true | boolean (true, false) | Option hiding the page scrollbar |
| hash | true | boolean (true, false) | Option opening the gallery based on the hidden variable in the URL bar |
| thumbnails | true | boolean (true, false) | Option responsible for displaying thumbnails |
| keyNext | ["ArrowRight", "d", "KeyD"] | array | Option containing an array of keyboard key codes, responsible for changing the photo |
| keyPrev | ["ArrowLeft", "a", "KeyA"] | array | Option containing an array of keyboard key codes, responsible for changing the photo |
| keyClose | ["Escape", "x", "KeyX"] | array | Option containing the keyboard key code array responsible for closing the gallery |
| keyCounter | ["Space"] | array | Option containing the keyboard key code array responsible for controlling the slide show |
| keyThumbnails | ["t", "KeyT"] | array | Option containing the keyboard key code array responsible for controlling the thumbnail list |
| keyZoom | ["z", "KeyZ"] | array | Option containing the keyboard key code array responsible for controlling the maximum zoom function of the picture |
| responsive | {} | object | Object storing a series of settings responsible for changing the module's behavior on different resolutions. More information in the RWD tab |
Module Nomenclature
| Property Name | Default Value | Available Variants | Description |
|---|---|---|---|
| galleryClassContainer | "compsoul-gallery-container" | string (text) | CSS class name of the element representing the gallery content |
| galleryClassContent | "compsoul-gallery-content" | string (text) | CSS class name of the element representing the list of photos |
| galleryClassClose | "compsoul-gallery-close" | string (text) | CSS class name of the element responsible for closing the gallery |
| galleryClassNext | "compsoul-gallery-next" | string (text) | CSS class name of the element responsible for changing the slide |
| galleryClassPrev | "compsoul-gallery-prev" | string (text) | CSS class name of the element responsible for changing the slide |
| galleryClassProgress | "compsoul-gallery-progress" | string (text) | CSS class name of the element responsible for the temporary slide change |
| galleryClassItem | "compsoul-gallery-item" | string (text) | CSS class name of the element representing the content of each photo |
| galleryClassImage | "compsoul-gallery-image" | string (text) | CSS class name of the element representing each image |
| galleryClassComment | "compsoul-gallery-comment" | string (text) | CSS class name of the element representing the content of each comment |
| galleryClassZoom | "compsoul-gallery-zoom" | string (text) | CSS class name of the element responsible for the zoom function |
| galleryClassFullScreen | "compsoul-gallery-full-screen" | string (text) | CSS class name of the element representing the zoomed image content |
| thumbnailsClassContainer | "thumbnails-container" | string (text) | CSS class name of the element representing the list of thumbnails content |
| thumbnailsClassContent | "thumbnails-content" | string (text) | CSS class name of the element representing the list of thumbnails content |
| thumbnailsClassToggle | "thumbnails-toggle" | string (text) | CSS class name of the element responsible for displaying the list of thumbnails |
| thumbnailsClassShow | "thumbnails-show" | string (text) | CSS class name of the element responsible for displaying the list of thumbnails |
| thumbnailsClassImage | "thumbnails-image" | string (text) | CSS class name of the element representing the content of a single thumbnail |
| classActive | "compsoul-active" | string (text) | CSS class name responsible for activating individual elements |
| classInactive | "compsoul-inactive" | string (text) | CSS class name responsible for deactivating individual elements |
| classNext | "compsoul-next" | string (text) | CSS class name responsible for animations |
| classPrev | "compsoul-prev" | string (text) | CSS class name responsible for animations |
| classFade | "compsoul-fade" | string (text) | CSS class name responsible for animations |
| classPast | "compsoul-past" | string (text) | CSS class name responsible for animations |
| classReady | "compsoul-ready" | string (text) | CSS class name responsible for rendering process |
| classResize | "compsoul-resize" | string (text) | CSS class name responsible for RWD |
| classLoader | "compsoul-loader" | string (text) | CSS class name responsible for rendering process |
| classLoading | "compsoul-loading" | string (text) | CSS class name responsible for rendering process |
| classLoaded | "compsoul-loaded" | string (text) | CSS class name responsible for rendering process |
| classError | "compsoul-error" | string (text) | CSS class name responsible for rendering process |
| classZoom | "compsoul-zoom" | string (text) | CSS class name responsible for photo zoom function |
| classZoomOut | "compsoul-zoom-out" | string (text) | CSS class name responsible for photo zoom-out function |
| classOverflow | "compsoul-overflow" | string (text) | CSS class name responsible for hiding page scrollbar |
| classDirectionNext | "compsoul-direction-next" | string (text) | CSS class name responsible for animation direction |
| classDirectionPrev | "compsoul-direction-prev" | string (text) | CSS class name responsible for animation direction |
| classPlay | "compsoul-play" | string (text) | CSS class name responsible for slideshow display |
| classHidden | "compsoul-hidden" | string (text) | CSS class name responsible for hiding elements |
| classUnset | "compsoul-unset" | string (text) | CSS class name responsible for gallery animations |
| classDrag | "compsoul-drag" | string (text) | CSS class name responsible for interactions |
| classDisorderly | "compsoul-disorderly" | string (text) | CSS class name responsible for gallery animations |
| classLogo | "compsoul-logo" | string (text) | CSS class name of the element representing the Compsoul company logo |
Thank You for Reading
We hope you enjoyed this post! If you did, please consider following us on Facebook and leaving a like and a comment. If you have any questions or need assistance, feel free to use our contact form or email us at daniel@compsoul.dev. For urgent inquiries, you can reach us by phone at +48 732 846 416.