jQuery, Binding to HTML Buttons

jQuery, Binding to HTML Buttons

I have been working on a new project, a demo of which can be viewed here.
Most of the things are ready to go as they are but my main issues come
with a jQuery portfolio plugin I am using. You can view the demonstration
of its usage here. You can see that on the demo page under the head
Default Settings, 12 items per page that it is using a custom header to
filter between categories defined on an XML generated page, code to which
is as under;
<?xml version="1.0" encoding="UTF-8"?>
<categories>
<category id="cardgames">Card Games</category>
<category id="environments">Environments</category>
<category id="character">Character</category>
<category id="animations">Animations</category>
</categories>
<!-- Items Start -->
<items>
<!-- Individual Item Starts -->
<item>
<thumbnail>images/thumbnails/1-thumb.jpg</thumbnail>
<preview>images/jpegs/1.jpg</preview>
<category>cardgames,environments,character,animations</category>
<description>Description goes here</description>
</item>
<!-- Individual Item Ends -->
<!-- Individual Item Starts -->
<item>
<thumbnail>images/thumbnails/2-thumb.jpg</thumbnail>
<preview>images/jpegs/2.jpg</preview>
<category>cardgames,environments,character,animations</category>
<description>Description goes here</description>
</item>
<!-- Individual Item Ends -->
<!-- Individual Item Starts -->
<item>
<thumbnail>images/thumbnails/3-thumb.jpg</thumbnail>
<preview>images/jpegs/3.jpg</preview>
<category>cardgames,environments,character,animations</category>
<description>Description goes here</description>
</item>
<!-- Individual Item Ends -->
<!-- Individual Item Starts -->
<item>
<thumbnail>images/thumbnails/4-thumb.jpg</thumbnail>
<preview>images/jpegs/4.jpg</preview>
<category>cardgames,environments,character,animations</category>
<description>Description goes here</description>
</item>
<!-- Individual Item Ends -->
<!-- Individual Item Starts -->
<item>
<thumbnail>images/thumbnails/5-thumb.jpg</thumbnail>
<preview>images/jpegs/5.jpg</preview>
<category>cardgames,environments,character,animations</category>
<description>Description goes here</description>
</item>
<!-- Individual Item Ends -->
</items>
You can see that the categories for the filters are being defined here on
XML and then being called through a second JavaScript, code to which is;
(function($){
$.fn.portfolioSetter=function(options){
var defaults={
//default settings
itemsPerPage: 10, //the number of items per page
pageWidth: 840, //the width of each page
pageHeight:320, //the height of each page
itemMargin:15, //margin of each of the portfolio items
showCategories: false, // if set to false, the categories will be
hidden
allText: 'ALL', //the ALL text displayed before the categories names
easing: 'easeOutExpo', //the animation easing
animationSpeed: 800, //the speed of the animation of the pagination
navButtonWidth:30, //the width of the pagination button
wavyAnimation:false, //if set the true, all the elements will fade
in consecutively with a wavy effect
xmlSource : 'portfolio.xml', //the XML file from which the data
is exctracted
pageWrapperClass: 'page_wrapper', //the class of the div that
wraps the items in order to set a page
navigationId: 'portfolio_pagination', //the ID of the pagination div
categoriesId: 'portfolio_categories', //the ID of the categories div
itemClass: 'portfolio_item' //the class of the div that wraps each
portfolio item data
};
var options=$.extend(defaults, options);
options.pageHolder=$(this);
//define some helper variables
var categories=[], items=[], pageWrappers=[], imagesLoaded=0,
counter=0, ie=false, categoryHolder;
var root=$('<div />').css({width:(options.pageWidth*2),
height:options.pageHeight, float:'left'});
$(this).css({width:options.pageWidth, height:'auto',
overflow:'hidden'}).append(root);
var parentId=$(this).attr('id');
init();
function init() {
root.parent().append('<div class="loading"></div>');
loadItems();
}
/**
* Parses the XML portfolio item data.
*/
function loadItems(){
$.ajax({
type:'GET',
url: options.xmlSource,
dataType:'xml',
success:function(xml){
//get the settings
if($(xml).find('show_categories:first').text()==='off'){
options.showCategories=false;
}
if(options.showCategories){
//get the portfolio categories
$(xml).find('categories').eq(0).find('category').each(function(i){
var current=$(this);
var category = {
id: current.attr('id'),
name: current.text()
};
categories.push(category);
});
}
//get the portfolio items
$(xml).find('item').each(function(i){
var current=$(this);
var thum=current.find('thumbnail:first').text();
var prev = current.find('preview:first').text();
var cat=current.find('category:first').text().split(',');
var desc = current.find('description:first').text();
var item = {
thumbnail:thum,
preview:prev,
category:cat,
description:desc,
obj:$('<div class="'+options.itemClass+'"><a
rel="lightbox_'+parentId+'" class="single_image"
href="'+prev+'" title="'+desc+'"><img src="'+thum+'"
/></a></div>')
};
items.push(item);
});
setSetter();
}
});
}
/**
* Calls the main functions for setting the portfolio items.
*/
function setSetter(){
if($.browser.msie){
ie=true;
}
root.siblings('.loading').remove();
root.after('<div id="'+options.navigationId+'"><ul></ul></div>');
if(options.showCategories){
displayCategories();
}
loadImages();
}
/**
* Displays the categories.
*/
function displayCategories(){
categoryHolder=$('<div id="'+options.categoriesId+'"></div>');
categoryHolder.append('<div
id="portfolio_categories_left"></div><ul></ul><div
id="portfolio_categories_right"></div>');
root.before(categoryHolder);
var catUl=categoryHolder.find('ul#links');
//add the ALL link
var allLink= $('<li>'+options.allText+'</li>');
catUl.append(allLink);
showSelectedCat(allLink);
//bind the click event
allLink.bind({
'click': function(){
displayItems();
showSelectedCat($(this));
},
'mouseover':function(){
$(this).css({cursor:'pointer'});
}
});
//add all the category names to the list
var catNumber=categories.length;
for(var i =0; i<catNumber; i++)(function(i){
var category = $('<li>'+categories[i].name+'</li>');
catUl.append(category);
//bind the click event
category.bind({
'click': function(){
displayItems(categories[i].id);
showSelectedCat($(this));
},
'mouseover':function(){
$(this).css({cursor:'pointer'});
}
});
})(i);
}
function showSelectedCat(selected){
//hide the previous selected element
var prevSelected=categoryHolder.find('ul li.selected');
if(prevSelected[0]){
var prevHtml=prevSelected.find('div.port_cat').html();
prevSelected.html(prevHtml);
prevSelected.removeClass('selected');
}
//show the new selected element
var html = selected.html();
selected.html('<div class="port_cat_active"><div
class="port_cat_l"></div><div class="port_cat">'+html+'</div><div
class="port_cat_r"></div> </div>');
selected.addClass('selected');
}
/**
* Loads the images. When all the images are loaded calls the displayItems
* function to display the images.
*/
function loadImages(){
var imageCount=items.length;
for(var i in items){
if(items.hasOwnProperty(i)){
var img = new Image();
$(img).load(function() {
imagesLoaded++;
if(imagesLoaded===imageCount){
//all the images are loaded, display them all
displayItems();
}
}).attr('src', items[i].thumbnail);
}
}
}
/**
* Displays the portfolio items.
*/
function displayItems(){
var filterCat=arguments.length===0?false:true;
//reset the divs and arrays
root.html('');
root.width(200);
pageWrappers=[];
root.animate({marginLeft:0});
var length=items.length;
counter=0;
var catId=arguments[0];
for ( var i = 0; i < length; i++)
(function(i, filterCat, catId) {
if(!filterCat || (filterCat &&
items[i].category.contains(catId))){
if(counter%options.itemsPerPage===0){
//create a new page wrapper and make the holder wider
root.width(root.width()+options.pageWidth+20);
var wrapper=$('<div
class="'+options.pageWrapperClass+'"></div>').css({float:'left',
width:options.pageWidth+options.itemMargin,
height:options.pageHeight});
pageWrappers.push(wrapper);
root.append(wrapper);
}
if(ie){
//var obj=$('<div class="'+options.itemClass+'"
style="background-image:url('+items[i].thumbnail+');"
><a rel="lightbox" class="single_image"
href="'+items[i].preview+'"
title="'+items[i].description+'"></a><img
class="hidden" /></div>');
var obj=$('<div class="'+options.itemClass+'" ><a
rel="lightbox_'+parentId+'" class="single_image"
href="'+items[i].preview+'"
title="'+items[i].description+'"><img
src="'+items[i].thumbnail+'" /></a></div>');
pageWrappers[pageWrappers.length-1].append(obj.css({display:'none'}));
items[i].obj=obj;
}else{
pageWrappers[pageWrappers.length-1].append(items[i].obj.css({display:'none'}));
}
var timeout=counter>=options.itemsPerPage?0:100;
if(counter>=options.itemsPerPage || !options.wavyAnimation){
items[i].obj.fadeIn().animate({opacity:1},0);
}else{
setTimeout(function() {
//display the image by fading in
items[i].obj.fadeIn().animate({opacity:1},0);
},counter*100);
}
counter++;
}
})(i,filterCat, catId);
//call the lightbox plugin
$('a[rel="lightbox_'+parentId+'"]').colorbox({current:"{current}/{total}"});
//show the navigation buttons
showNavigation();
setHoverFunctionality();
}
/**
* Displays the navigation buttons.
*/
function showNavigation(){
//reset the divs and arrays
var navUl=root.siblings('#'+options.navigationId).find('ul');
navUl.html('');
var pageNumber=pageWrappers.length;
if(pageNumber>1){
for(var i=0; i<pageNumber; i++)(function(i){
var li = $('<li></li>');
navUl.append(li);
//bind the click handler
li.bind({
'click': function(){
var
marginLeft=i*options.pageWidth+i*options.itemMargin-2;
//set a bigger margin for IE6
if ($.browser.msie && $.browser.version.substr(0,1)<7) {
marginLeft+=i*options.itemMargin;
}
root.animate({marginLeft:[-marginLeft,options.easing]},
options.animationSpeed);
navUl.find('li.selected').removeClass('selected');
$(this).addClass('selected');
},
'mouseover':function(){
$(this).css({cursor:'pointer'});
}
});
})(i);
navUl.find('li:first').addClass('selected');
//center the navigation
var
marginLeft=(options.pageWidth)/2-pageNumber*options.navButtonWidth/2;
navUl.css({marginLeft:marginLeft});
}
}
function setHoverFunctionality(){
$('.portfolio_item').hover(function(){
$(this).stop().animate({opacity:0.8}, 300);
}, function(){
$(this).stop().animate({opacity:1}, 300);
});
}
};
So besides all the customizations being offered in the aforementioned
javascript code which I have already achieved, the function that sets the
category click event handlers is displayCategories() starting on line 117
of the file. What this function does is creating the category elements
from the ones that are set in the XML file, it appends the category
elements to a parent element and sets the click handlers to them.
Have a look at my website's gallery again, here on left sidebar you can
see HTML buttons under 'All Art Work'
These are 5 buttons in total created through CSS sprites, I am trying to
use them instead of the custom XML header to filter between categories!
What I tried is to leave the left sidebar empty and leave the gallery code
create the links automatically. I created an empty tag in the left sidebar
and assigned the selector of that tag on line 122 of JS file:
var catUl=categoryHolder.find('ul');
So that the code can append the category links to that ul and I can test
if this will work et all. I met a dead-end here.
My question in short is, is there another, simpler way through which I can
call the categories through my HTML anchored buttons from the javascript
file or any events I can create as to meet this requirement?
You might have already figured out I am not a JS guru so your help is much
welcomed. Thanks & Regards. PS: Pls ask away any code from the XML or
JavaScript files, I'll repost for you.