var awefsomeGallery = Class.extend({
/*
we simply just need two main elements:
ul -> unordered lists of thumbnails (unique id'ed)
li(s) -> list item:
a -> link to the actual image
img -> image of thumbnail (TODO: if the img does not exists, use the link in )
div -> placeholder to hold the selected img (unique id'ed)
img -> optional img tag. class="selected"
actions:
init
show tagged image. if no image was tagged, show the first image. (use li.active to tag.)
on click of link,
show image.
remove previous li active state. set parent of curr to active.
'show' animation.
default:
opacity.
TODO:user defined. pass in jquery animation params. (DONE)
TODO: defined "opacity". define other animation types ASAP?
more TODO:
flexible structure
ul
li
a (link to full-res)
img (thumbs)
ul
li
a (link to full-res image)
ul
li
img (full-res image)
thats all
*/
init: function(){
this.settings = this.settings(arguments[0]);
if(this.settings.wordpress_gallery == false){
this.ul = $("#"+this.settings.ul_id);
this.first_li = $("#"+this.settings.ul_id +" li:first-child");
this.div = $("#"+this.settings.placeholder_id);
var curr_li = this.first_li;
// do ajax-loadeer
this.loader = $('#ajax-loader');
if(!this.loader){
this.ul.before("![]("+this.settings.ajax_loader+")
");
this.loader = $('#ajax-loader');
}
this.loader.hide();
//create an img in the div tag.
// check if an img already exist?
// first case => ![]()
if($("#"+this.settings.placeholder_id+" img").hasClass("selected")){
// img tag exists
this.img = $("#"+this.settings.placeholder_id+" img.selected");
}else{
// no img tag
this.div.append('![]()
');
this.img = $("#"+this.settings.placeholder_id+" img.selected");
// set default img
this.img.attr("src", this.first_li.children("a").attr("href"));
}
this.div.append('
');
//set default caption
this.caption = $('p.caption');
this.caption.text(this.first_li.children("a").attr("title"));
// while there is a next li with a child that has a href
do{
var curr_link = curr_li.children("a:first-child");
var img_href = curr_link.attr("href");
var img_caption = curr_link.attr("title");
//alert(img_href);
// remove curr link click action
// replace curr img.src with href
curr_link.bind("click", {img:this.img, href:img_href, caption:img_caption, object:this}, function(event){
var in_img = event.data.img;
var in_href = event.data.href;
var in_caption = event.data.caption;
var object = event.data.object;
object.caption.text(in_caption);
// animate
try {
object.show({
img:in_img,
href:in_href,
caption:in_caption,
animation:{type:"opacity", duration:200},
ajax_loader:object.settings.ajax_loader
});
}
catch(e){
alert(e);
return false;
}
return false;
});
curr_li = curr_li.next();
}
while(curr_li.children("a").attr("href"));
}else{
// is a wordpress gallery
/*
*/
this.parent_div = $("div.gallery");
this.first_list = $("div.gallery dl:first-child");
this.div = $("#"+this.settings.placeholder_id);
var curr_list = this.first_list;
// set up div placeholder
if($("#"+this.settings.placeholder_id+" img").hasClass("selected")){
// img tag exists
this.img = $("#"+this.settings.placeholder_id+" img.selected");
}else{
// no img tag
this.div.append('![]()
');
this.img = $("#"+this.settings.placeholder_id+" img.selected");
// set default img
this.img.attr("src", this.first_li.children("a").attr("href"));
}
// while there is a next dl with a child that has a href
do{
var curr_link = curr_li.children("a:first-child");
var img_href = curr_link.attr("href");
//alert(img_href);
// remove curr link click action
// replace curr img.src with href
curr_link.bind("click", {img:this.img, href:img_href, object:this}, function(event){
var in_img = event.data.img;
var in_href = event.data.href;
var object = event.data.object;
// animate
try {
object.show({
img:in_img,
href:in_href,
animation:{type:"opacity", duration:200},
ajax_loader:object.settings.ajax_loader
});
}
catch(e){
alert(e);
return false;
}
return false;
});
curr_li = curr_li.next();
}
while(curr_li.children("a").attr("href"));
}
},
settings: function(args){
// define default settings
var settings = {
ul_id:null,
placeholder_id:null,
active_tag:"active",
animation_type:"",
wordpress_gallery:false,
ajax_loader:"../images/ajax-loader.gif"
};
if(args.ul_id !== undefined){
settings.ul_id = args.ul_id;
}
if(args.placeholder_id !== undefined){
settings.placeholder_id = args.placeholder_id;
}
if(args.active_tag !== undefined){
settings.active_tag = args.active_tag;
}
if(args.animation_type !== undefined){
settings.animation_type = args.animation_type;
}
if(args.wordpress_gallery !== undefined){
settings.wordpress_gallery = args.wordpress_gallery;
}
if(args.ajax_loader !== undefined){
settings.ajax_loader = args.ajax_loader;
}
return settings;
},
show: function(args){
/*
expected args:
args.img => img DOM object
args.href => img link
args.caption => img caption
args.animation => animation object. contains animation properties
animation.type => "opacity","slideUp", "slideDown", "slideLeft", "slideRight" (TODO: add more animation types?)
animation.duration => in milliseconds
*/
// TODO: input check + sanitize
var default_type = "opacity";
var default_duration = 200;
if(!args.img){
throw "Error: Invalid animation call. Please specify img DOM object";
}
if(!args.href){
throw "Error: Invalid animation call. Please specify link to full-res image";
}
if(args.animation == undefined){
args.animation = new Object();
args.animation.type = default_type; // default animation type
args.animation.duration = default_duration; // default animation duration
}else{
// means animation object already defined
if(args.animation.type == undefined){
args.animation.type = default_type;
}
if(args.animation.duration == undefined){
args.animation.duration = default_duration;
}
}
// animate
switch(args.animation.type){
case "opacity":
args.img.animate({opacity:0}, {duration:args.animation.duration, queue:true});
$("#ajax-loader").show();
args.img.one('load', function(){
$("#ajax-loader").hide();
$(this).animate({opacity:1}, {duration:args.animation.duration, queue:true});
});
args.img.attr("src", args.href);
break;
case "slideUp":
case "slideDown":
case "slideLeft":
case "slideRight":
default:
throw "Error: Unexpected animation type";
}
}
});
