First of all, take a peek and the finished JQuery image gallery – I’ve put the gallery in context on a product detail page for an ecommerce store.

JavaScript and JQuery to the Rescue!

JQuery was the JavaScript framework of choice and made it easy to get things up and running. Techniqually the same effect can be achieved without JQuery, but for simplicity I’m using JQuery. The code is quite easy to follow and I’ll just pickup  up on the main parts.

Firstly we’ll start off with the HTML – simply two dividers, with an unordered lists for the thumbnail images:

<div id="bigpic" class="b"><img src="images/big/iphone-3-big.jpg" alt="iPod Shuffle 16GB Zoom View" />
<p id="desc">iPod Shuffle 16GB Zoom View</p>

</div>

<div id="thumbs">
<ul>
	<li><a rel="images/small/iphone-1-small.jpg" href="images/big/iphone-1-big.jpg">
<img src="images/small/iphone-1-small.jpg" alt="iPod Shuffle Front View In Blue!" />
</a></li>
	<li> <a rel="images/small/iphone-2-small.jpg" href="images/big/iphone-2-big.jpg">
<img src="images/small/iphone-2-small.jpg" alt="iPod Shuffle Dual View Grey!" />
</a></li>
	<li> <a rel="images/small/iphone-3-small.jpg" href="images/big/iphone-3-big.jpg">
<img src="images/small/iphone-3-small.jpg" alt="iPod Shuffle 16GB Zoom View" />
</a></li>
</ul>
</div>

The main image is housed in the divider with the id of ‘bigpic’. I’ve also added a description below the big image – this will change when the image is hovered over to the thumbnail alternate text. Each thumbnail link goes directly to the enlarged version of the image – this way, the gallery will still work when JavaScript is turned off.

The JQuery Magic ….

Right after including the JQuery library (I recommend you make use of Google CDN for this – there are many reasons to let Google host your JQuery files) I have included an int,js file – this contains all the gallery JavaScript. The int file is a small file that catches a hover on each thumbnail and switches the main gallery image (Our ‘bigpic’ divider). All the code is contained within the mahic document.ready listener. The first half of the file catches the hover on a thumbnail:

$('#thumbs ul li a').hover(
		function() {
			var currentBigImage = $('#bigpic img').attr('src');
			var newBigImage = $(this).attr('href');
			var currentThumbSrc = $(this).attr('rel');
			switchImage(newBigImage, currentBigImage, currentThumbSrc);
		},
		function() {}
	);

Here we are getting the currentBig image href, the new big image (from our thumbs href) and current thumbnail src. The second empty fucntion is included to say ‘don’t do anything when hovering away’. Exclude this empty function and the hover event will continue to fire when you leave the image. Now we have these three variables we pass them to our switchImage function, code below:

function switchImage(imageHref, currentBigImage, currentThumbSrc) {

		var theBigImage = $('#bigpic img');

		if (imageHref != currentBigImage) {

			theBigImage.fadeOut(250, function(){
				theBigImage.attr('src', imageHref).fadeIn(250);

				var newImageDesc = $("#thumbs ul li a img[src='"+currentThumbSrc+"']").attr('alt');
				$('p#desc').empty().html(newImageDesc);
			});

		}

	}

This is quite self explanatory. The first check made is that the current big image is not the same as the target big image – if this was true we would fade in and out the same image, which leads to a rather weird looking effect. If both paths match, the user has hovered over the thumbnail of the current big image (in this case nothing would happen). Hovering over any other image will result in the current big image fading out, setting the big image src to the src from the thumbnail (the new image) and populating our description paragraph.

Using the Gallery in a Production Website

In the example 3 static large and small images have been manually added for simplicity. In a real website, maybe an online store, you would retrieve this information from a database. Another thing to note is image sizes. I always find it useful to let users upload whatever file resolution they want, giving them the exact pixels as a recomendation. To ensure that a particularly large file wouldn’t break the layout I tend to sue image resizing scripts, such as the excellent smart image resizer from shifting pixel – uploaded images can be automatically scaled to dimensions of your choosing.

Also, at some point I’ll learn about making your owns plugins for JQuery and turn this into a self contained plugin

There’s not a lot more to this to be honest. tested in IE6, IE7, IE8, Chrome and Firefox – all working nicely.

Take a look at the final result or download the source files. Enjoy!

Personally, I wasn’t aware you could track specific links with Analytics and only ever considored this when a client asked ‘why doesn’t Google show me the numbers of times my marketing report (read: a PDF file) has been clicked?’ – a totally valid request that I wanted to investigate.

Use JQuery to improve Google Analytics and track downloads, RSS, Email & external links

First things first, make sure you have a google Analytics account, the latest version of JQuery and the latest version of the analytics code running on your website

As with the majority of the JQuery magic, everything happens within the doc ready event listener – this will used to capture various clicks to select elements.

