Module - Album

Module - Album

• Album - choose DJ-MediaTools album to display

• Preset - inherit / None

• Album layout - choose album layout from the list or overrides in templates

Album settings

• Sort by - sort items by ordering (components) / file names (folder) or randomize the ordering

• Items limit - set the maximum number of items to be loaded into the album

• Skip first X items - you can skip first few album items to start displaying album from some desire item

• Space between images - space between images in pixels

• Image on-click behaviour - choose the action of clicked image. 'Open image in a lightbox' will open a full-size image with a lightbox-like script

• Video playback - choose whether the full video should be played in the popup window or directly in the slideshow

• Use watermarks - allows applying watermarks onto images

• Include Google Fonts - show module include fonts from Google font

• Show EXIF - show or hide EXIF info from image file

• EXIF Info - choose which EXIF info show and in what order

Images Dimensions

• Image width - image width in pixels

• Image height - image height in pixels

• Image resizing - select the method of resizing images

• Image quality - Set the quality

• Thumbnail width - thumbnail width in pixels

• Thumbnail height - thumbnail height in pixels

Effects

• Images effect - select the images effect transition

• Ken Burns Effect - slowing zoom and panning the image instead of displaying a static image

• Transition effect - choose the transition effect from the list

• Transition effect type - apply the effect at the beginning/end of the transition or leave 'auto' to let the system choose

• Slide effect duration - set transition effect duration in milliseconds

• Next item delay - set interval time between items in milliseconds

• Preload delay time - you can specify the preloading time in milliseconds

• Loader icon position - choose the loader icon position

InfoBox

• Position - choose description area position. NOTICE: option is applicable only for Gallery Grid layout

• Background color - choose the background color

• Effect - choose the animation effect for item descriptions. NOTICE:  It's NOT applicable for slider layout

• Width - description area width in pixels. Leave empty for 100% width

• Vertical position - set vertical position of description area in pixels from the bottom border of the image. NOTICE: It matters only if Description position is set to Over the image

• Horizontal position - set horizontal position of description area in pixels from the left border of the image. NOTICE: It matters only if Description position is set to Over the image

• Center vertically - choose if you want to center the description vertically and horizontally. NOTICE: Works if the Description position is Over the image

Navigation

• Autoplay - choose if slider should automaticly start on page load

• Show play/pause - you can hide or show button for start and stop auto sliding. You can also show button only if mouse cursor is over the slider using 'On Mouse Over' option

• Play Button - select 'Play Button' image to use instead of default image

• Pause Button - select 'Pause Button' image to use instead of default image

• Show next/prev - you can hide or show buttons for navigate to next and previous item. You can also show buttons only if mouse cursor is over the slider using 'On Mouse Over' option

• Previous Button - select 'Previous Button' image to use instead of default image

• Next Button - select 'Next Button' image to use instead of default image

• Navigation bar vertical position - set vertical position of navigation bar in pixels from the top of the album

• Navigation bar horizontal position - set horizontal position (left and right margin) for navigation bar. You can use negative value if you want arrows go outside the album

Tabber Layout Options

• Show thumbnails - show or hide image thumbnails

• Tab indicator - choose the behavior of the tab indicator

• Tab width - tab width in pixels

• Tab height - tab height in pixels

• Tabs position - choose tabs area position

• Tab title limit - limit the number of characters in a slide title to show in a tab

Menu assignment tab

Slide settings

Title

• Show title - yes/no

• Link title - yes/no

• Title limit - limit the number of characters in a slide title to show in a description box

• Title color - choose the title color and a transparency level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The color can be chosen from the color palette or defined by typing RGBA parameters

• Title font - enter the name of the selected font. You can use generic system fonts or Google Fonts

• Title weight

• Title font size - set the font size by entering the px or em value. Leave the field empty for a default size

Description

• Show description - yes/no

• Link description - yes/no

• Description limit - limit item description to the specified number of characters (the system will cut description after a word containing the character at a specified position). Set to '0' (zero) to disable the limit

• Description color - choose the description color and a transparency level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The color can be chosen from the color palette or defined by typing RGBA parameters

• Description font - enter the name of the selected font. You can use generic system fonts or Google Fonts

• Description font - weight

• Description font size - set the description size by entering the px or em value. Leave the field empty for a default size

• Description background color - choose the background color and a transparency level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The color can be chosen from the color palette or defined by typing RGBA parameters

• Position - choose the position

• Effect - choose the animation effect

• Width - description area width in pixels

• Padding - enter padding for description area with unit (px, em or %)

• Vertical position - set the vertical position of the description area in pixels from the bottom border of the image

• Horizontal position - set the horizontal position of the description area in pixels from the bottom border of the image

• Center vertically - choose if you want to center the description vertically and horizontally

Readmore

• Show Readmore - yes/no

• Read more text - change the text of the read more link

• Read more color - choose the read more color and a transparency level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The color can be chosen from the color palette or defined by typing RGBA parameters

• Readmore font - enter the name of the selected font for the read more option. You can use generic system fonts or Google Fonts

• Readmore font - weight

• Readmore font size - set the read more font size by entering the px or em value. Leave the field empty for a default size

• Readmore position - set the Readmore position

Customize border

• Show border - yes/no

• Border type - choose from the list

• Border color - choose the read more color and a transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through, and 0 is completely transparent. The color can be chosen from the color palette or defined by typing RGBA parameters

• Border size - set the border size by entering the px or em value. Leave the field empty for a default size

• Border radius - you can give any slide "rounded corners" by applying a border radius through CSS. If you are not sure how to configure it, visit the Border-Radius page and use the generator. The border radius feature is not available for the Skitter Slideshow layout

Other options

• Module Class - a suffix to be applied to the CSS class of the module

• Caching - use the global cache setting to cache the content of this module or disable caching for this module

• Cache Time - the time in seconds before the module is recached

Advanced

• Module Tag - the HTML tag for module

• Bootstrap Size - an option to specify how many columns the module will use

• Header Tag - the HTML tag for module header/title

• Header Class - the CSS class for module header/title

• Module Style - use this option to override the template style for its position

Video tutorial