Slimbox is a special Joomla addon that lets you show large images when a thumbnail (small image) is clicked. Try it here, click this image to see how Slimbox opens a larger version.
Slimbox works really well, it examines the image and opens a new window that is the correct size, putting it on a greyed-out background. You close the large image by clicking anywhere on the background or clicking a close link.
Elegant, easy to use and good for the technically challenged.
Follow these steps to install, setup and use slimbox with joomla.
- Download the slimbox plugin
- Use the Joomal Extension Manager to upload and install the Slimbox plugin
- Use the Plugin Manager to enable the Slimbox plugin
- Use the Slimbox plugin
Expanded instructions : How to Install the Slimbox Plugin for Joomla
1. Get the slimbox plugin link (opens in a new window). Make sure you save this as the zip file, don't expand it on your computer because the Extension Manager expects you to upload a zip file.
2. Open the Extension Manager, then browse on your local computer to find the zip file, click upload and install. You should get a success message.
3. Open the Plugin Manager, look down the list and find Slimbox, then enable it, either by clicking on the icon in the column, or clicking on the name and then enabling in the main screen. Save the changes.
4. Use the Slimbox Plugin with Joomla to show a thumbnail that expands to the full size image when clicked, instructions for doing that follow.
Having got Slimbox installed you now need to understand out how to use Slimbox, it's not difficult but needs a little care because you can't 'see' the images until you test the pages using a web browser.
Within Joomla all images are stored in a folder called images. Inside there are a series of other folders including one called stories, that is where Joomla stores all the images related to stories or articles. When you are using images in articles or stories Joomla will look for them in it's stories folder. Ideally you should create folders within Joomla's stories folder in a logical way that will make it easy to find them. Use folder names that will remind you what's in them. For example you could have folders with the same names as sections, categories or articles. Sensible folder names will make life a lot easier when you want to change pages in the future.
In this tutorial we will create a folder called using_slimbox then upload files into it before putting them into this page.
How to create a folder to hold images in Joomla
Open the media manager, you will see the image folders including one called stories, click the small + next to stories to expand it to show the image files that are inside. We are going to create a new folder inside stories, begin by clicking the name, stories, it should now have a yellow background, this tells Joomla that we are working with the stories folder.
Look to the right-hand side of the page, in the textbox, type the name of the new folder, using_slimbox or the name you want. Click the create button. You should now have the using_slimbox folder inside the stories folder. See below.
The images can now be uploaded. Look to the bottom of the page where there is a browse button, click it.
Find the appropriate files on your local computer and select them, when you have found all the files, click the Start Upload button.
Example: Using Slimbox with Joomla
Slimbox needs two copies of each image, a small image, usually know as a thumbnail, and the full size image. Start by deciding what size each of these is going to be. Generally a thumbnail or 150 to 180 pixels on the long edge will look fine, and a full size image of 640 x 480 or smaller will do. What size you select depends on personal preference, but you need it to be a reasonable size, otherwise you might just incorporate the image into the page and not bother using Slimbox.
Begin by creating these from the original image using your favourite image editing application - Photoshop, Gimp or another. Save them as gif or jpeg format, whichever you prefer. In this tutorial the names are, tn_example.jpg 180 x 124 pixels and example.jpg 640 x 480 pixels. As a general rule I use tn_ as a prefix on image filenames to indicate that they are thumbnails. Another way you can separate thumbnails and full-size images is to put them into separate folders or directories, in which case they can keep the same filenames.
As described above, upload the image files to the folder you created.
Progress review
At this stage we have created a folder to hold the thumbnail and full-size images, re-sized the images and uploaded them. The next step is to embed them into the article in Joomla.
Telling Slimbox how to display images in Joomla
To use the slimbox plugin we have to write a line of text within the article that tells slimbox about the images and caption that is to be shown. It looks like this :
the line of text for the image at the top of this page is :
We need to examine that in detail looking at the parts of it. (In this example the text is shown in bold for clarity, in the actual file normal text is used) Note first that curly braces are used to enclose the text.
The lines begins with the word slimbox - that needs to be there, otherwise slimbox will ignore the images.
Next follow three things, the full path to the full-size image, the full path to the thumbnail image and the caption. These must be separated by commas. Working out the file paths is the hard bit. Here's how it's done. As usual a picture is better than words, the following image shows how the image files are stored by Joomla. The following image shows the files using an ftp client.
The two files needed are example.jpg and tn_example.jpg. Their paths are . . .
images/stories/using_slimbox/example.jpg
images/stories/using_slimbox/tn_example.jpg
Examine the image above to see how the path was found, you will need to do the same thing for your own site. If you are not using an ftp application then you can do the same thing using Joomla itself; to view the files structure you would see . . . (click this thumbnail to enlarge it)
Here you can see the two image files and the path, note the path that you need to use.
Finally save the changes and then preview the page. You will need to preview in a browser to see how the images are displayed.
No comments:
Post a Comment