Extensions Slideshow 3.1
JB Slideshow 3.1
JB slideshow 3.1 is an incredibly flexible slideshow module for Joomla. This slideshow enables you to display the your content items in a wide range of formats including: as a news ticker, an image slideshow, a content and image slideshow or a simple text slideshow. We have implemented the slide showed in a news ticker format on the demo site and you can see it on the top left hand corner in the front page. Please read all of the instructions below for information about how to implement and configure the slideshow.
Example
Instructions
Once you have installed and published the module to a suitable position in your template you will need to configure the settings. Please take the time to review the following information and see the documentation for your specific template for further information. Please ensure you have also installed and published the JB Library plugin .
General settings
The slideshow also incorporates some great looking and unique animations as a way of making your text and images fade and slide across the screen.
These settings include the time that each slide remains visible, the time it takes to transition from one slide to the next. The following list highlights the animations available for the transition effect:
- Fade
- Scroll Up
- Scroll Down
- Scroll Left
- Scroll Right
- Slide horizontally
- Slide Vertically
- Turn Up
- Turn Down
- Turn Left
- Turn Right
- Zoom
- Fade and Zoom
- Curtain Horizontally
- Curtain Vertically
Slideshow image options
The images displayed in the Slideshow v3.1 can be displayed from one of two sources - from the content item or from a folder.
1. Displaying images from the content item.
1. This is perhaps the easiest way to display images in the slideshow and basically relies on there being an image in the introduction text from the content items that you intend to display in the slideshow. Images need to be at least the size of the dimensions that you specify in the image size parameters as the resize script will not enlarge images.
2. Displaying items from a folder.
This option is slightly harder to implement but it gives you a greater range of images you can use in the slideshow - ie the benefit is that the image used in the slideshow does not also need to be in the content item.
The images displayed using this method need to have the same name as the content item minus the spaces.
As an example if the content title is "Minimal Web Design" then the image name must be MinimalWebDesign.jpg.
The main difficulty in using this technique is for languages other than English or content titles with non ordinary characters. We have some safeguards to prevent issues from occuring in non-English languages but they unfortunately do not cover all issues.
Resizing images in the slideshow
The Slideshow module utilises the php image resizer from shiftingpixel which is a flexible image resizer that crops and resizes images on the fly. While the resize options are mostly intuitive there is some need to use your maths brain when calculating appropriate crop and resize settings for your images.
From the snapshot above you can see that there are four settings that control the output of the image:
width, height, crop width and crop height.
Its important to note that the resize script can not enlarge images so if the image the script is processing is smaller than the width and height set in the parameters then the original image will be displayed.
Where are the images stored?
You can find the resized images in the modules/mod_slideshow/imagecache folder on your server. This folder needs to be writable from the Joomla user on your server for the script to function correctly.
Positioning the Elements
The slideshow is made up of three basic elements which include the slideshow image, the text and the navigation. The position and the dimensions of these elements are controlled in the module admin by using absolute positioning which means you have ultimate flexibility in creating your own layout for the content, image and navigation buttons.
To get the best use out of the slideshow you need to know the approximate width of your template so you can work with the left margin for each of the three elements. Here is a step by step of how to go about setting the dimensions of the slideshow correctly. In this description we are going to use the Strata template as a base in a 980px wide layout.
1. Set the height of the enitre module. This value determines the height of the entire slideshow block
2. Set the position for the image. The resized image width and height is controlled in other parameters.
3. Set the position of the text. The height and width of the text needs to be set explicitly. The top and left margin values determine where the text is placed in the overall slideshow box.
4. Set the position of the navigation.
Controlling the text output
The text in the slideshow is drawn directly from the introtext of the content items that you specify in the module parameters. It is possible to use the slideshow without display text.
While the above settings are reasonably self explanatory it is important to note the allowed tags part of the module. All of the tags shown in the textarea will be displayed in the output of the content item if they exist in the introtext.
As an example using the image above if you have an unordered list in the introtext of a content item it will be displayed int he slideshow because you have nominated it to appear. On the other hand images will not appear in the content area of the slideshow since the <img> tag is not listed in the allowed tags text area.
The slideshow navigation
The slideshow navigation is an ordered list of triggers that are used to trigger a new slide. It is possible to hide the slideshow navigation entirely or display the navigation as numbers, coloured discs or as thumbnail images of the image in the slideshow. If you are using the thumbnail option then you need to make sure that the resize settings for the image thumbnails are set correctly.
Module Parameters
Here is a screenshot of the parameters available in the module as well as the settings required to replicate the display of the moduel on the front page.
Troubleshooting
What do you do if the images don't display and all you can see is the alt text.
There are a few reasons that this might occur and its best to troubleshoot using the web developer toolbar in firefox or image tools in Safari. Please check if you can do any of the following:
- View the original file eg mysite.com/images/stories/slideshowimage.jpg
- Check to see if the imagecache folder is writable. You can do this by navigating in your browser to modules/mod_slideshow3/image.php. If the file is writable you will get an error stating that there is no image specified. If it is not writable then you will get a 404 permissions based error in the browser.
- Right click on the alt text and try to view the image. If there is a permisisons mismatch then you will receive an error stating that the imagecache directory is not writable.
The images dont scroll, slide or fade they just sit there.
This either means that you do not have the JB LIbrary plugin installed and/or published or that you have the jQuery library loading more than once. jQuery run in no conflict mode is generally hassle free except if it is being displayed more than once on a page. If this is the case then youneed to track down the component, module or plugin that is generating the extra jQuery reference and disable it.
In order for jQuery scripts to work in Joomla the jQuery library must be referenced after the default Joomla mootools library is called.
When I installed the slideshow everything else stopped working, or the images just display one on top of the other down the page.
These issues are most likely due to multiple instances of the jQuery library appearing on the page. Please see the explanation above.
Last Updated on Monday, 09 November 2009 01:11
