New to DJ-Extensions?

DJ-ImageSlider module

Slide source - choose whether the images will be taken from a folder or a DJ-ImageSlider component
Slider type - display images vertically, horizontally or one image at once with fade effect
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-'.
Link image - choose a behaviour of clicked image

Folder as a source: settings

Image folder – type here path from joomla root folder to the image folder for slider, ex. images/stories/slides
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)

Basic slider settings

Full width slider - yes/no
Slide width – width of displayed image measured in pixels
Slide height – height of displayed image measured in pixels
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.
Vertical image centering – set 'yes' o 'no'
Visible images - number of displayed images at once
Space between images - space between images in pixels
Max images - set maximum number of images to be loaded into slider
Sort by – sort slides by file names (folder) / ordering (component) or randomise the ordering
Use CSS3 transition – Use CSS3 transition instead of javascript transition effect for switching between the slides
Autoplay – choose if slider should automatically start on page load
Loop once - when this option is enabled, the autoplay will be paused on the last image.
Show play/pause - No/Yes/On Mouse Over
Show next/prev - No/Yes/On Mouse Over
Show indicators (dots/numbers) - No/Yes/On Mouse Over
Keyboard access (WCAG) - enable keyboard access to meet WCAG recommendations.

Short description:

Customise slide description

Description width - description area width in pixels. Leave empty for 100% width
Description vertical position - set the vertical position of description area in pixels from the bottom border of the image
Description horizontal position - set the horizontal position of description area in pixels from the left border of the image

Customise buttons

Prev/Next/Play/Pause Button - select a path from joomla root folder to the navigation button image. Leave this field empty for default button image. Example: images/stories/prev.png
Navigation bar vertical position - set the vertical position of navigation bar in pixels from the top of the slider
Navigation bar horizontal position - set the horizontal position (left and right margin) for navigation bar. You can use negative value if you want arrows to go outside the slider
Indicators style - Points/Numbers

Customize fonts

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 the RGBA parameters.
Title font - enter the name of the selected font. You can use generic system fonts or Google Fonts.
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 the RGBA parameters.
Description font - enter the name of the selected font. You can use generic system fonts or Google Fonts.
Readmore color - choose the readmore 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 the RGBA parameters.
Readmore font - enter the name of the selected font. You can use generic system fonts or Google Fonts.
Description background - choose the description background color and a transparency-level, where 1 is not transparent at all, 0.5 is 50% see-through and 0 is completely transparent.
Include GoogleFonts - choose whether you want to use Google Fonts.
Border radius - you can give any slide "rounded corners" by applying a border-radius through CSS.

Slide effect options

Slide effect - choose from the list
Slide effect type - choose the effect type or leave 'auto' to let the system choose
Slide transition time - set the slide transition time in miliseconds (1000 ms = 1 second). Leave empty to let the system choose
Next slide delay - set the pause time between slides in miliseconds (1000 ms = 1 second). Leave empty to let the system choose

Contents: