This document provides instructions for setting up and configuring the DJ-ImageSlider extension in Joomla to display image sliders. It discusses using the extension with images from a folder or categories defined in the extension's component. Key steps include downloading and installing the extension, creating an image slider module instance and configuring its source folder or component category, image dimensions, and other display options. Advanced options like custom navigation buttons and descriptions are also covered.

1. DJ-Image Slider
(and a couple of Galleries)
One method to prepare images
Simple Image Gallery
and Very Simple Image Gallery
DJ-ImageSlider

2. Simple Image Editing
● Sample images created with IrfanView
(Windows) http://www.irfanview.com/
● Free, understands a lot of image formats
It will let you:
● Crop an image to a specific ratio
● Rotate by arbitrary angles
● Resize, colour manipulation
● Change image types
● Overlay text and other “paint” actions

3. Preparing an Image

4. Info recorded in image

5. EXIF info (includes orientation)

6. Turn off auto-rotate

7. Crop selection of specific shape

8. When crop is positioned and sized
...

9. Resize to smaller dimensions

10. Saving as “lossy” image

11. Image Sizes
● Original Image: 3,558,436 bytes
● Resized to 800x600 pixels: 78,205 bytes
● Resized to 400x300 pixels: 31,770 bytes

12. Very Simple Image Gallery
http://www.bretteleben.de
● Not a slider – images are arranged with a large
image at the top, thumbnails below
● Click on thumbnail to select large image
● Creates thumbnails and scaled images
automatically from original images
● Placed in articles with tags
{vsig}fullres{/vsig}

13. Plugin Options

14. Typical VSIG display

15. Simple Image Gallery
http://www.joomlaworks.net
● Not a slider – thumbnails displayed in an array
● Click on thumbnail to display image in a modal
● Can be very slow unless images are resized to
a reasonable size
● Placed in articles with tags
{gallery}fullres{/gallery}

16. Plugin Options

17. SIG before clicking on image

18. Typical SIG display
after clicking on image

19. DJ Extensions DJ-ImageSlider
Download at:
http://dj-extensions.com/dj-imageslider

20. How to get it
● No payment required
● Create account at
http://dj-extensions.com/signup
● All-in-one package for 2.5.x and 3.x
(version 2.2.1 as of February 2014)
● Older version for 1.5.x still available
● Download to local system
● Install using standard process for extensions

21. Key Features
● Component, position defined by module
settings
● Can use it as a plugin by employing their
Content - Load Modules plugin
● Not tied to a template Club
● Can display a directory of images with a link or
modal pop-up
● Can also display selected images, and have
links to specific URL's tied to image
● Rotate/fade axis selectable, many configurable

22. Most annoying things
● On the horizontal and vertical sliders, when the
last image is reached it does a fast rewind back
to the first image, which feels a little dizzying
(Not an issue with the fade option)
● Documentation is ... terse. You'll probably need
to experiment to really understand what some
of if means.

23. How to use it
● Most of the defaults are reasonable
● Simplest way is just to create a directory of
pictures under images, and point module at it
● Make sure the images are a reasonable size,
the same aspect ratio and orientation
note: if you make the images too big, they may
not fully load on a slow connection, like a
smartphone

24. What You'll Want to Set
● Make a copy of the base module, set module
position and pages on which to display
● Choose slider source (folder is quickest to set
up)
– You'll need to select folder location too.
● Choose slider type
● Set size of image
● Choose number of images to display

25. Responsive
● Works well on
devices of various
screen sizes and
aspect ratios
● Displaying multiple
images on small
screens make the
“tap to display
larger image”
difficult

26. "Module" Tab Parameters
Slide source – choose whether the images will be
taken from a folder or a DJ-ImageSlider
component
Images can be a directory, or selected within
module by creating categories and adding
selected images to that category.
The slides and categories are set under the DJ-
Images option under the Components tab of the
back-end.

27. "Module" Tab Parameters
Slider type – display images vertically,
horizontally or one image at once with fade effect
The amount of screen area taken up also depends
on the number of visible images value

28. Horizontal Slider

29. Vertical Slider

30. Fade

31. "Module" Tab Parameters
Link image - Choose a behaviour of clicked
image
If "open image in modal" selected image will be
opened in the modal box
If showing images from a folder, and you assign a
value to the Link option, then this must be set to
"Hyperlink" for the Link to be followed.

32. Options for displaying images when
Slider Source is Folder
Image folder – path from Joomla! root folder to
the image folder for slider, ex.
images/stories/slides
Will only display distinct images up to the value of
"Max Images" if there are more images in the sub-
directory.
Link – a 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)

33. Options for displaying images when
Slider Source is Component
Slides category – choose a DJ-ImageSlider
category to display
Show title – show or hide slide titles
Show description – show or hide slide
descriptions
Show readmore – show or hide readmore links
Readmore text - enter your custom text for
readmore link or leave empty to use a default text
from language file
Link title – make the slide titles linkable (as

34. Basic Slider Settings
Image dimensions – dimensions of displayed
image measured in pixels
Visible Images – number of displayed images at
once
● doesn't apply to fade
Space between images – space between
images in pixels
● doesn't apply to fade

35. Basic Slider Settings
Slide effect – choose the transition effect. For
more info about effects go to
http://docs111.mootools.net/Effects/Fx-
Transitions.js
● linear displays a linear transition.
● Cubic displays a cubicular transition.
● Expo displays a exponential transition.
● Circ displays a circular transition.
● Sine displays a sineousidal transition.

36. Basic Slider Settings
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
Show custom navigation - show or hide custom
navigation if specified in Advanced options

37. "Advanced" Tab Module Parameters
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 – path from joomla
root folder to the navigation button image. Leave
this field empty for default button image. Example:

38. Component Image Source
● Define category under Component menu

39. Slide Component options
● Title as displayed in slider
● Associate with category
● Associate with a particular image
● Extended description
● Link type (none, menu, URL, article)
● Link target

40. Add Slides to Category

41. Define Module using Component
Definitions
● Most of the settings are as previously outlined
● Need to select “Link Image” as Hyperlink to
allow links from images
● Settings in the “COMPONENT AS A SOURCE:
SETTINGS” area