P. 1
Joomla! v 1.5 Slimbox in your Joomla! Website

Joomla! v 1.5 Slimbox in your Joomla! Website

4.75

|Views: 36,970|Likes:
Published by AmyStephen
By dsadik
Google Highly Open Participation Contest
Joomla!
By dsadik
Google Highly Open Participation Contest
Joomla!

More info:

Published by: AmyStephen on Mar 18, 2008
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as ODT, PDF, TXT or read online from Scribd
See more
See less

05/08/2014

pdf

text

original

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.

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->