dj image slider - presented at jugt feb. 2014 workshop
DESCRIPTION
Part of the Feb. 2014 Joomla! User Group Toronto presentation of Image Slider extensions for Joomla!TRANSCRIPT
DJ-Image Slider (and a couple of Galleries)
One method to prepare images
Simple Image Gallery and Very Simple Image Gallery
DJ-ImageSlider
Presented by Douglas Pickett, Joomla! User Group Toronto, February 18, 2014
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
Preparing an Image
Info recorded in image
EXIF info (includes orientation)
Turn off auto-rotate
Crop selection of specific shape
When crop is positioned and sized ...
Resize to smaller dimensions
Saving as “lossy” image
Image Sizes
● Original Image: 3,558,436 bytes● Resized to 800x600 pixels: 78,205 bytes● Resized to 400x300 pixels: 31,770 bytes
Very Simple Image Galleryhttp://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}
Plugin Options
Typical VSIG display
Simple Image Galleryhttp://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}
Plugin Options
SIG before clicking on image
Typical SIG display after clicking on image
DJ Extensions DJ-ImageSlider
Download at:http://dj-extensions.com/dj-imageslider
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
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 features.
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.
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
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
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
"Module" Tab ParametersSlide 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.
"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
Horizontal Slider
Vertical Slider
Fade
"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.
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)
Need to set the "Link Image" to Hyperlink for this to take effect.
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 readmore)
Link description – make the slide descriptions linkable (as readmore)
Description limit - limit slides description to specified number of characters.
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
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
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.● Back makes the transition go back, then all forth.● Bounce makes the transition bouncy.● Elastic Elastic curve.
Many of these effects are so subtle you will hardly notice the difference
The last 3 are so annoying you should probably never use them
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
"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: 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 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
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 loads
Component Image Source
● Define category under Component menu
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
Add Slides to Category
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