Tracking Download Link Clicks (PDF, ZIPs etc.)

$(document).ready(function() {

	$("a[rel=download]").click( function() {
		var fileName = $(this).attr("href");
		pageTracker._trackPageview(fileName);
		return true;
	});

});

Then on every link you wish to track, simply add the rel attribute to your non HTML files as follows:

<a href="myData.zip" rel="download">Download My ZIP Data File</a>

Tracking Downloads of Specifc File Types (E.g. PDF files)

Using the dollar sign to match against links that end in .pdf (or any extension you wish to track).

$(document).ready(function() {

	$("a[href$=pdf]").click( function() {
		var myPDF = "/pdfDownloads/" . $(this).attr("href");
		pageTracker._trackPageview(myPDF);
		return true;
	});

});

The /pdfDownloads/ is used to identify and seperate report data within Google Analytics.

Tracking the click of a specific link such as an RSS feed

Simply add an identifier to your RSS feed link (in this example the link was given an id of ‘rssFeed’):

$(document).ready(function() {

	$("a#rssFeed").click( function() {
		pageTracker._trackEvent("RSS", "RSS Subscriber Link Clicked");
		return true;
	});

});

Tracking mailto: Link Clicks

$(document).ready(function() {

	$("a[href^=mailto:]").click( function() {
		pageTracker._trackEvent("Mail", "User clicked on mailto link");
		return true;
	});

});

Tidying up….

You should also disable the clicked element to prevent multiple event recording and provide feedback. To do this, simple add the following at the start of each piece of code – disbabling the element and changing the cursor to an egg timer (although you could display a small graphic to make things look prettier):

$(this).css("cursor", "wait");
$(this).attr("disabled", true);

PHP Arrays

Further to my article on using JQuery to dynamically append form elements, I have come across situations where multiple items should be appended to the form each time, as opposed to a single input in my article (I did this simplicity). For example, at work I’m currently working on an internal system whereby a user needs to add an unlimited amount of client contacts for a client. Pressing the ‘add contact’ link will append 3 fields – one for conatct name, contact telephone and contact email. Each of these fields are named exactly the same way as before (using square brackets at the end of the name E.g. ‘name[]‘) and appended the same way using JQuery.

There are lots of articles floating about explaing how to add fields, but I’ve not yet seen anything explaining how to retreive multiple elements like this.

The only differnce arises when retreiving these multiple values from the PHP’s POST array. In the example I have appended 3 inputs, named cname[], cemail[] and ctel[]. The values of each can be retreived using a slightly enchanced for loop:

if (isset($_POST['cname'])) {
for ( $i=0;$i<count($_POST['cname']);$i++) {
$contactname = $_POST['cname'][$i];
$conatctemail = $_POST['cemail'][$i];
$contacttel = $_POST['ctel'][$i];
}
}

That’s really all there is to it and I’m finding that the latter comes in useful quit regularly in every day projects.

<script src="/js/jQuery.min.js" type="text/javascript"></script>

The preferred and better way is to host your JQuery through Google E.g.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

So, why is this better? Well there are several valid reasons:

CDN (Content Delivery Network) – Google’s datacenters are located over a range of locations and when a user requests content the closest location is automatically chosen. This is better because it does not force users to download from a single server location (E.g your server) and the chances are Google will be able to serve content faster than your webhost. A similar theory is used for the popularweb based game called quakelive. Usually CDN‘s are a service you pay for, but you’re getting this free through Google!

Less server load – When all your website’s files are located on a single server, downloading them simulainiously increases server load and some users will recieve delays while files download. By having an external location for your JQuery library the latter is not an issue.

Improved caching – This is the biggest benefit as users will not have to re-download content. Hosting JQuery on your own server will cause a first time visitor to download the whole file, even if they have several copies of the same file from other sites. Through Google’s CDN, re-requests for the same file will result in a response to cache the file for up to one year, as it understands that it is a repeat request for a duplicate file.

Local Bandwidth savings – by letting Google host the file for you, you are in essence saving bandwidth. For personal sites this may not be an issue, but busy sites will notice significant bandwidth savings.

Google actually suggests using a .load() function to load the library (see below), but this not only interrupts JQuery’s killer feature (document.ready), but also causes an extra HTTP request. Personally I prfer the old fashioned script method, even though there are several other valid reasons to use the .load() method.

<script type="text/javascript"
        src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("jquery", "1.3.2");
  google.setOnLoadCallback(function() {
  });
</script>

<script src="js/jquery.js" type="text/javascript"></script>
<h1>New User Signup</h1>
<form action="index.php" method="post">

  <label for="name">Username:</label>
  <input id="name" name="name" type="text" />
  <label for="name">Password:</label>
  <input id="password" name="password" type="text" />

   <div id="container">
      <a href="#"><span>» Add your favourite links.....</span></a>
   </div>

   <input id="go" class="btn" name="btnSubmit" type="submit" value="Signup" />
