The Joomla Extension Directory (JED) currently offers 85 Slide Show Extensions. About half of these are free. However, many of these require extra coding to get them to actually work. Also many of them do not allow you to add text next to or within the Slide Show. Three slide shows that do allow you to add text, without having to add coding, are the Rok Slide Show, the Shape 5 Image and Content Fader and Joom Gallery. Rok slide show is the simplest in terms of setting up images. However, to add text, you have to create separate text files for each image. In addition, you cannot change the font color used. We will therefore describe another simple slide show, the S5 Image and Content Fader, which allows you to have complete control over every aspect of the text and images. You can even use different text colors and sizes with different images.

In the next article, we will then discuss the best and most configurable slide show of all 85 Joomla slide shows offered. It is called Joom Gallery and is likely one of the best Joomla extensions of any kind. It is amazing that it is free. However, it is more complex that the S5 Image and Content Fader so we will describe the simple option first. Then you can decide if it will do the job or if you want to put in the time to learn how to use Joom Gallery.

The first step in adding the S5 slide show to your website is to go to the Joomla Extension directory (JED):

http://extensions.joomla.org/extensions/photos-a-images/images-slideshow/page2

Then download the free program to the C drive on you computer.

Next go to the Extensions > Install tab in the Administrator Control Panel. This will bring you to the Extension Manager > Install page.

Click on the Browse button and find the S5 Image and Content Fader ZIPPED folder. Then select it and upload it using the “Upload File & Install” button. Once the file is successfully installed, go to Extensions > Module Manager. First disable or move any modules which are using the “user 2” position as we will need this position for the slide show. Then find the S5 Image and Content Fader. Double click it to open it up to edit it.

This will bring up the Module (Edit) page.  In the DETAILS section, use the following settings:

Show Title = No

Enabled = Yes

Position = user2 (if you are using the Milky Way template) or showcase b if using the Quasar template.

For Menu assignment:

Menus = Select Menu Items

Menu selection = select only the Home page

For the Module Parameters, Top section:

Pre-text: Leave blank unless you want some text to appear at the top of the screen before every image.

Module Class Suffix: Leave blank unless you want to make special adjustments to the area around the images.

Tween Time: Raise from 0.5 to 1.0 to increase time for transitions between slides and text.

Note: Do not add the word “seconds”. Throughout the next two articles, pay careful attention to the ending used and make sure you use the SAME ending (or lack of ending in this ccase).

Display time: Default is 10 seconds. Reduce it to 9.

Height and Width: It is preferable that all of your images be the same height and width and that none of them have a file size bigger than 100 KB. Make these adjustments to your images before uploading the slide show and store the images in a folder in Media Manager, under Images/Stories. Call the new folder “slideshowimages”. Then insert the height in the Height box and the width in the width box. I have four images for my Front Page Slide Show. Each is about 300 high by 450 wide. However, you can have the image (and text) take up the entire page if you wish. The setting for this would be 960 high by 960 wide.

Background color: Leave this blank unless you would like to create a “frame” around your images.

The Module Parameters screen should now look like the following:

Location URL box:

You can add up to 10 images. Each has its own settings. It is important to know the exact URL for each image. If you have placed the images in the “stories” folder, the URL is simply:

http://yourwebsite.com/images/stories/slideshowfolder/nameofimage1.jpg

http://yourwebsite.com/images/stories/slideshowfolder/nameofimage2.jpg

http://yourwebsite.com/images/stories/slideshowfolder/nameofimage3.jpg

http://yourwebsite.com/images/stories/slideshowfolder/nameofimage4.jpg

These are the URL’s for my four images:

http://springforwardwebdesign.com/images/stories/myphotos/blue_angelsweb.jpg

http://springforwardwebdesign.com/images/stories/myphotos/mountainweb.jpg

http://springforwardwebdesign.com/images/stories/myphotos/ms_springs_classroomweb.jpg

