Spring Forward Web Design
Build your own Site... Control your own Future!
A slide show with changing images is one of the best ways to get viewers to spend more time on your website. A slide show changes your website from a static website to a dynamic website. A slide show allows you to use pictures to tell viewers what your website is all about and why they should recommend your website to their friends.
What is even more powerful is a slide show which combines pictures with text. Sadly, most other Joomla slide shows make it very difficult to add and change text for every picture. This is where JoomGallery excels. It allows fully editable customizable text for every image. It also allows you to change the order of images, and or add new images at the click of a button.
Here is the link to JoomGallery in the Joomla Extension Directory in case you want to read some reviews, check out the list of features and compare it to the dozens of other Joomla Free Slide Shows:
The link brings up this page:
Joom Gallery is currently the best slide show organizer available for Joomla and probably the best slide show organizer available anywhere. Did I mention that it is free?
The biggest drawback of Joom Gallery is that you need to download 4 different ZIP files to you C drive. Then upload these same 4 different files to your website. This is a hassle, but the reward is more than worth the few minutes this will take you.
Another drawback is that the instructions available for this program aren’t that great. But thankfully, it is a pretty easy system to learn if you are willing to put in the time (much like Joomla). And we will show you how to avoid the most common pitfalls.
Below is a direct link to the download page for all the ZIP files you will need:
You will not need the languages file and you should avoid the BETA file(s). So the first and biggest file you will download to your C Drive is the JoomGallery Component.
Click on Download
This will bring you to a second screen. Click on the Component and ignore the Update. Then save the Component ZIP file in your C drive (there is no need to unzip it).
The second file you need is the JoomImage Module.
From the first download page, click on Modules for Joomla 1.5. This will bring you to a page with a bunch of modules. Don’t worry. The only one you need is called: Module JoomImages 1.5.
Click on this file and download it to your C drive.
You will also need two “Plug In” files: So go back to the first download screen and click on JoomGallery 1.5 Plug Ins. This will take you to the Plug Ins download page. Scroll to the bottom of the page and look for the Button Plug In and the Content Plug In.
Upload both of these to your C drive. The Joom Content Plug in and the Joom Button Plug In are for adding JoomGallery Images to Articles. The module creates a box for your slide show which you can put anywhere you want. And the component is an image organizer which is much better than the Media Manager which comes with Joomla.
Next upload all four ZIPPED files to your website using EXTENSIONS > INSTALL.
After you download all of them, here is what the four files should look like on your home computer:
After downloading all four zipped files to your Home Computer, go to Extensions/Install and browse first to the component to upload it to your website:
Next upload the module:
Next upload the module called joomimage:
Finally, upload the plug in:
After uploading, remember to activate the plug in with the plug in manager:
Select it and click on ENABLE at the top of the screen.
Then go to Extensions > Module Manager. Look for JoomImages, select it and click on ENABLE.
Also in the module manager, look for Jomcategories and enable it too.
Now the fun begins. Go to Components > Joom Gallery. You will see a whole bunch of options. Click on the first one, called Category Manager. Joom Gallery organizes images similar to how Joomla organizes articles. Before you upload a bunch of images, you first need to create a category to place the images in. To do this, click on the Green New Button:
This will bring up the Add Category screen. Give the category a title such as Front Page Slide Show. There is a place to add a description, but it is optional.
Then click on SAVE to return to the prior screen.
The next step is to upload some pictures. There are several ways to upload bunches of pictures very fast. But for now, we only have four images to upload with this slide show, so we will use the easiest way by clicking on Picture Upload.
Note that you can add up to 8 images at a time. Hopefully, you already have all your slide show images in a separate folder somewhere on your computer and all are optimized and resized to be the same size. Click on the browse button and go to this folder. It shouldn’t take more than a minute to select all the files you need.
When you are done, click on the CATEGORY ASSIGNMENT drop down arrow at the bottom of the screen and select the Category you just created. Also give the slide show a title like slide show images. Then Click UPLOAD. Then click on the BACK arrow to return to the main screen.
What is cool about this system is that you can have lots of slide shows on different pages each tied to a different category/folder of images.
But now for the really cool part. Joom Gallery allows you to customize each of the images you just entered. To do this, go to Picture Manager. This brings up all the images you just downloaded:
Note that you can change the order of the images in the slide show just by clicking on the position arrows. Don’t worry that all four of your images have the same title. We will fix this next. Double click on the first image to EDIT it. This brings up the Edit Picture Screen where you can change the title of the image:
If you scroll to the bottom of this screen, you’ll see the picture and a thumbnail image that was created.
You also can place any amount of text you want to describe this image. Note that you have complete control over font sizing, colors, text weighting and everything else – just like you were writing a regular article! But keep it short because space in the slide show will be limited.
When your text is added and the title improved, click on SAVE. Then repeat these steps so each of your images has a Title and a Description.
Next click on the Configuration Manager.
You can see that there are all kinds of things you can configure. There are even more things you can configure in the Customize CSS area. But for now, we will leave all of the settings in their default positions.
Now that we have loaded and defined our images, it is time to go to the Joom Gallery Module and finish off the settings to get the slide show up and running.
Go to Extensions > Module Manager and look for the module called Joom Images.
First make sure there are no other modules active in the Showcase B position. If there are, then de-activate them. Then double click pm Joom Images to open it.
In the Details Section, set:
Show Title to no
Enabled to yes
Position to Showcase B
Menu Assignment to Select, then select only the Home Page.
For the common parameters (upper right of screen), set:
Type of Image: Detail pictures
Number of images: 4 or however many images you have in the picture manager for the category selected
Sorting: ID Ascending
Timespan : No
Show categories: Show (or Ignore)
Adapt to categories: Yes
For default parameters:
Number of columns: 1
Picture link: Detail view
Show pictures directly: No
Orientation of pictures: above text
Dynamic cropping: No
Width: 50 (this value refers to the amount of cropping, not the size of image
Height: 100 (caution: do not and “pixels” to the end of width or height)
CSS size definitions: No
CSS max: 100
Width of pictures: 450 (default is blank) (insert the height and width of images plus some additional height if you want images under text instead of inside at bottom of image
Height of pictures: 300 (default is blank)
Show text: yes
Picture Title: Yes
Word wrap title At which number of chars should a line break be inserted? If set to '0' the title (one long word without spaces) will be shown in one line.
Max description: 0 (0 means unlimited)
Word wrap text At which number of words should a line break be inserted? Try 10
Rest of settings: leave at default values except:
More parameters for slide show:
Width : 450
Caption Height : 60 (do NOT put in “pixels)
Title Size: 16px (must use px)
Title Color: #fff (white)
Description Size: 14px (must use px)
Image Duration: If your pictures have a lot of text, increase image duration to 12000 (12 seconds) and reduce transition to 1000 (1 second).
Then click on APPLY at the top of the screen.
Then click Preview to verify the appearance is what you want.
Once things are looking good, click on SAVE to exit the Edit screen.
Congratulations! You not only have a great slide show, but you have a content management system for organizing future slide shows!
In the next article, we will see how a different Joomla Extension, All Videos Reloaded can be used to post a You Tube Video on your website.