Está en la página 1de 4

How to include Slimbox in your Joomla!

 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>

<a href="images/stories/fruit/pears.jpg" rel="lightbox[fruit]" title="Pears"><img


src="images/stories/fruit/pears.jpg" border="0" title="Pears" /></a>

<a href="images/stories/fruit/strawberry.jpg" rel="lightbox[fruit]"


title="Strawberries"> <img src="images/stories/fruit/strawberry.jpg" border="0"
title="Strawberries" /></a>

<a href="images/stories/fruit/peas.jpg" rel="lightbox[fruit]" title="Peas"> <img


src="images/stories/fruit/peas.jpg" border="0" title="Strawberries" /></a>

© Joomla! Electronic Documentation License.

También podría gustarte