Joomla! 1.5 JavaScript jQuery

Jose Argudo Blanco

• Publisher: Packt Publishing
• Year: 2010
• eBook ISBN: 9781849512046
• Edition: 1
• Topic: Design
• Subtopic: Web Design

In Detail

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.

Build impressive Joomla! Sites with jQuery, from third-party extensions to development

Approach

This book is a tutorial with step-by-step instructions, packed with practical code examples, images, advice, and ideas.

Who this book is for

If you are a PHP developer who is working with Joomla!, this book is for you. It is also aimed at web designers who want to add JavaScript elements, using jQuery, to their Joomla! sites, themes, modules, and other extensions.

A basic knowledge of web development and Joomal! is required. Some knowledge of JavaScript would certainly be a bonus. No knowledge of jQuery is required.

Joomla! 1.5 JavaScript jQuery

---

Table of Contents

Joomla! 1.5 JavaScript jQuery

Credits

About the Author

About the Reviewers

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Errata

Piracy

Questions

1. Let's Start Making a Better Site—Images

How Joomla! handles images by default

Inserting images into articles

Placing images in modules

Placing images in the template

Adding a jQuery-powered image slideshow module

Some other modules to try

Image pop ups

Some other modules to try

Putting images together—image galleries

Some other extensions to try

Tips and tricks

Summary

2. Site Content—Our Next Step

Basic concepts on Joomla! content

How Joomla! shows our articles to site visitors

Enhance your site content using JavaScript

Organizing our content into tabs

Some other modules to try

Article slideshows

Some other extensions worth checking

Site search

Introducing AJAX search

Some other extensions to try

Tips and tricks

Summary

3. Embedding Rich Media Features with Joomla! Plugins

Concept of plugin—what is a Joomla! plugin and how does it work?

Code highlighter plugin

Some other extensions to try

captbunzo's Flickr Album plugin

Some other plugins to try

SC jQuery

Some other plugins to try

Tips and tricks

Summary

4. One Last Look at Joomla! jQuery Modules

Limitations of Joomla! menu modules

Creating a drop-down menu with CSS alone

jQuery-powered Joomla! menu modules

Adapting the menu to suit our template

Some more extensions to try

Creative ways of placing login modules in our site

Some other extensions to try

Tips and tricks

Summary

5. Refactoring Our Site

Warning

Removing unnecessary jQuery loads

Code highlight

pPGallery plugin

Shadowbox

AJAX Header Rotator

Content Slider module

What happens with jQuery UI

c7DialogMOD

jQuery tabs module

Removing MooTools

Tips and tricks

Summary

6. Getting Our Hands on Coding JavaScript

Adding movement to our site's header—Parallax effect

Preparing the HTML necessary for our example

Adding jQuery Parallax library

Tips and tricks

jQuery library jScrollPane

Adding mouse scrolling

Adding useful tooltips

Tips and tricks

Summary

7. Creating Our Own Modules

Learning the basics of Joomla! module creation

Creating a "Send us a question" module

Making a better form using JavaScript

Send the form using jQuery AJAX

Tips and tricks

Validating form fields using jQuery—why validate?

Warning

What could you check?

What to do next? Packing and installing the module

Summary

8. Building Complete Solutions, Modules, and Components

Working with the news rotator module

Creating the component base

XML installer file

Why are so many files necessary?

Building our first model

How Joomla! helps us work with the database

Inserting data

Updating data

Deleting records

Reading data

loadResult

loadObject

loadObjectList

Modifying our installer to create our table

Coding a basic admin zone

Inserting, editing, and deleting records in our admin zone

Showing our data in our module

Adding jQuery to our module—refreshing data using JavaScript

Summary

9. Going Further with Our Component Development

Adding a table paginator plugin to our admin zone

Textarea autogrow plugin

Working on our component's frontpage

Equal size columns with jQuery

Paginating our contents

Going back to the admin zone

Adding tips and instructions to fill our form using JavaScript

Uploading images

Showing our images in the frontend

An interesting way to show the caption

Adding a fresh full image pop-up script

Adding a WYSIWYG editor to our component backend

Summary

10. Problems and Usability

What happens if JavaScript is disabled?

Using Firebug to help us in our development

Possible problems and solutions with jQuery

Optimizing CSS and JavaScript

Summary

Index

Joomla! 1.5 JavaScript jQuery

Copyright © 2010 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: July 2010

Production Reference: 1190710

Published by Packt Publishing Ltd.

32 Lincoln Road

Olton

Birmingham, B27 6PA, UK.

ISBN 978-1-849512-04-6

www.packtpub.com

Cover Image by Asher Wishkerman (<[email protected]>)

Credits

Author

Jose Argudo Blanco

Reviewers

Eric Brown

Tahsin Hasan

Acquisition Editor

Darshana Shinde

Development Editor

Rakesh Shejwal

Technical Editor

Hithesh Uchil

Copy Editors

Janki Mathuria

Lakshmi Menon

Indexer

Hemangini Bari

Editorial Team Leader

Akshara Aware

Project Team Leader

Lata Basantani

Project Coordinator

Srimoyee Ghoshal

Proofreader

Aaron Nash

Graphics

Geetanjali Sawant

Production Coordinator

Aparna Bhagat

Cover Work

Aparna Bhagat

About the Author

Jose Argudo Blanco is a web developer from Valencia, Spain. After completing his studies, he started working for a web design company. Then, six years later, he decided to freelance.

Now that some years have passed as a freelancer, he thinks it's the best decision he has ever taken because it let him work with the tools that he likes, such as Joomla!, CodeIgniter, CakePHP, jQuery, and other well-known open source technologies.

His desire to learn and share his knowledge has led to him being a regular reviewer of books from Packt Publishing, including Magento 1.3 Sales Tactics, Openx Ad Server, Drupal E-commerce, Joomla! With Flash, Joomla! 1.5 SEO, and Magento Theme Design.

Recently, he published his own book, CodeIgniter 1.7, which you can also find on Packt's site. And since then he has been working on this Joomla! book, putting all his effort into it.

To Silvia, my brother,...

Table of contents

• Joomla! 1.5 JavaScript jQuery