Yesterday I did a small job for a company that involved converting a Flash Image Gallery tobeatles_apple HTML+jQuery. I used to think Steve Jobs was a Day Tripper when he said they would not support Flash on the iPad, don’t Ask Me Why but I now agree with him and I feel fine.

I don’t want to spoil the party but I am not even talking about HTML5 here either, just your normal run of the mill HTML with a splash of jQuery.

Let’s Get Back to the point though shall we, every man and their dog and their dogs dog seems to own an iPad these days and according to a few people Apple will be bigger than Jesus soon (didn’t someone else Apple related get in to trouble for saying that.) so it makes sense to conform and ‘step away from the Flash’

Anyway, this particular gallery was a remarkably easy piece of work to convert and definitely not The Long and Winding Road that you might think With a Little Help From My Friends jQuery, jQuery Templates and Amplify.

So let the Revolution begin and let’s start converting all that Flash stuff to HTML+jQuery.

The Flash Gallery in question (shown below) used an XML file as the source of the gallery data and I Want To Tell You that was a snap to read in and parse in to an object array. I did that *Because *I wanted to bind to my jQuery Templates.

Converted Flash Gallery

Step 1: Set up you Amplify Request

amplify.request.define("GetClientGallery", "ajax", { url: "data/ClientGallery.xml", dataType: "xml", type: "GET", cache: 3600000 });

Step 2: Convert the XML to an Object Array

function ConvertToObjectArray(galleryXml) { var index = 0; var newArray = new Array(); $(galleryXml).find('category').each(function () { if ($(this).attr("enabled") == 'true') { var entity = new Object(); entity.Id = index; entity.Title = $(this).attr("caption"); var largePath = $(this).attr("largeimages"); var thumbPath = $(this).attr("thumbimages"); var imageIndex = 0; var images = new Array(); $(this).find('image').each(function () { var image = new Object(); image.Id = imageIndex; image.EntityId = index; image.Thumb = thumbPath + "/" + $(this).attr("filename"); image.Large = largePath + "/" + $(this).attr("filename"); image.AltText = $(this).attr("caption"); images[imageIndex] = image; imageIndex++; }); entity.Images = images; newArray[index] = entity; index++; } }); return newArray; }

Step 3: Render the Gallery and bind your click handlers

function RenderGallery(galleryXml, target) { dataArray = ConvertToObjectArray(galleryXml); $(target).children().remove(); $("#category-template").tmpl(dataArray).appendTo(target); $(".gallery-list li:first").addClass("selected"); //Preload images and then load first item in list $("#preload-template-thumbs").tmpl(dataArray[0].Images).appendTo("#preload"); LoadSelectedImages(dataArray[0]); //Bind click event for gallery items $(".gallery-list li").click(function () { $(".gallery-list li").removeClass("selected"); $(this).addClass("selected"); LoadSelectedImages(dataArray[$(this).data("id")]); }) }

Step 4: Load the selected images and add a nice little FadeIn and Out effect.

function LoadSelectedImages(entity) { $("ul.gallery-thumbs").children().remove(); $("#thumb-template").tmpl(entity.Images).appendTo("ul.gallery-thumbs"); $("ul.gallery-thumbs img").unbind("click"); $("ul.gallery-thumbs img").click(function () { $("ul.gallery-thumbs img").removeClass("selected"); var selected = $(this); $(selected).fadeOut(150, function () { $(selected).fadeIn(150); $(selected).addClass("selected"); imageId = $(this).data("id"); entityId = $(this).data("entityid"); $("img.gallery-image").fadeOut('fast', function () { LoadLargeImage(dataArray[entityId].Images[imageId]); }); }); }); if (entity.Images.length > 0) { LoadLargeImage(entity.Images[0]); } }

You don’t need to work Eight Days a Week to create a nice Image Gallery and you don’t need Flash. *All You Need is Love *and little HTML+jQuery magic.

Everybody’s Got Something to Hide Except Me and My Monkey so here’s the link to the final project.

The End

BondiGeek