Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Website
In this tutorial I will show you how to install and use Slimbox on your Joomla! website.
I will assume that you have Joomla! installed and you have access to the Joomla! administrator
backend.
A. Setup
1. Download Slimbox.zip from http://www.digitalia.be/file_download/8
2. Extract Slimbox using your favourite Zip program.
3. Upload the js folder to your template's folder and the files inside the css folder to your template's
css folder
4. In the backend Joomla!
Administrator, navigate to
Extensions>>Template Manager.
5. Click on the option button to the
left of your template (the default
template is rhuk_milkyway)
6. Click the “Edit” button.
7. Click the Edit HTML button.
8. Then paste the following code where “rhuk_milkyway” is your template's name right before the
</head> and click on Save:
<script type="text/javascript" src="<?php echo $this>baseurl ?
>/templates/rhuk_milkyway/js/slimbox.js"></script>
<link rel="stylesheet" href="<?php echo $this>baseurl ?
>/templates/rhuk_milkyway/css/slimbox.css" type="text/css" />
B. Usage
1. In the backend Joomla! Administrator,
navigate to Content>> Article
Manager and click on the name of
article you would like to use with
Slimbox.
2. If you are not using the No
WYSIWYG editor, click on the button
called “HTML.”
3. Find the URLs of the pictures you want to include in the Slimbox gallery.
4. Paste the below code on one side of your picture where imageurl is the location of your picture.
<a href="imageurl" title="Example Caption" rel="lightbox">
And then paste </a> on the other side of your image code.
To do a set of images do the same as above except put the name of your set in square brackets
inside the “lightbox” > “lightbox[setname]”
5. When you are finished click on Update
Examples
One image
<a href="images/stories/fruit/cherry.jpg" rel="lightbox" title="Cherries"> <img
src="images/stories/fruit/cherry.jpg" border="0" title="Cherries" /></a>
Or a set of images:
<a href="images/stories/fruit/cherry.jpg" rel="lightbox[fruit]" title="Cherries">
<img src="images/stories/fruit/cherry.jpg" border="0" title="Cherries" /></a>