</form>

The only part that isn’t standard is highlighted above. This is simply the link users click to add additional form fields on the fly. To make that happen we’ll need some JQuery:

var count = 0;
$(function(){
	$('p#add_field').click(function(){
		count += 1;
		$('#container').append('<strong>Link #' + count + '</strong>'+ '<input id="field_' + count + '" name="fields[]' + '" type="text" />' );
	});
});

Jquery makes it very easy to add for elements using the append method. As we need to assign a unique name to each additional input (as we are allowing the user to add an indefinite amount of inputs) I’ll use a variable to keep track of the number of inputs added. Whenever an input is added, the counter variable increments by one. Another thing to notice is how the fields are named using ‘txt[]‘. This creates an array of field names. So now when we click the ‘add_field’ link, a new input field is appended to the contianer div – view example.

The only other order of business is to save this information to a database. This would be easy if we had static field names for the whole form, but we don’t. We have the following:

<input id="name" name="name" type="text" />
<input id="password" name="password" type="text" />
<input id="field_1" name="fields[]" type="text" />
<input id="field_2" name="fields[]" type="text" />
<input id="field_3" name="fields[]" type="text" />
.
.
.
etc.

To capture this dynamic fields we’ll need to use a bit of PHP to loop through our posted array and saving the data using a many-many relationships using the following database structure – allowing a user to be associated with an unlimited number of websites:

Many-Many Data Structure For Users And Sites

The following PHP code will grab our static and dynamic form values and insert into the above data structure. We’ll be using a class for the database to minimise the amount of code written. Firstly we’ll check if the forma has actually been submitted, grab the static values (username and password) and insert these into our users table:

//If form was submitted
if (isset($_POST['btnSubmit'])) {

	//create instance of database class
	$db = new mysqldb();
	$db->select_db();

	//Insert static values into users table
	$sql_user = sprintf("INSERT INTO users (Username, Password) VALUES ('%s','%s')",
						mysql_real_escape_string($_POST['name']),
						mysql_real_escape_string($_POST['password']) );
	$result_user = $db->query($sql_user);

PHP’s sprintf function was used to format the sql query. I also escape input to prevent nasty things from happening. Now we need to check if the user has actually added any favourite websites in order to prevent a php error if we try to find non-existant values, if they have added a field we’ll need the user id number previously inserted into the users table, as we’ll need to insert this elsewhere later on:

//Check if user has actually added additional fields to prevent a php error
	if ($_POST['fields']) {

		//get last inserted userid
		$inserted_user_id = $db->last_insert_id();

Next we loop through the added form field values. This is where naming the field as in our append function as ‘txt[]‘ comes in, as all fields we added are submiited as an array called txt. Using a for each loop we can assign values to all dynamically added fields and save them to database. The $key is simply the fields name (field_1) and the $key is our actual value entered for that field. Now we know this, we can easily generate the sql statements within the loop. Firstly we add the website into the websites table, get the id of the inserted website and insert this into the the link table, using the userid from before. To finish, we display a confirmation message and disconnect from the database:

//Loop through added fields
		foreach ( $_POST['fields'] as $key=>$value ) {

			//Insert into websites table
			$sql_website = sprintf("INSERT INTO websites (Website_URL) VALUES ('%s')",
						    	   mysql_real_escape_string($value) );
			$result_website = $db->query($sql_website);
			$inserted_website_id = $db->last_insert_id();

			//Insert into users_websites_link table
			$sql_users_website = sprintf("INSERT INTO users_websites_link (UserID, WebsiteID) VALUES ('%s','%s')",
						    	   mysql_real_escape_string($inserted_user_id),
								   mysql_real_escape_string($inserted_website_id) );
			$result_users_website = $db->query($sql_users_website);

		}

	} else {

		//No additional fields added by user

	}
	echo "
<h1>User Added, <strong>" . count($_POST['fields']) . "</strong> website(s) added for this user!</h1>
";

	//disconnect mysql connection
	$db-&gt;kill();

As a result, our database should be populated as follows (these are screenshots from phpmyadmin):

All our data tables are populated and the correct website and user id are inserted into the link table

You can view the source of php file here or download the original source files (you’ll need to open classes/db.class.php and populate the sql variables with your own database details). The MySQL source to create the tables is also included in the source files.

JQuery - JavaScript Framework

Occasionally it is useful to silently load content into an area on a webpage. For example, you may have a list of recent comments that you want to refresh every minute. Using a meta refresh is one option, but this would cause the whole page to refresh, which could annoy the user. The solution is Ajax, where I’ll reload the content silently without a single page refresh. Even writing the simplist of Ajax functions is quite painful and requires a fair few lines of code to get things done. To make things simpler we’ll use my favourite JavaScript Framework,  JQuery.

The plan is to have dynamic content loaded via Ajax and refresh every x seconds. We’ll also have a loading image to show the user something is actually happening behind the scenes, as having nothing while the content is loading could make the user leave. The latter is especially important when querying large sets of data, where a delay is possible. You can get your own loading images from the ajax loading image site.Now we have a plan, we’ll get right into it.

First course of action is to setup our basic html page. It’s nothing amazing, simply a centered divider with a seperate divider for the loading graphic. Here’s the code we’ll be using (for simplicity I’ve used the style tag for the css, as opposed to having a seperate css file:

<!--
	body, h1 {
		font-family: Verdana, Arial, Helvetica, sans-serif;
		font-size: 0.8em;
	}
	a {
		text-decoration: none;
		color: #333;
	}
	a:hover {
		color: #ff0000;
	}

	#ajax-content {
		height: auto;
		width: 400px;
		border: 5px solid #ccc;
		margin: 0 auto;
		padding: 10px;
	}
	#loading {
		width: 66px;
		margin: 0 auto;
	}
