Module - Album

Module - Album

The DJ-MediaTools Album module allows displaying the album in a chosen module position.

You need to choose an album to display by setting the first option in the module settings (Album).

All other parameters are optional and you need to change them only if you want to override some of them compared to global component settings or album settings.



  1. Album - choose DJ-MediaTools album to display
  2. Preset - Inherit / None
  3. Album layout - choose album layout from the list or overrides in templates

Album settings

  1. Sort by - Sort items by ordering (components) / file names (folder) or randomize the ordering.
  2. Items limit - set the maximum number of items to be loaded into the album
  3. Skip first X items - you can skip first few album items to start displaying album from some desire item
  4. Space between images - space between images in pixels
  5. 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. 
  6. Video playback - choose whether the full video should be played in the popup window or directly in the slideshow
  7. Use watermarks - allows applying watermarks onto images
  8. Include Google Fonts - show module include fonts from Google font
  9. Show EXIF - show or hide EXIF info from image file
  10. EXIF Info - choose which EXIF info show and in what order

Images Dimensions

  1. Image width - image width in pixels
  2. Image height - image height in pixels
  3. Image resizing - select the method of resizing images
  4. Image quality - Set the quality
  5. Thumbnail width - thumbnail width in pixels
  6. Thumbnail height - thumbnail height in pixels

Effects

  1. Images effect - select the images effect transition
  2. Ken Burns Effect - slowing zoom and panning the image instead of displaying a static image
  3. Transition effect - choose the transition effect from the list
  4. Transition effect type - apply the effect at the beginning/end of the transition or leave 'auto' to let the system choose
  5. Slide effect duration - set transition effect duration in milliseconds.
  6. Next item delay - set interval time between items in milliseconds.
  7. Preload delay time - you can specify the preloading time in milliseconds. 
  8. Loader icon position - choose the loader icon position.

InfoBox

  1. Position - Choose description area position. NOTICE: option is applicable only for  Gallery Grid layout
  2. Background color - Choose the background color
  3. Effect - Choose the animation effect for item descriptions. NOTICE:  It's NOT applicable for slider layout. 
  4. Width - Description area width in pixels. Leave empty for 100% width.  
  5. Padding - Customize slide padding description
  6. 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.
  7. 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.
  8. Center vertically   - Choose if you want to center the description vertically and horizontally. NOTICE: Works if the Description position is Over the image. 
  1. Autoplay - Choose if slider should automaticly start on page load
  2. 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.
  3. Play Button - Select 'Play Button' image to use instead of default image. 
  4. Pause Button - Select 'Pause Button' image to use instead of default image.
  5. 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.
  6. Previous Button - Select 'Previous Button' image to use instead of default image.
  7. Next Button - Select 'Next Button' image to use instead of default image. 
  8. Navigation bar vertical position - Set vertical position of navigation bar in pixels from the top of the album
  9. 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

  1. Show thumbnails - show or hide image thumbnails
  2. Tab indicator - choose the behavior of the tab indicator
  3. Tab width - tab width in pixels
  4. Tab height - tab height in pixels
  5. Tabs position - choose tabs area position
  6. Tab title limit - limit the number of characters in a slide title to show in a tab


Inherit and empty input means that the given value will be taken from general settings. The hierarchy of inheriting from lowest to highest priority: Global component settings » Album settings » Module settings
The Album module comes with many more settings to configure. They are available in module tabs. Check descriptions below:


You can decide where the module will be an assignment. 

Slide settings


Title

  1. Show title - yes/no
  2. Link title - yes/no
  3. Title limit - Limit the number of characters in a slide title to show in a description box. 
  4. 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.
  5. Title font - enter the name of the selected font. You can use generic system fonts or Google Fonts.
  6. Title weight
  7. Title font size - set the font size by entering the px or em value. Leave the field empty for a default size.

Description

  1. Show description - yes/no
  2. Link description - yes/no
  3. 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.
  4. 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.
  5. Description font -  enter the name of the selected font. You can use generic system fonts or Google Fonts.
  6. Description font-weight
  7. Description font size - set the description size by entering the px or em value. Leave the field empty for a default size.
  8. 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. 
  9. Position - choose the position
  10. Effect - choose the animation effect
  11. Width - description area width in pixels
  12. Padding -  enter padding for description area with unit (px, em or %)
  13. Vertical position - set the vertical position of the description area in pixels from the bottom border of the image
  14. Horizontal position - set the horizontal position of the description area in pixels from the bottom border of the image
  15. Center vertically - choose if you want to center the description vertically and horizontally

Readmore 

  1. Show Readmore - yes/no
  2. Read more text - change the text of the read more link
  3. 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.
  4. Readmore font - enter the name of the selected font for the read more option. You can use generic system fonts or Google Fonts.
  5. Readmore font-weight
  6. Readmore font size - set the read more font size by entering the px or em value. Leave the field empty for a default size.
  7. Readmore position - set the Readmore position

Customize border 

  1. Show border  - yes/no
  2. Border type - choose from the list
  3. 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.
  4. Border size - set the border size by entering the px or em value. Leave the field empty for a default size.
  5. 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 Suffix - 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


  1. Module Tag - the HTML tag for module
  2. Bootstrap Size - an option to specify how many columns the module will use
  3. Header Tag - the HTML tag for module header/title
  4. Header Class - the CSS class for module header/title
  5. Module Style - use this option to override the template style for its position

Joomla slideshow extension
  1. Visit DJ-MediaTools page to learn more about the available features. 
  2. Check the documentation for our Joomla gallery and slideshow extension.






      • Related Articles

      • Creating new Album

         To display an Album on the frontpage first you need to create new one. Click on the New Album button from the Control Panel and you will be directed to the form: There are only a few parameters required. You'll see them at the first sight. These ...
      • How to use Masonry album layout

         Masonry layout is useful when you want to display a gallery of images and you don’t want to crop them. You can use this layout in a component view and in a module. To display an album in Masonry layout follow these steps: In Album settings tab (in ...
      • How to insert the DJ-MediaTools album in the DJ-Tabs component

        This tutorial shows how to use the DJ-Tabs component to display the DJ-Mediatools album in it. I assume you already have some information about these components and use them. If you are just starting your adventure then you should check: DJ-Tabs ...
      • DJ-Classifieds Admin Stats Module

        The DJ-Classifieds Admin Stats module overview This module is not included in the All In One Package (DJ-Classifieds AIO) - you need to download it from the downloads section - this module is available for all active subscribers for free! Check also ...
      • Presets - predefined album settings

         Presets in DJ-MediaTools lets you save and re-use specific settings for different albums. How to create presets You can find the Presets settings in DJ-MediaTools component. Open Components -> DJ-MediaTools and click "Presets" in the left column. ...