DJ-ImageSlider module

DJ-ImageSlider module

DJ-Image Slider module is necessary to display component slides in the module position. However, this module can work without component and then displays only images from a specified folder.

Navigate Extensions > Module Manager and choose DJ-ImageSlider module.

Let's take a look at Module Parameters:    



Short description:
  1. Slide source – choose whether the images will be taken from a folder or a DJ-ImageSlider component
  2. Slider type – display images vertically, horizontally or one image at once with fade effect
  3. Theme - choose the theme for DJ-ImageSlider. You can create your own theme by copy the existing one and renaming the folder or copy th djimageslider.css fiels from default theme into /templates/[your_template]/css/ and set theme to '-override from template-'.
  4. Image folder – type here path from joomla root folder to the image folder for slider, ex. images/stories/slides
  5. Link – an URL to redirect to if the image is clicked upon (e.g. http://www.joomla.org/ or index.php?option=com_content&view=category&layout=blog&id=1&Itemid=50)
  6. Full width slider - yes/no
  7. Slide width – width of displayed image measured in pixels
  8. Slide height – height of displayed image measured in pixels
  9. Fit a size of image to – Fit a size of image to slide height or width, second dimention will be proportional. If you want to display image on the left and description on the right, you should chhse fitting an image size to slider height.
  10. Vertical image centering – set 'yes' o 'no'
  11. Sort by – sort slides by file names (folder) / ordering (component) or randomise the ordering
  12. Use CSS3 transition – Use CSS3 transition instead of javascript transition effect for switching between the slides
  13. Autoplay – choose if slider should automatically start on page load
  14. Loop once - when this option is enabled,  the autoplay will be paused on the last image.
  15. Keyboard access (WCAG) - enable keyboard access to meet WCAG recommendations.
Under Module Parameters you can customize slider: 

Short description: 
  1. Visible images - number of displayed images at once
  2. Space between images - space between images in pixels
  3. Max images - set maximum number of images to be loaded into slider
  4. Link image - choose a behaviour of clicked image
  5. 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.
  6. Title font - enter the name of the selected font. You can use generic system fonts or Google Fonts.
  7. Title font size - set the font size by entering the px or em value. Leave the field empty for a default size.
  8. 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.
  9. Description font -  enter the name of the selected font. You can use generic system fonts or Google Fonts.
  10. Desc font size - set the description size by entering the px or em value. Leave the field empty for a default size.
  11. 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.
  12. Readmore font - enter the name of the selected font for the read more option. You can use generic system fonts or Google Fonts.
  13. Readmore font size - set the read more font size by entering the px or em value. Leave the field empty for a default size.
  14. 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.
  15. Include Google Fonts - choose whether you want to use Google Fonts.
  16. Border radius - you can give any slide "rounded corners" by applying a border-radius through CSS.
  17. Description width – description area width in pixels. Leave empty for 100% width
  18. Description vertical position – set the vertical position of description area in pixels from the bottom border of the image
  19. Description horizontal position – set the horizontal position of description area in pixels from the left border of the image
  20. Prev/Next/Play/Pause Button – type here a path from joomla root folder to the navigation button image. Leave this field empty for default button image. Example: images/stories/prev.png
  21. Navigation bar vertical position – set the vertical position of navigation bar in pixels from the top of the slider
  22. Navigation bar horizontal position – set the horizontal position (left and right margin) for navigation bar. You can use negative value if you want arrows go outside the slider
  23. Indicators style - points/numbers
  24. Slide effect - choose from the list
  25. Slide effect type – choose the effect type or leave 'auto' to let the system choose
  26. Slide transition time – set the slide transition time in miliseconds (1000 ms = 1 second). Leave empty to let the system choose
  27. Next slide delay – set the pause time between slides in miliseconds (1000 ms = 1 second). Leave empty to let the system choose
  28. Preload delay time - you can specify preloading time in miliseconds (1000 ms = 1 second). If you leave it empty, slider will be shown when page loaded

      • Related Articles

      • 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 ...

      • DJ-ImageSlider Installation

        Download and install the DJ-ImageSlider from the download section. You install the package as any other Joomla extension. 

      • DJ-Classifieds User Avatar module

        This is a simple module allowing to display the DJ-Classifieds user's avatar. Frontend view Backend view Module Class Suffix - A suffix to be applied to the CSS class of the module. This allows for individual module styling.  Show change photo link - ...

      • How to display all categories in DJ-Classifieds Menu module

        You can display a tree of all categories in DJ-Classifieds Menu module. To do so, in module options, set the 'Expand type' parameter to 'All categories'

      • How to add DJ-ImageSlider slideshow module to the content / Joomla article

        This article originally is about placing DJ-ImageSlider into the articles, but the same method will work with any other module! If you want to publish DJ-ImageSlider module inside your content you should use the Content - Load Modules plugin to do ...