-->
<script src="jquery-1.2.3.min.js" type="text/javascript"></script>
<div id="loading">
   <img src="loader.gif" alt="content is loading" width="100" height="100" />
</div>

The JQuery library has also been included in the header – you can download JQuery from the official site. Our actual content will be loaded into the div called ‘ajax-content’. For the content I’ve simply used an external php file that echos an un-ordered list and the current server time (you can then see that the content has been refreshed as the time changes). This has been done for simplicity, but you could easily query a database for information. PHP’s sleep function was used to create a delay when loading the content, this way you can see something is actually happening. In reality you would never want to use sleep, as it simply delays loading times. The contents of the PHP file are as follows:

Last Updated: ".date('h:i:s A')."";
echo "
<h1>Big List of Software</h1>
";
echo "
<ul>
	<li><a href="http://link.com">RmBarCode 1.00a</a></li>
	<li><a href="http://link.com">ServerMask 3.0.4</a></li>
	<li><a href="http://link.com">LinkDeny 1.1.0</a></li>
	<li><a href="http://link.com">Drag Racer 1</a></li>
	<li><a href="http://link.com">Method123 Educational 3.6</a></li>
	<li><a href="http://link.com">Easy St. Tycoon 1.0</a></li>
	<li><a href="http://link.com">iColorPicker 6.18</a></li>
	<li><a href="http://link.com">USB Virus Scan 2.3</a></li>
	<li><a href="http://link.com">AWP Light FREE 2.0</a></li>
	<li><a href="http://link.com">ZipEnable 3.0.2</a></li>
	<li><a href="http://link.com">w3compiler 1.1.2</a></li>
	<li><a href="http://link.com">Remote Reboot 2.0</a></li>
	<li><a href="http://link.com">Pixeur 2.9.0.15</a></li>
	<li><a href="http://link.com">Mailing Master 2.0</a></li>
	<li><a href="http://link.com">Rewards Multiply 2.0</a></li>
</ul>
";
?&gt;

Now enters the magic, the JQuery. The following code is placed in script tags in the document head, I’ll explain line by line how this works.

function fetchAjaxContent() {
	var numRand = Math.floor(Math.random()*101);
	$('#ajax-content').load('ajax.php?UID=' + numRand);
}

For simplicity I’ll add a generic function that load’s the contents of our PHP file (ajax.php) via Ajax. This simply uses JQuery’s load function to load the contents of ajax.php. The random number is placed in the querystring to stop Internet Explorer caching the results. The latter could also be done server side via adding the below to ajax.php:

header("cache-control: no-cache");

The following code is placed inside JQuery’s document ready function. Firstly we hide the divider that will contain the ajax content. using more of JQuery’s built in ajax function, I use the ajaxStart function (that is executed whenever an AJAX request begins and there is none already active). In this instance the loading image is simply displayed. The opposite function used is ajaxStop (executed whenever all AJAX requests have ended) to hide the loading image and show the loaded content. Finally, we’ll call our function from previously, ‘fetchAjaxContent()’ from within the JavaScript setInterval function (calls a function at specified intervals in milliseconds, every 5 seconds is used in this example). The complete code for the document ready looks like this:

$(document).ready(function() {

        $('#ajax-content').hide();

	$("#loading").ajaxStart(function(){
		$('#ajax-content').slideUp();
                $(this).show();
	});

	$("#loading").ajaxStop(function(){
	         $(this).hide();
	         $("#ajax-content").slideDown();
	}); 

	setInterval("fetchAjaxContent()", 5000);

});

That’s it basically. You can now view a working example or download the source files. Notice how after each refresh, 5 seconds has elapsed in the printed output.

Thanks for reading!