Get Software

After successfully implementing the image lightbox evolution into the blog content, then I have though how to apply it to the joomla website. As you probably know a lot of extensions that provide convenience to you in making the image lightbox effect, but I think none more impressive than the lightbox evolution. Therefore, it is dedicated to you who use joomla to build your website as your choice, I will describe the implementation of image lightbox evolution to the joomla website automatically to all images of the joomla content.

Here I use the analogy of a blog in the applying the image lightbox evolution. This method is not going through the database but directly to the joomla templates system that has been used. For those of you who want to have the impressive image lightbox  effects, I will explain all to you as the results of my experiment in implementing image lightbox evolution into a Joomla website.

Suppose you have a lot of images in the content of your joomla website, and you want to make lightbox evolution effect to all images that lies to the content of your joomla. What I have pointed out before is inserting class=lightbox on each image tag. But right now we do it in a different way with a lightbox evolution effect that is very elegant if you apply it to your joomla website. Ok! Lets get started!

The things that you only need to do is inserting the scripts lightbox evolution into the index.php of the template that you use now. You can find the file of index.php of the template directly to the source of directory of your joomla website, or you can go through your joomla backend (administrator panel). You simply type on your browser : http://yourwebsite.com/administrator. If your joomla still in local server of your computer, just type : localhost/websitename/administrator. Lets see the picture below!

On the main menu of your joomla backend, select Extensions>Template Manager. Then you will find the Template Manager: Styles. In the column template please select the template that you are using in active now as I marked in red on the picture below!


You will be in customize template, and then you click on the Edit main page template, as I marked in red as shown like the left picture below! and next you will find index.php template as the purpose of this step, the place where we will insert the scripts code to make lightbox evolution to all images to the joomla content. Please have a look at first the script from the index.php of template, as the right picture below!


 
1. Inserting jquery.min.js to the index.php template, actually all the scripts code that will inserted must be put on the head of the template index.php.

<script src=http://agratitudesign-template.googlecode.com/svn/branches/lightbox/jquery.min.js></script> 

To make it safer, so that the link jquery.min.js can be working on your joomla, put the above script link at the beginning of the head. Make sure also that there is only one link javascript library master (jquery.min.js) that you use, to avoid the possibility of the problem that could be the cause of the lightbox evolution doesnt work. For more details lets see the picture below!

3. Press Ctrl+F on your browser, and type </head>, put the following scripts before the head of the index.php ends.

<script src=http://agratitudesign-template.googlecode.com/svn/branches/lightbox/jquery.lightbox.min.js></script> <link href=https://agratitudesign-template.googlecode.com/svn/branches/lightbox/themes/brown-gold/jquery.lightbox.css rel=stylesheet type=text/css> <!--[if lte IE 7]><link rel="stylesheet" href="https://agratitudesign-template.googlecode.com/svn/branches/lightbox/themes/brown-gold/jquery.lightbox.ie6.css" media="screen" /><![endif]--> <script src="http://agratitudesign-template.googlecode.com/svn/branches/lightbox/jquery.lightbox.js"></script> 

4. Initialize the lightbox to your joomla template and automatically add the class=lightbox to all images of the content joomla, following the script that you need to put next:

<script type="text/javascript"> jQuery(document).ready(function(){ jQuery(.lightbox).lightbox(); }); </script> <script type="text/javascript"> jQuery(document).ready(function($){ $(.lightbox).lightbox(); $(a[href$=jpg], a[href$=JPG], a[href$=jpeg], a[href$=JPEG], a[href$=png], a[href$=gif], a[href$=bmp]:has(img)).addClass("lightbox"); }); </script> 

The placement of the scripts above in its implementation to the index.php template as shown like the picture below!


Once you save all the changes or additions of the scripts on the index.php your joomla template. Then if youve done it as right, it would be the all of images content of your joomla website will use lightbox wvolution effect that make your joomla website more impressive to show every image in full view. If there are less obvious, lets see the aricle video above!