All packages can be downloaded at http://www.design-joomla.eu/downloads/download.html

A complete list of availabe install packages:

• DJ-Image Slider component
• DJ-Image Slider module
• DJ-Image Tabber module

Navigate Extensions > Install/Uninstall

Choose the package and press Upload File & Install

The DJ-Image Slider component allows you to display image slides with title and short description linked to any menu item or url address.

See the basic steps to configure DJ-Image Slider component:

• Set parameters
• Create a category
• Create a slide

Navigate Components > DJ Image Slider

At the begining, take a look at a parameters view, where you can set configuration. Press Parameters button in the top right corner, then you will see a page:

Choose your image path and press Save button.

Let's start with creating an example category.

Press Categories and then New in the top right corner. You will see a page:

Short description:

• Title – enter a name of category
• Alias – enter an alternative name of category or leave it blank
• Published – choose yes/no if you want to publish category or not
• Category Order – choose the order of category display (first you have to save a category)

See an example list of categories:

The second step is creating a slide.

Press Slides and then New in the top right corner. You will see a page:

Short description:

• Title – enter a name of slide
• Alias – enter an alternative name of slide or leave it blank
• Published – choose yes/no if you want to publish slide or not
• Category – choose a category of slide
• Order – choose the order of slide display (first you have to save a slide)
• Image – choose a slide image
• Target Type – choose the menu item or url address as target of image, title or description link
• Menu Item – if you have checked menu item as target, then choose the proper menu item
• URL Address – if you have checked url address as target, then put the proper url address
• Description – enter a description of a slide

See an example list of slides:

If you want to make some changes in added slide e.g. change an image or a description, you have to edit a respective slide.

See an example of an edited product:

Make your changes and press Save button.

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 specified folder.

Navigate Extensions > Module Manager and choose DJ image Slider module.

Let's take a look at Module Parameters:

Short description:

• Slide source – choose whether the images will be taken from a folder or a DJ Image Slider component
• Slider type – display images vertically, horizontally or one image at once with fade effect
• 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)
• Slides category – choose a DJ Image Slider category to display
• Show title – show or hide slide titles
• Show description – show or hide slide descriptions
• Show readmore – show or hide readmore links
• Link title – make the slide titles linkable (as readmore)
• Link description – make the slide descriptions linkable (as readmore)
• Image dimensions – a dimensions of displayed image measured in pixels
• Visible Images – number of displayed images at once
• Space between images – space between images in pixels
• Max images – set a maximum number of images to be loaded into slider
• Sort by – sort slides by file names (folder) / ordering (component) or randomise the ordering
• Slide effect – choose the transition effect. For more info about effects go to http://docs111.mootools.net/Effects/Fx-Transitions.js
• Autoplay – choose if slider should automatically start on page load
• Show play/pause – you can hide or show button for start and stop auto sliding. Note that the play/pause button is visible only if mouse cursor is over the slider
• Show next/prev – you can hide or show buttons for navigate to next and previous slide

Under Module Parameters you can set up Advanced Parameters:

Short 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
• 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
• 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 go outside the slider
• Slide effect type – choose the effect type or leave 'auto' to let the system choose
• Slide duration – 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

DJ-Image Tabber module allows you to display slides, which you can switch by using tabs.
Navigate Extensions > Module Manager and choose DJ image Slider module.

Let's take a look at Module Parameters:

Short description:

• Slides category – choose a category to display
• Show title – show or hide title of slides
• Show description – show or hide slide descriptions
• Link title – make the slide titles linkable (as readmore)
• Show readmore – show or hide readmore links
• Description limit – limit slide description to specified number of characters (leave empty for no limits)
• Image dimensions – dimensions of displayed image measured in pixels
• Tab dimensions – dimensions of displayed tabs measured in pixels
• Sort by – sort slides by file names (folder), order (component) or randomise the ordering
• Autoplay – choose if slider should automatically start on page load

Now let's take a look at Advanced Parameters:

Short description:

• Slide effect – choose the transition effect
• Slide duration – set slide transition time in miliseconds
• Next slide delay – set pause time between slides in miliseconds

See an examples of DJ-Image Slider Views:

a) horizontal slider with one image visible, taken from component, containing a short description with linked title

b) horizontal slider with three images visible at once, taken from folder

c) vertical slider with two images visible at once, taken from component, containing a short description with linked title, disabled play/pause and prev/next buttons

d) vertical slider with one image visible, taken from folder