Dj image slider - presented at JUGT Feb. 2014 Workshop

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