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
![Page 1: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/1.jpg)
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
![Page 2: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/2.jpg)
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
![Page 3: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/3.jpg)
Preparing an Image
![Page 4: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/4.jpg)
Info recorded in image
![Page 5: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/5.jpg)
EXIF info (includes orientation)
![Page 6: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/6.jpg)
Turn off auto-rotate
![Page 7: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/7.jpg)
Crop selection of specific shape
![Page 8: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/8.jpg)
When crop is positioned and sized ...
![Page 9: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/9.jpg)
Resize to smaller dimensions
![Page 10: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/10.jpg)
Saving as “lossy” image
![Page 11: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/11.jpg)
Image Sizes
● Original Image: 3,558,436 bytes● Resized to 800x600 pixels: 78,205 bytes● Resized to 400x300 pixels: 31,770 bytes
![Page 12: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/12.jpg)
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}
![Page 13: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/13.jpg)
Plugin Options
![Page 14: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/14.jpg)
Typical VSIG display
![Page 15: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/15.jpg)
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}
![Page 16: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/16.jpg)
Plugin Options
![Page 17: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/17.jpg)
SIG before clicking on image
![Page 18: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/18.jpg)
Typical SIG display after clicking on image
![Page 19: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/19.jpg)
DJ Extensions DJ-ImageSlider
Download at:http://dj-extensions.com/dj-imageslider
![Page 20: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/20.jpg)
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
![Page 21: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/21.jpg)
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.
![Page 22: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/22.jpg)
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.
![Page 23: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/23.jpg)
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
![Page 24: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/24.jpg)
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
![Page 25: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/25.jpg)
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
![Page 26: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/26.jpg)
"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.
![Page 27: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/27.jpg)
"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
![Page 28: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/28.jpg)
Horizontal Slider
![Page 29: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/29.jpg)
Vertical Slider
![Page 30: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/30.jpg)
Fade
![Page 31: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/31.jpg)
"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.
![Page 32: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/32.jpg)
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.
![Page 33: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/33.jpg)
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.
![Page 34: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/34.jpg)
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
![Page 35: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/35.jpg)
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
![Page 36: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/36.jpg)
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
![Page 37: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/37.jpg)
"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
![Page 38: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/38.jpg)
Component Image Source
● Define category under Component menu
![Page 39: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/39.jpg)
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
![Page 40: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/40.jpg)
Add Slides to Category
![Page 41: Dj image slider - presented at JUGT Feb. 2014 Workshop](https://reader033.vdocument.in/reader033/viewer/2022061122/547200a4b4af9fc80a8b4d64/html5/thumbnails/41.jpg)
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