In this tutorial we will discuss how to create a 'Lightbox' effect for your Joomla 1.0 or 1.5 website, using the plugin YOOeffects from the YOOtheme team. Using a Lightbox is a great way to show off your images on your website, as a slideshow or for individual pictures. Videos can also be shown using the Lightbox javascript - both from your own website or streamed from another site (such as YouTube).
There are a whole host of Lightbox clones available to use for your website, so choosing one can be a little daunting, especially as they all offer slightly different takes on what is essentially the same product. We have chosen to talk about one of the YOOeffects tools recently released, which is designed specifically for Joomla and is really easy to use! The script is also compressed which means loading time is quick - an important feature.
What is Lightbox?
Lightbox is a simple javascript that creates an effect that when a user clicks on the image, it pops up, is magnified using a smooth animation and is set on a darkened background. Lightbox is triggered by a 'rel' attribute in the HTML which is used in the tag which surrounds the target image. The Lightbox script is great because it works on all browsers and eliminates the need for Flash animation. Flash although popular is notoriously bad for SEO as Google's bots struggle to read the data within the flash animation.
Here is an example of the lightbox working...
How to Install YOOeffects Lightbox Plugin
Installation of the plugin is very easy, once you have joined YOOtheme. Simply download the .zip file and login to the backend of Joomla as an administrator. If you are using Joomla 1.5, navigate to the 'Extensions' drop down menu, and click on 'Install/Uninstall' link shown here.
Under the 'Upload Package File' section, click on 'Browse' to find the .zip file download. Next click on 'Upload and Install'. Once this is done, the page should navigate to a new one that tells you the plugin has been enabled.
Enable the YOOeffects Plugin
Something that is quite easy to overlook, especially if you are just starting with Joomla is that even though you may have installed a plugin, Joomla does not automatically enable it - you need to do this yourself. This is a very easy process. Simply navigate to the 'Extensions' menu and select 'Plugin Manager'. If you are like us, we run a number of different plugins on GoodWebPractices - so be sure to select the 'Display # all' option at the bottom, so the plugin isn't tucked away on another page. The plugin is cunningly named 'YOOeffects', click on it.
On the left of the new page, ensure you change the status of the plugin from 'disabled' to 'enabled'. There are a number of simple parameters you can edit within the plugin too. The menu looks like this.
For the purpose of this article we are solely looking at the Lightbox effect, so be sure to have this parameter on. You can find out more about the other options that are included with the YOOeffects plugin on their official page.
Lightbox effect for Images
Now that the plugin has been successfully installed, it's time to see how to write the code to ensure the plugin works for your chosen images. The code looks a little daunting, but it is really quite simple once you break it down, especially if you are used to using HTML.
The following is an image I took while travelling through Brazil. This is the Lopes Mendes beach, on Ihla Grande - paradise! If you click on the image you will see the lightbox effect.
The code should be entered into the article that you are wanting to display the image in. It is key not to copy and paste this code as text into your article, but click on the 'HTML' editor within your chosen editor then paste it.
Lightbox Image Slideshow
The code you would insert to create a slideshow of images is the following:
title="Lightbox Slideshow"rel="lightbox[group];width=500;height=333">
Click here to see a lightbox slideshow.
title="butterfly photo"rel="lightbox[group];width=500;height=333">
title="waterfall photo"rel="lightbox[group];width=333;height=500">
The best way to construct a slideshow is to add the "rel=lightbox" attribute to your links first so that they open in lightbox. Once you have done this, you need to remove the names of the links so they become invisible. The final step is to add in [group] in the rel attribute. You can name this anything you want, but all of the links must have to same name, so they appear in the same slideshow. witYou can see how i have done this in the code above. You can add in as many images as you like, and you can do this with videos too, not just images. The code is very simple, but it can be easy to make mistakes, so check through your work carefully if it does not work first time!
Display Videos using Lighbox
The great thing about this plugin is that you can use the same script to show videos on your website. It is far easier for users to focus on a video if the rest of the screen is darkened, so this plugin can be used to great effect. Importantly, this plugin means that people can watch videos hosted on other sites within your own - so there is no reason for visitors to leave you site.
The code is very similar and is as follows:
<a href="http://www.youtube.com/v/jtK6qITij5k&hl=en&autoplay=1"
title="Open Source Content Management Systems"
rel="shadowbox;width=425;height=355">Joomla and Google's Summer of Code</a>
You can play any type of video file as long as your browser can, so this tool is very useful. The key is to ensure you have the linked to the video directly - make sure you are not just linking to the page, otherwise lightbox will not play the video.
YOOtheme
Hopefully you have seen that this extension is very useful as helps to present content neatly and can keep users within your website, if linking to external files. For more help and a tutorial video please visit YOOtheme. The only downside to this plugin is that it is commercial, so you have to be a member of YOOtheme to download it, there are however different membership prices. Being a member enables you to access to all their other extensions and templates and to their professional support.
If you are looking for a free alternative, there are a number of other Lightbox extensions available for Joomla, you can find them here. In our Joomla 1.5 extensions post, we recommended High Slide, so you could give that a try.
Feel free to post your recommendations here or comments about this plugin in the comments below.
No comments:
Post a Comment