Photo Album - Adaptive Photo Gallery with Albums

What this solution does

The module adds Lightbox-style image scaling functionality to the photo album.

Settings are divided into two groups. In the general parameters, you can select a specific site for the module to operate within a multi-site environment. Toggles are also available to connect external libraries: jQuery, a mouse wheel handling library, and the Easing animation library.

In the Fancybox configuration section, the plugin can be enabled or disabled. A jQuery wrapper for initialization can be configured. Users can set padding in pixels around the content inside the Fancybox window for the top, right, bottom, and left sides. Parameters are also provided to set the minimum spacing between the visible viewport and the Fancybox window for the top and right sides.

The module provides configuration options for Fancybox. Users can set minimum margins from the viewport bottom and left in pixels. Default width and height values in pixels can be defined for content types including iframe, SWF, inline, AJAX, and HTML. When resizing dynamically, settings allow specifying minimum and maximum width, as well as minimum and maximum height in pixels. The system supports enabling or disabling automatic size calculation, recalculating dimensions upon browser window changes, and adjusting Fancybox size to match the browser viewport.

The Photo Album module provides an adaptive gallery with album support. Settings allow enabling or disabling automatic sizing of content based on its aspect ratio. Coefficients for horizontal and vertical centering can be configured. Users can control the creation or hiding of scrollbars, assign CSS classes to element wrappers, and enable or disable the display of navigation arrows and the close button. Click behavior on content is configurable: options include closing the Fancybox window, advancing to the next gallery item, or disabling these actions. Mouse wheel navigation can be enabled or disabled. Slideshow mode with a configurable duration for displaying one slide (in seconds) and cyclic navigation are also available. To optimize performance, the number of images to preload can be set. Disabling navigation and the close button switches the Fancybox window to modal mode.

The module allows enabling or disabling the prevention of horizontal scrolling for frames and HTML content. Settings let you specify the effect, animation type, and duration in seconds for both opening and closing an image. For the elastic effect, there is an option to control transparency. You can also select Fancybox transition methods for opening and closing images. Additionally, the effect and animation duration for the button used to navigate to the next image are configurable.

The module provides flexible configuration for image navigation. For both next and previous image buttons, you can set the animation type, its duration in seconds, and the Fancybox transition method. Gallery settings allow control over thumbnail display, including specific width and height parameters, as well as toggling the visibility of titles and control buttons. Fancybox output for media content is also independently configurable. Within the Fancybox 3 settings section, you can enable or disable infinite navigation.

The module provides flexible gallery display settings. Users can set the distance between slides in pixels and choose an open/close animation effect: zoom, zoom-in-out, fade, or none. Animation duration is adjustable in milliseconds. Visibility of navigation elements is controllable, including arrows, an information panel with an image counter, the toolbar, and the close button. The close button mode can be set to automatic, always visible, or disabled. Keyboard navigation, caption overlap prevention, and modal mode can be toggled on or off. Each functional button—zoom, share, slideshow, fullscreen, download, and thumbnails—has an independent enable/disable setting. An image protection option is also available, which disables the right-click context menu.

The module provides flexible gallery display settings. Users can select the transparency mode during scaling (auto, true, false) and the transition effect between slides (slide, circular, tube, zoom-in-out, rotate, or none). Transition duration is configurable in milliseconds. Options include hiding the scrollbar, enabling automatic focus on open, and returning focus on close. Focus can be kept inside the modal window. Fullscreen mode can be enabled automatically. Vertical dragging and inertia scrolling are supported. Slideshow settings allow automatic start and speed adjustment in milliseconds. Thumbnails can be shown automatically, hidden on close, assigned a parent class (.fancybox-container), and oriented vertically or horizontally. Mouse wheel scrolling behavior is configurable (auto, true, false).

Slide click behavior: select the action on click (close or none).

Lightbox settings:

enable or disable the Lightbox module;

specify a jQuery wrapper to initialize Lightbox.

Component settings for Photo Album - Adaptive Photo Gallery with Albums (kssite.ksphotoalbum):

select the component template, infoblock type, and infoblock;

manage page addresses;

configure AJAX mode;

configure caching.

Additional parameters:

set the page modification time in response headers;

set the page title;

include the section in the navigation chain.

Album list settings:

select an album template (10 options available);

set the number of photos per album;

limit the maximum display depth of sections;

choose the container type (when using Bootstrap: the container class limits width to 1170px, container-fluid spans the full screen width);

set the number of columns for mobile devices (screen width less than 768px).

The Photo Album module provides an adaptive gallery with album support. Settings allow flexible management of display across different devices: for phones (width under 768px), tablets (768px to 992px), and desktops (992px to 1200px and over 1200px). A specific number of columns can be set for each range. The spacing between albums in pixels is also configurable.

In the photo list settings, three display templates are available. You can enable or disable the display of each photo's title. When integrating with Bootstrap, the container type can be selected: standard (maximum width 1170px) or full-width (container-fluid). For the photo list, similar to albums, the number of columns can be set separately for all device types, and the spacing between photos in pixels can be defined.

Image viewing supports Lightbox and Fancybox modes. Users can set the limit for the number of photos per page and configure sorting parameters.

The module supports configuration of pagination and customization of the 404 error page.

The Photo Albums List component (ksphotoalbum.section.list) displays a list of albums. Users can select from ten available component templates. Core parameters allow specifying the information block type, selecting a specific information block, and defining the section ID or section code. For layout, a container type can be chosen: the container class limits width to 1170 pixels, while container-fluid extends content to the full screen width. The number of columns is adjustable for mobile devices (width under 768px), tablets (768px to 992px), and desktops in two ranges: 992px to 1200px and over 1200px. The spacing between albums is set in pixels.

Additional settings include data source configuration, link template options, caching rules, and other parameters.

The Photos List from Album component (ksphotoalbum.section) renders a list of images within a specific album.

The Photo Album module by KS Web Studio implements an adaptive gallery with album support. Three component templates are available for selecting the information block type and specific block. Data source settings allow flexible content management.

The appearance section lets you set the number of photos per page and choose a container type: 'container' (maximum width 1170 pixels) or 'container-fluid' (full screen width) when using Bootstrap. The number of columns can be configured separately for mobile devices (width under 768 pixels), tablets (768 to 992 pixels), and desktop screens in two ranges: 992 to 1200 pixels and over 1200 pixels. The spacing between photos is adjustable in pixels.

Image viewing modes include Lightbox or Fancybox. Photo sorting settings are available. The link template section includes management of page URLs, AJAX mode, caching, pagination, and 404 error handling.

General iT can install and configure this module and check how it works on your website.