(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);