(function($){
$.fn.galleryview = function(options) {
var opts = $.extend($.fn.galleryview.defaults,options);
var id;
var iterator = 0;
var gallery_width;
var gallery_height;
var frame_margin = 10;
var strip_width;
var wrapper_width;
var item_count = 0;
var slide_method;
var img_path;
var paused = false;
var frame_caption_size = 20;
var frame_margin_top = 5;
var pointer_width = 2;
//define jquery objects for reuse
var j_gallery;
var j_filmstrip;
var j_frames;
var j_panels;
var j_pointer;
function showitem(i) {
//disable next/prev buttons until transition is complete
$('img.nav-next').unbind('click');
$('img.nav-prev').unbind('click');
j_frames.unbind('click');
if(has_panels) {
if(opts.fade_panels) {
//fade out all panels and fade in target panel
j_panels.fadeout(opts.transition_speed).eq(i%item_count).fadein(opts.transition_speed,function(){
if(!has_filmstrip) {
$('img.nav-prev').click(showprevitem);
$('img.nav-next').click(shownextitem);
}
});
}
}
if(has_filmstrip) {
if(slide_method=='strip') {
j_filmstrip.stop();
var distance = getpos(j_frames[i]).left - (getpos(j_pointer[0]).left+2);
var leftstr = (distance>=0?'-=':'+=')+math.abs(distance)+'px';
j_filmstrip.animate({
'left':leftstr
},opts.transition_speed,opts.easing,function(){
if(i>item_count) {
i = i%item_count;
iterator = i;
j_filmstrip.css('left','-'+((opts.frame_width+frame_margin)*i)+'px');
} else if (i<=(item_count-strip_size)) {
i = (i%item_count)+item_count;
iterator = i;
j_filmstrip.css('left','-'+((opts.frame_width+frame_margin)*i)+'px');
}
if(!opts.fade_panels) {
j_panels.hide().eq(i%item_count).show();
}
$('img.nav-prev').click(showprevitem);
$('img.nav-next').click(shownextitem);
enableframeclicking();
});
} else if(slide_method=='pointer') {
j_pointer.stop();
var pos = getpos(j_frames[i]);
j_pointer.animate({
'left':(pos.left-2+'px')
},opts.transition_speed,opts.easing,function(){
if(!opts.fade_panels) {
j_panels.hide().eq(i%item_count).show();
}
$('img.nav-prev').click(showprevitem);
$('img.nav-next').click(shownextitem);
enableframeclicking();
});
}
if($('a',j_frames[i])[0]) {
j_pointer.unbind('click').click(function(){
var a = $('a',j_frames[i]).eq(0);
if(a.attr('target')=='_blank') {window.open(a.attr('href'));}
else {location.href = a.attr('href');}
});
}
}
};
function shownextitem() {
$(document).stoptime("transition");
if(++iterator==j_frames.length) {iterator=0;}
showitem(iterator);
$(document).everytime(opts.transition_interval,"transition",function(){
shownextitem();
});
};
function showprevitem() {
$(document).stoptime("transition");
if(--iterator<0) {iterator = item_count-1;}
showitem(iterator);
$(document).everytime(opts.transition_interval,"transition",function(){
shownextitem();
});
};
function getpos(el) {
var left = 0, top = 0;
var el_id = el.id;
if(el.offsetparent) {
do {
left += el.offsetleft;
top += el.offsettop;
} while(el = el.offsetparent);
}
if(el_id == id) {return {'left':left,'top':top};}
else {
var gpos = getpos(j_gallery[0]);
var gleft = gpos.left;
var gtop = gpos.top;
return {'left':left-gleft,'top':top-gtop};
}
};
function enableframeclicking() {
j_frames.each(function(i){
if($('a',this).length==0) {
$(this).click(function(){
$(document).stoptime("transition");
showitem(i);
iterator = i;
$(document).everytime(opts.transition_interval,"transition",function(){
shownextitem();
});
});
}
});
};
function buildpanels() {
if($('.panel-overlay').length>0) {j_panels.append('
');}
if(!has_filmstrip) {
$('
').addclass('nav-next').attr('src',img_path+opts.nav_theme+'/next.png').appendto(j_gallery).css({
'position':'absolute',
'zindex':'1100',
'cursor':'pointer',
'top':((opts.panel_height-22)/2)+'px',
'right':'10px',
'display':'none'
}).click(shownextitem);
$('
').addclass('nav-prev').attr('src',img_path+opts.nav_theme+'/prev.png').appendto(j_gallery).css({
'position':'absolute',
'zindex':'1100',
'cursor':'pointer',
'top':((opts.panel_height-22)/2)+'px',
'left':'10px',
'display':'none'
}).click(showprevitem);
$('
').addclass('nav-overlay').attr('src',img_path+opts.nav_theme+'/panel-nav-next.png').appendto(j_gallery).css({
'position':'absolute',
'zindex':'1099',
'top':((opts.panel_height-22)/2)-10+'px',
'right':'0',
'display':'none'
});
$('
').addclass('nav-overlay').attr('src',img_path+opts.nav_theme+'/panel-nav-prev.png').appendto(j_gallery).css({
'position':'absolute',
'zindex':'1099',
'top':((opts.panel_height-22)/2)-10+'px',
'left':'0',
'display':'none'
});
}
j_panels.css({
'width':(opts.panel_width-parseint(j_panels.css('paddingleft').split('px')[0],10)-parseint(j_panels.css('paddingright').split('px')[0],10))+'px',
'height':(opts.panel_height-parseint(j_panels.css('paddingtop').split('px')[0],10)-parseint(j_panels.css('paddingbottom').split('px')[0],10))+'px',
'position':'absolute',
'top':(opts.filmstrip_position=='top'?(opts.frame_height+frame_margin_top+(opts.show_captions?frame_caption_size:frame_margin_top))+'px':'0px'),
'left':'0px',
'overflow':'hidden',
'background':'white',
'display':'none'
});
$('.panel-overlay',j_panels).css({
'position':'absolute',
'zindex':'999',
'width':(opts.panel_width-20)+'px',
'height':opts.overlay_height+'px',
'top':(opts.overlay_position=='top'?'0':opts.panel_height-opts.overlay_height+'px'),
'left':'0',
'padding':'0 10px',
'color':opts.overlay_text_color,
'fontsize':opts.overlay_font_size
});
$('.panel-overlay a',j_panels).css({
'color':opts.overlay_text_color,
'textdecoration':'underline',
'fontweight':'bold'
});
$('.overlay',j_panels).css({
'position':'absolute',
'zindex':'998',
'width':opts.panel_width+'px',
'height':opts.overlay_height+'px',
'top':(opts.overlay_position=='top'?'0':opts.panel_height-opts.overlay_height+'px'),
'left':'0',
'background':opts.overlay_color,
'opacity':opts.overlay_opacity
});
$('.panel iframe',j_panels).css({
'width':opts.panel_width+'px',
'height':(opts.panel_height-opts.overlay_height)+'px',
'border':'0'
});
};
function buildfilmstrip() {
//add wrapper to filmstrip to hide extra frames
j_filmstrip.wrap('');
if(slide_method=='strip') {
j_frames.clone().appendto(j_filmstrip);
j_frames.clone().appendto(j_filmstrip);
j_frames = $('li',j_filmstrip);
}
//if captions are enabled, add caption divs and fill with the image titles
if(opts.show_captions) {
j_frames.append('').each(function(i){
$(this).find('.caption').html($(this).find('img').attr('title'));
});
}
j_filmstrip.css({
'liststyle':'none',
'margin':'0',
'padding':'0',
'width':strip_width+'px',
'position':'absolute',
'zindex':'900',
'top':'0',
'left':'0',
'height':(opts.frame_height+10)+'px',
'background':opts.background_color
});
j_frames.css({
'float':'left',
'position':'relative',
'height':opts.frame_height+'px',
'zindex':'901',
'margintop':frame_margin_top+'px',
'marginbottom':'0px',
'marginright':frame_margin+'px',
'padding':'0',
'cursor':'pointer'
});
$('img',j_frames).css({
'border':'none'
});
$('.strip_wrapper',j_gallery).css({
'position':'absolute',
'top':(opts.filmstrip_position=='top'?'0px':opts.panel_height+'px'),
'left':((gallery_width-wrapper_width)/2)+'px',
'width':wrapper_width+'px',
'height':(opts.frame_height+frame_margin_top+(opts.show_captions?frame_caption_size:frame_margin_top))+'px',
'overflow':'hidden'
});
$('.caption',j_gallery).css({
'position':'absolute',
'top':opts.frame_height+'px',
'left':'0',
'margin':'0',
'width':opts.frame_width+'px',
'padding':'0',
'color':opts.caption_text_color,
'textalign':'center',
'fontsize':'10px',
'height':frame_caption_size+'px',
'lineheight':frame_caption_size+'px'
});
var pointer = $('');
pointer.attr('id','pointer').appendto(j_gallery).css({
'position':'absolute',
'zindex':'1000',
'cursor':'pointer',
'top':getpos(j_frames[0]).top-(pointer_width/2)+'px',
'left':getpos(j_frames[0]).left-(pointer_width/2)+'px',
'height':opts.frame_height-pointer_width+'px',
'width':opts.frame_width-pointer_width+'px',
'border':(has_panels?pointer_width+'px solid '+(opts.nav_theme=='dark'?'black':'white'):'none')
});
j_pointer = $('#pointer',j_gallery);
if(has_panels) {
}
//if the filmstrip is animating, move the strip to the middle third
if(slide_method=='strip') {
j_filmstrip.css('left','-'+((opts.frame_width+frame_margin)*item_count)+'px');
iterator = item_count;
}
//if there's a link under the pointer, enable clicking on the pointer
if($('a',j_frames[iterator])[0]) {
j_pointer.click(function(){
var a = $('a',j_frames[iterator]).eq(0);
if(a.attr('target')=='_blank') {window.open(a.attr('href'));}
else {location.href = a.attr('href');}
});
}
//add navigation buttons
$('
').addclass('nav-next').attr('src',img_path+opts.nav_theme+'/next.gif').appendto(j_gallery).css({
'position':'absolute',
'cursor':'pointer',
'top':(opts.filmstrip_position=='top'?0:opts.panel_height)+frame_margin_top+((opts.frame_height-22)/2)+'px',
'right':(gallery_width/2)-(wrapper_width/2)-10-22+'px'
}).click(shownextitem);
$('
').addclass('nav-prev').attr('src',img_path+opts.nav_theme+'/prev.gif').appendto(j_gallery).css({
'position':'absolute',
'cursor':'pointer',
'top':(opts.filmstrip_position=='top'?0:opts.panel_height)+frame_margin_top+((opts.frame_height-22)/2)+'px',
'left':(gallery_width/2)-(wrapper_width/2)-10-22+'px'
}).click(showprevitem);
};
function mouseisoverpanels(x,y) {
var pos = getpos(j_gallery[0]);
var top = pos.top;
var left = pos.left;
return x > left && x < left+opts.panel_width && y > top && y < top+opts.panel_height;
};
return this.each(function() {
j_gallery = $(this);
$('script').each(function(i){
var s = $(this);
if(s.attr('src') && s.attr('src').match(/jquery\.galleryview/)){
img_path = s.attr('src').split('jquery.galleryview')[0]+'themes/';
}
});
j_gallery.css('visibility','hidden');
j_filmstrip = $('.filmstrip',j_gallery);
j_frames = $('li',j_filmstrip);
j_panels = $('.panel',j_gallery);
id = j_gallery.attr('id');
has_panels = j_panels.length > 0;
has_filmstrip = j_frames.length > 0;
if(!has_panels) opts.panel_height = 0;
item_count = has_panels?j_panels.length:j_frames.length;
strip_size = has_panels?math.floor((opts.panel_width-64)/(opts.frame_width+frame_margin)):math.min(item_count,opts.filmstrip_size);
if(strip_size >= item_count) {
slide_method = 'pointer';
strip_size = item_count;
}
else {slide_method = 'strip';}
gallery_width = has_panels?opts.panel_width:(strip_size*(opts.frame_width+frame_margin))-frame_margin+64;
gallery_height = (has_panels?opts.panel_height:0)+(has_filmstrip?opts.frame_height+frame_margin_top+(opts.show_captions?frame_caption_size:frame_margin_top):0);
//width of filmstrip
if(slide_method == 'pointer') {strip_width = (opts.frame_width*item_count)+(frame_margin*(item_count));}
else {strip_width = (opts.frame_width*item_count*3)+(frame_margin*(item_count*3));}
wrapper_width = ((strip_size*opts.frame_width)+((strip_size-1)*frame_margin));
j_gallery.css({
'position':'relative',
'margin':'0',
'background':opts.background_color,
'border':opts.border,
'width':gallery_width+'px',
'height':gallery_height+'px'
});
if(has_filmstrip) {
buildfilmstrip();
}
if(has_panels) {
buildpanels();
}
if(has_filmstrip) enableframeclicking();
$().mousemove(function(e){
if(mouseisoverpanels(e.pagex,e.pagey)) {
if(opts.pause_on_hover) {
$(document).onetime(500,"animation_pause",function(){
$(document).stoptime("transition");
paused=true;
});
}
if(has_panels && !has_filmstrip) {
$('.nav-overlay').fadein('fast');
$('.nav-next').fadein('fast');
$('.nav-prev').fadein('fast');
}
} else {
if(opts.pause_on_hover) {
$(document).stoptime("animation_pause");
if(paused) {
$(document).everytime(opts.transition_interval,"transition",function(){
shownextitem();
});
paused = false;
}
}
if(has_panels && !has_filmstrip) {
$('.nav-overlay').fadeout('fast');
$('.nav-next').fadeout('fast');
$('.nav-prev').fadeout('fast');
}
}
});
j_panels.eq(0).show();
if(item_count > 1) {
$(document).everytime(opts.transition_interval,"transition",function(){
shownextitem();
});
}
j_gallery.css('visibility','visible');
});
};
$.fn.galleryview.defaults = {
panel_width: 400,
panel_height: 400,
frame_width: 80,
frame_height: 80,
filmstrip_size: 5,
overlay_height: 70,
overlay_font_size: '1em',
transition_speed: 400,
transition_interval: 6000,
overlay_opacity: 0.6,
overlay_color: 'black',
background_color: '#f0f0f0',
overlay_text_color: 'white',
caption_text_color: 'white',
border: '1px #fff solid',
nav_theme: 'light',
easing: 'swing',
filmstrip_position: 'bottom',
overlay_position: 'bottom',
show_captions: false,
fade_panels: true,
pause_on_hover: false
};
})(jquery);