http://springforwardwebdesign.com/images/stories/myphotos/seattle_marathonweb.jpg

Note that all of your images will have nearly the same URL. Type out the URL for one image into a word document. Then Copy and Paste, the URL into the “Location URL” box for each image.

Hyperlink URL box: If you want to use the images as links to pages, type the URL in this box also. Otherwise, leave it blank.

Image Target Link: If you added the URL a second time, you should also decide if you want it opened in a new window or not. If no link URL, then ignore it.

These are typical settings for the first image:

Image Text: You can type in whatever text you want. But you will need to adjust the height of the shaded area if you have a lot of text. Alternately, you can display the text below the image by setting the slide show box to be taller than the actual image (for example, if your image is 300 px tall and you set your slide show to be 350 tall, you will have a 50 pixel box below the image in which text will display.

Image text padding: The default setting is 12 px. However 6 px is usually good enough.

Image text size: The default setting is 1.1 em. Change this to 14 px.

Image Text Color: The default setting is 000000 (black). Change this to whatever color you want. I like 333399 (dark blue).

Text weight: Default setting is normal. Change it to bold.

Text opacity is 25% meaning you can see through it to the image underneath. Completely transparent is 0%. But this makes it hard to read the text. Change the opacity to 80% to make the text more readable.

Text background color: The default setting is CCCCCC which is a very light gray. Change the color if you want.

Below is an example of what the text parameters should look like for your first image:

Now finish filling in the same or different settings for your other images. If you are only using four images, then leave the settings blank for images 5 through 10.

When you are done, click the green APPLY button at the top of the screen. Then click on the Preview button to make sure the appearance is what you want. If not, make the adjustments and click APPLY and PREVIEW again until you get it the way you want.

If some of the images aren’t showing, it is likely that the URL path has an error.

Once it looks okay, then click on SAVE to edit the Module > Edit screen.

MAKING A SLIDE SHOW TEXT BOX to the left of the Slide Show

Having a slide show text box to the left of the slide show can be useful for several reasons. First, you can tell a story related to the images. You can also have links to stories related to the images. You can also use the text box and images as a lead in to your entire website and why the viewer might want to spend some more time there. Think of the Text box and slide show as the outer cover to your book. It is your chance to get the reader not only to view your site, but to email their friends and encourage them to visit you website also.

There are just a few brief steps needed to create your slide show text box:

To add a text box (module) to the left of the slide show, from the Module Manager page, click on NEW. This will bring up the Module (New) page. Select Custom HTML and then click on NEXT. This will bring up the Module (Edit) page:

Filling in the Details Section

For the Title, type the title of the text box. For example, Featuring the Latest Joomla Extensions!

Show Title = Yes

Enable = Yes

Position = user 1 if using Milky Way template or Showcase A if using Quasar template.

Menu Assignment = Select (Home page only)

For the Custom Output (at the bottom of the page), type in:

There are over 1,000 free extensions for Joomla websites.
This website features four of the latest.
*  First, it uses the Quasar Template. This template allows you to precisely control the layout of your website with just the click of a button.
* Second, it uses the Joom Gallery Slide Show with "Ken Burns" style special effects shown to the right.
* Third, it uses the All Videos Reloaded (AVR) system which is capable of playing any video format on a Joomla website. Just click on the You Tube video link to see how it works.
* Fourth, it uses Chronoforms, the easy form making system. Click on the "Contact Us" link to check it out! Best of all, because Joomla is "data base" driven, data from the form can be automatically downloaded to an Excel spreadsheet!

Then click on Apply. And Preview.

In the next article, we will discuss how to add a much more complex, but more configurable slide show to your website. It will still use the same text box you just created. But it allows you to organize slide shows and images much as Joomla allows you to organize articles and menus. It is the perfect example of what can be done using all of the Parameters in Joomla and making them available to the web builder without any need to know computer coding. Even if you are happy with the simple slide show we just created, you might want to take a look at the more advanced slide show we will discuss next – Joom Gallery.