Book Image

Joomla! 1.5 JavaScript jQuery

Book Image

Joomla! 1.5 JavaScript jQuery

Overview of this book

Ever wondered how all the great-looking, feature packed, amazing Joomla! sites are made? Would you like to add image transitions, popups, scrolls, AJAX forms, image galleries, no-page reloads to your website, but are worried that they will be difficult to implement? To make any Joomla! site look more professional, interactive, and interesting you need the ease and power of jQuery.This book will help you to use the jQuery library with the Joomla! CMS. It will take you through adding jQuery functionality to the Joomla! CMS and show how to use it to make the modules and themes more dynamic, interactive, and responsive, and add effects to your Joomla! site.The book starts by showing a plain Joomla! site without any JavaScript enhancement or features, then accompanies you through the process of site enhancement.First you will learn how to make use of third-party extensions to include jQuery features into your site. These can be image galleries, jQuery powered menus, tooltips, and many, many more. Later on you will learn how to modify your template to add some features to your Joomla! site, You will also learn to build your own jQuery-powered Joomla! extensions, and how to pack them so that you can use them in any project you like. Further, you will learn to create your own modules and components.By the end of this book, you will have learned how to enhance any Joomla! site with JavaScript and jQuery.
Table of Contents (16 chapters)
Joomla! 1.5 JavaScript jQuery
Credits
About the Author
About the Reviewers
Preface
Index

Adding a jQuery-powered image slideshow module


Slideshow is one of my favorite effects, and there are many Joomla! modules available to achieve this effect. For example, take a look at AJAX Header Rotator, which is available at http://extensions.joomla.org/extensions/photos-a-images/images-rotators/10036.

Note

Or, you can simply perform a search in the Joomla! Extension Directory (JED) for "AJAX header rotator" and download the module—do so now, so that you can follow the example. After downloading the ZIP file, go to Extensions | Install/Uninstall, select the file, and click on Upload File and Install. After installing the file, on navigating to Extensions | Module Manager you will see that the AJAX Header Rotator module is still not enabled, so we will enable it.

Next, we are going to upload some images. You can upload any image whose dimensions are 587 x 257 px. However, if you wish, you can use image_3.png and image_4.png provided in the code bundle.

Navigate to the Media Manager, then to the stories folder, create a folder called module_1, and upload the images to this folder. After uploading the images, we can return to Extensions | Module Manager and open our AJAX Header Rotator module. Here you will see the module parameters, as shown in the following screenshot:

Let's go through these parameters:

  • Unique ID for this AJAX Header Rotator—is important if we need more than one instance of this module.

  • Image Folder path—is a very important parameter as it indicates the location of the folder where the images are placed. The images that we place in this folder will be the ones used by the module. In our example, we are going to use images/stories/module_1 as the path.

  • Rotation speed and Rotation timeout—will control the speed between image fades and the time for which each image is being shown. It's stated in milliseconds.

  • Image width and Image height—well, these are very self explanatory; we will go for 587 x 257px as the size of the images in our example. That is also the size of our module in the template. However, we could state any dimensions that we need in these parameters.

For now, we are not going to use links in the images, so leave the other parameters at their default values. Before saving these changes, remember to select the module position value to module_1, as we will use this in our example.

On refreshing our site, you will see something similar to the following screenshot:

I've tried to capture the very moment of the transition between two images. However, you will surely see it better on your own Joomla! installation, so why don't you try it?

Some other modules to try

Let me suggest some slideshow modules in case you would like to try them out. You can find all of them by searching the JED:

  • RokSlideshow—is one of my favorite modules. Although it uses MooTools instead of jQuery, it has more effects and transitions. You should really try this module.

  • ImageSlideShow—works in the same way as the module that we have seen in our example.

  • JT SlideShow —isalso jQuery-based, but also offers some nice features, such as pause-on-hover, auto-stop, auto-fit, before/after callbacks, and also some transitions to choose from.