19 Apr 2008 |
|
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 <a> 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 PluginInstallation 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 PluginSomething 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 ImagesNow 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.
You will notice i have changed the title of the image for each part of the code. This is to show you that the 'Lopes Mendes Beach' is the description that appears when the lightbox is engaged, and Ihla Grande appears when you hover over the image in its present state. It can be a useful way of providing more information about your chosen image to your users. The second part of the code determines the size of the thumbnail that is displayed to click on, be sure to keep the same proportions, to ensure the image is not distorted! Lightbox Image SlideshowHaving slideshows of images is a clean, easy and convenient way to display images and this can be done using a Lightbox effect too. The code you would insert to create a slideshow of images is the following:
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 LighboxThe 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" 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. YOOthemeHopefully 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. 16 Comments
Write comment
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
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).
April 29, 2008
Votes: +2