/*
* jQuery Popeye 2.1 - http://dev.herr-schuessler.de/jquery/popeye/
*
* converts a HTML image list in image gallery with inline enlargement
*
* Copyright (C) 2008 - 2011 Christoph Schuessler (schreib@herr-schuessler.de)
*
* This program is free software; you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation; either version 2 of the License, or
* (at your option) any later version.
*
*/
(function($){$.fn.popeye=function(options){var opts=$.extend({},$.fn.popeye.defaults,options);function debug(text,type){if(window.console&&window.console.log&&opts.debug){if(type=='info'&&window.console.info){window.console.info(text)}else if(type=='warn'&&window.console.warn){window.console.warn(text)}else{window.console.log(text)}}}return this.each(function(){$(this).addClass('ppy-active');var $self=$(this),img=$self.find('.ppy-imglist > li > a > img'),a=$self.find('.ppy-imglist > li > a'),tot=img.length,singleImageMode=(tot==1)?true:false,ismouseover=false,enlarged=false,cur=0,eclass='ppy-expanded',lclass='ppy-loading',sclass='ppy-single-image',ppyPlaceholder=$('<div class="ppy-placeholder"></div>'),ppyStageWrap=$('<div class="ppy-stagewrap"></div>'),ppyCaptionWrap=$('<div class="ppy-captionwrap"></div>'),ppyOuter=$self.find('.ppy-outer'),ppyStage=$self.find('.ppy-stage'),ppyNav=$self.find('.ppy-nav'),ppyPrev=$self.find('.ppy-prev'),ppyNext=$self.find('.ppy-next'),ppySwitchEnlarge=$self.find('.ppy-switch-enlarge'),ppySwitchCompact=$self.find('.ppy-switch-compact').addClass('ppy-hidden'),ppyPlay=$self.find('.ppy-play'),ppyPause=$self.find('.ppy-pause').addClass('ppy-hidden'),ppyCaption=$self.find('.ppy-caption'),ppyText=$self.find('.ppy-text'),ppyCounter=$self.find('.ppy-counter'),ppyCurrent=$self.find('.ppy-current'),ppyTotal=$self.find('.ppy-total'),cssSelf={position:'absolute',width:'auto',height:'auto',margin:0,top:0,left:(opts.direction=='right')?0:'auto',right:(opts.direction=='left')?0:'auto'},cssStage={height:ppyStage.height(),width:ppyStage.width()},cssCaption={height:ppyCaption.height()},cssPlaceholder={'height':(opts.caption=='hover'||false)?ppyOuter.outerHeight():$self.outerHeight(),'width':(opts.caption=='hover'||false)?ppyOuter.outerWidth():$self.outerWidth(),'float':$self.css('float'),'margin-top':$self.css('margin-top'),'margin-right':$self.css('margin-right'),'margin-bottom':$self.css('margin-bottom'),'margin-left':$self.css('margin-left')};var cap=[];for(var i=0;i<img.length;i++){var extcap=$self.find('.ppy-imglist li').eq(i).find('.ppy-extcaption');cap[i]=extcap.length>0?extcap.html():img[i].alt}if(!ppyStage.length||!ppyNav.length||!ppyOuter.length){debug('$.fn.popeye: Incorrect HTML structure','warn')}else if(tot===0){debug('$.fn.popeye: No images found','warn')}else{singleImageMode?debug('$.fn.popeye -> SingleImageMode started'):debug('$.fn.popeye -> '+tot+' thumbnails found.');init()}function showThumb(i,transition){transition=transition||false;i=i||cur;var cssStageImage={backgroundImage:'url('+img[i].src+')'};var cssTemp={height:'+=0'};if(enlarged){hideCaption();ppyStage.fadeTo((opts.duration/2),0).animate(cssStage,{queue:false,duration:opts.duration,easing:opts.easing,complete:function(){enlarged=false;debug('$.fn.showThumb: Entering COMPACT MODE','info');$self.removeClass(eclass);$self.css('z-index','').parent().css('z-index','');ppySwitchEnlarge.removeClass('ppy-hidden');ppySwitchCompact.addClass('ppy-hidden');showThumb();$(this).fadeTo((opts.duration/2),1)}})}else{if(transition){ppyStageWrap.addClass(lclass);ppyStage.fadeTo((opts.duration/2),0);var thumbPreloader=new Image();thumbPreloader.onload=function(){debug('$.fn.popeye.showThumb: Thumbnail '+i+' loaded','info');ppyStageWrap.removeClass(lclass);ppyStage.animate(cssTemp,1,'linear',function(){ppyStage.css(cssStageImage);$(this).fadeTo((opts.duration/2),1);if(opts.caption=='hover'&&ismouseover){showCaption(cap[i])}else if(opts.caption=='permanent'){updateCaption(cap[i])}updateCounter()});thumbPreloader.onload=function(){}};thumbPreloader.src=img[i].src}else{ppyStage.css(cssStageImage);updateCounter();showCaption(cap[i],true)}var preloader=new Image();preloader.onload=function(){debug('$.fn.popeye.showThumb: Image '+i+' loaded','info');preloader.onload=function(){}};preloader.src=a[i].href}}function showImage(i){i=i||cur;ppyStageWrap.addClass(lclass);ppyStage.fadeTo((opts.duration/2),0);var allPpy=$('.'+eclass);allPpy.css('z-index',opts.zindex-1);$self.css('z-index',opts.zindex).parent().css('z-index',opts.zindex);var preloader=new Image();preloader.onload=function(){ppyStageWrap.removeClass(lclass);var cssStageTo={width:preloader.width,height:preloader.height};var cssStageIm={backgroundImage:'url('+a[i].href+')',backgroundPosition:'left top'};hideCaption();ppyStage.animate(cssStageTo,{queue:false,duration:opts.duration,easing:opts.easing,complete:function(){if(opts.navigation=='hover'&&ismouseover){showNav()}enlarged=true;debug('$.fn.popeye.showImage: Entering ENLARGED MODE','info');$self.addClass(eclass);ppySwitchCompact.removeClass('ppy-hidden');ppySwitchEnlarge.addClass('ppy-hidden');updateCounter();$(this).css(cssStageIm).fadeTo((opts.duration/2),1);showCaption(cap[i]);preloadNeighbours()}})};preloader.src=a[i].href}function updateCounter(i){i=i||cur;ppyTotal.text(tot);ppyCurrent.text(i+1);debug('$.fn.popeye.updateCounter: Displaying image '+(i+1)+' of '+tot)}function preloadNeighbours(i){i=i||cur;var preloaderNext=new Image();var preloaderPrev=new Image();var neighbour=i;if(neighbour<(tot-1)){neighbour++}else{neighbour=0}preloaderNext.src=a[neighbour].href;neighbour=i;if(neighbour<=0){neighbour=tot-1}else{neighbour--}preloaderPrev.src=a[neighbour].href}function showNav(){ppyNav.stop().fadeTo(150,opts.opacity)}function hideNav(){ppyNav.stop().fadeTo(150,0)}function updateCaption(caption){if(opts.caption){ppyText.html(caption)}}function showCaption(caption,force){if(caption&&opts.caption){updateCaption(caption);debug('$.fn.popeye.showCaption -> ppyCaptionWrap.outerHeight(true): '+ppyCaptionWrap.outerHeight(true));var cssTempCaption={visibility:'visible'};ppyCaption.css(cssTempCaption);if(opts.caption==='permanent'&&!enlarged){ppyCaption.css(cssCaption)}else{ppyCaption.animate({'height':ppyCaptionWrap.outerHeight(true)},{queue:false,duration:90,easing:opts.easing})}}else if(!caption&&!force){hideCaption()}}function hideCaption(){var cssTempCaption={visibility:'hidden',overflow:'hidden'};ppyCaption.animate({'height':'0px'},{queue:false,duration:90,easing:opts.easing,complete:function(){ppyCaption.css(cssTempCaption)}})}function previous(){if(cur<=0){cur=tot-1}else{cur--}if(enlarged){showImage(cur)}else{showThumb(cur,true)}return cur}function next(){if(cur<(tot-1)){cur++}else{cur=0}if(enlarged){showImage(cur)}else{showThumb(cur,true)}return cur}function init(){ppyPlaceholder.css(cssPlaceholder);$self.css(cssSelf);$self.wrap(ppyPlaceholder);ppyStageWrap=ppyStage.wrap(ppyStageWrap).parent();ppyCaptionWrap=ppyCaption.wrapInner(ppyCaptionWrap).children().eq(0);showThumb();if(opts.navigation=='hover'){hideNav();$self.hover(function(){showNav()},function(){hideNav()});ppyNav.hover(function(){showNav()},function(){hideNav()})}if(!singleImageMode){ppyPrev.click(function(e){e.stopPropagation();previous()});ppyNext.click(function(e){e.stopPropagation();next()})}else{$self.addClass(sclass);ppyPrev.remove();ppyNext.remove();ppyPlay.remove();ppyPause.remove();ppyCounter.remove()}if(opts.caption=='hover'){hideCaption();$self.hover(function(){showCaption(cap[cur])},function(){hideCaption(true)})}ppySwitchEnlarge.click(function(e){e.stopPropagation();showImage();return false});ppySwitchCompact.click(function(e){e.stopPropagation();showThumb(cur);return false});ppyStage.click(function(){if(enlarged){showThumb(cur)}else{showImage()}});ppyPlay.click(function(e){e.stopPropagation();ppyPause.removeClass('ppy-hidden');ppyPlay.addClass('ppy-hidden');slideshow=window.setInterval(function(){next()},opts.slidespeed);return false});ppyPause.click(function(e){e.stopPropagation();ppyPlay.removeClass('ppy-hidden');ppyPause.addClass('ppy-hidden');window.clearInterval(slideshow);return false});$self.mouseenter(function(){ismouseover=true}).mouseleave(function(){ismouseover=false});if(opts.autoslide){ppyPlay.trigger('click')}}})};$.fn.popeye.defaults={navigation:'hover',caption:'hover',zindex:10000,direction:'right',duration:240,opacity:0.8,easing:'swing',slidespeed:2000,autoslide:false,debug:false}})(jQuery);jQuery('head').append('<style type="text/css"> .ppy-imglist { position: absolute; top: -1000em; left: -1000em; } </style>');
|
Download
