陳沛鴻 Home1 templatemo 378 dragonfly slimbox2 js

From 2014hs.igem.org

(Difference between revisions)
 
Line 1: Line 1:
-
/*!
+
/*
-
Slimbox v1.8 - The ultimate lightweight Lightbox clone
+
Slimbox v2.03 - The ultimate lightweight Lightbox clone for jQuery
-
(c) 2007-2011 Christophe Beyls <http://www.digitalia.be>
+
(c) 2007-2009 Christophe Beyls <http://www.digitalia.be>
MIT-style license.
MIT-style license.
*/
*/
 +
(function(w){var E=w(window),u,g,F=-1,o,x,D,v,y,L,s,n=!window.XMLHttpRequest,e=window.opera&&(document.compatMode=="CSS1Compat")&&(w.browser.version>=9.3),m=document.documentElement,l={},t=new Image(),J=new Image(),H,a,h,q,I,d,G,c,A,K;w(function(){w("body").append(w([H=w('<div id="lbOverlay" />')[0],a=w('<div id="lbCenter" />')[0],G=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));h=w('<div id="lbImage" />').appendTo(a).append(q=w('<div style="position: relative;" />').append([I=w('<a id="lbPrevLink" href="#" />').click(B)[0],d=w('<a id="lbNextLink" href="#" />').click(f)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(G).append([w('<a id="lbCloseLink" href="#" />').add(H).click(C)[0],A=w('<div id="lbCaption" />')[0],K=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=[[O,N]];N=0}y=E.scrollTop()+((e?m.clientHeight:E.height())/2);L=u.initialWidth;s=u.initialHeight;w(a).css({top:Math.max(0,y-(s/2)),width:L,height:s,marginLeft:-L/2}).show();v=n||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();k(1);g=O;u.loop=u.loop&&(g.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=e?m.clientWidth:E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function k(M){w("object").add(n?"select":"embed").each(function(O,P){if(M){w.data(P,"slimbox",P.style.visibility)}P.style.visibility=M?"hidden":w.data(P,"slimbox")});var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",p)}function p(O){var N=O.keyCode,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?f():(M(N,u.previousKeys)>=0)?B():false}function B(){return b(x)}function f(){return b(D)}function b(M){if(M>=0){F=M;o=g[F][0];x=(F||(u.loop?g.length:0))-1;D=((F+1)%g.length)||(u.loop?0:-1);r();a.className="lbLoading";l=new Image();l.onload=j;l.src=o}return false}function j(){a.className="";w(h).css({backgroundImage:"url("+o+")",visibility:"hidden",display:""});w(q).width(l.width);w([q,I,d]).height(l.height);w(A).html(g[F][1]||"");w(K).html((((g.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,g.length));if(x>=0){t.src=g[x][0]}if(D>=0){J.src=g[D][0]}L=h.offsetWidth;s=h.offsetHeight;var M=Math.max(0,y-(s/2));if(a.offsetHeight!=s){w(a).animate({height:s,top:M},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:M+s,marginLeft:-L/2,visibility:"hidden",display:""});w(h).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,i)})}function i(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function r(){l.onload=null;l.src=t.src=J.src=o;w([a,h,c]).stop(true);w([I,d,h,G]).hide()}function C(){if(F>=0){r();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,k)}return false}})(jQuery);
-
var Slimbox = (function() {
+
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
-
 
+
if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) {
-
// Global variables, accessible to Slimbox only
+
jQuery(function($) {
-
var win = window, ie6 = Browser.ie6, options, images, activeImage = -1, activeURL, prevImage, nextImage, compatibleOverlay, middle, centerWidth, centerHeight,
+
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
-
 
+
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
-
// Preload images
+
-
preload = {}, preloadPrev = new Image(), preloadNext = new Image(),
+
-
 
+
-
// DOM elements
+
-
overlay, center, image, sizer, prevLink, nextLink, bottomContainer, bottom, caption, number,
+
-
 
+
-
// Effects
+
-
fxOverlay, fxResize, fxImage, fxBottom;
+
-
 
+
-
/*
+
-
Initialization
+
-
*/
+
-
 
+
-
win.addEvent("domready", function() {
+
-
// Append the Slimbox HTML code at the bottom of the document
+
-
$(document.body).adopt(
+
-
$$(
+
-
overlay = new Element("div#lbOverlay", {events: {click: close}}),
+
-
center = new Element("div#lbCenter"),
+
-
bottomContainer = new Element("div#lbBottomContainer")
+
-
).setStyle("display", "none")
+
-
);
+
-
 
+
-
image = new Element("div#lbImage").inject(center).adopt(
+
-
sizer = new Element("div", {styles: {position: "relative"}}).adopt(
+
-
prevLink = new Element("a#lbPrevLink[href=#]", {events: {click: previous}}),
+
-
nextLink = new Element("a#lbNextLink[href=#]", {events: {click: next}})
+
-
)
+
-
);
+
-
 
+
-
bottom = new Element("div#lbBottom").inject(bottomContainer).adopt(
+
-
new Element("a#lbCloseLink[href=#]", {events: {click: close}}),
+
-
caption = new Element("div#lbCaption"),
+
-
number = new Element("div#lbNumber"),
+
-
new Element("div", {styles: {clear: "both"}})
+
-
);
+
-
});
+
-
 
+
-
 
+
-
/*
+
-
Internal functions
+
-
*/
+
-
 
+
-
function position() {
+
-
var scroll = win.getScroll(), size = win.getSize();
+
-
$$(center, bottomContainer).setStyle("left", scroll.x + (size.x / 2));
+
-
if (compatibleOverlay) overlay.setStyles({left: scroll.x, top: scroll.y, width: size.x, height: size.y});
+
-
}
+
-
 
+
-
function setup(open) {
+
-
["object", ie6 ? "select" : "embed"].forEach(function(tag) {
+
-
Array.forEach(document.getElementsByTagName(tag), function(el) {
+
-
if (open) el._slimbox = el.style.visibility;
+
-
el.style.visibility = open ? "hidden" : el._slimbox;
+
-
});
+
});
});
-
 
-
overlay.style.display = open ? "" : "none";
 
-
 
-
var fn = open ? "addEvent" : "removeEvent";
 
-
win[fn]("scroll", position)[fn]("resize", position);
 
-
document[fn]("keydown", keyDown);
 
-
}
 
-
 
-
function keyDown(event) {
 
-
var code = event.code;
 
-
// Prevent default keyboard action (like navigating inside the page)
 
-
return options.closeKeys.contains(code) ? close()
 
-
: options.nextKeys.contains(code) ? next()
 
-
: options.previousKeys.contains(code) ? previous()
 
-
: false;
 
-
}
 
-
 
-
function previous() {
 
-
return changeImage(prevImage);
 
-
}
 
-
 
-
function next() {
 
-
return changeImage(nextImage);
 
-
}
 
-
 
-
function changeImage(imageIndex) {
 
-
if (imageIndex >= 0) {
 
-
activeImage = imageIndex;
 
-
activeURL = images[imageIndex][0];
 
-
prevImage = (activeImage || (options.loop ? images.length : 0)) - 1;
 
-
nextImage = ((activeImage + 1) % images.length) || (options.loop ? 0 : -1);
 
-
 
-
stop();
 
-
center.className = "lbLoading";
 
-
 
-
preload = new Image();
 
-
preload.onload = animateBox;
 
-
preload.src = activeURL;
 
-
}
 
-
 
-
return false;
 
-
}
 
-
 
-
function animateBox() {
 
-
center.className = "";
 
-
fxImage.set(0);
 
-
image.setStyles({backgroundImage: "url(" + activeURL + ")", display: ""});
 
-
sizer.setStyle("width", preload.width);
 
-
$$(sizer, prevLink, nextLink).setStyle("height", preload.height);
 
-
 
-
caption.set("html", images[activeImage][1] || "");
 
-
number.set("html", (((images.length > 1) && options.counterText) || "").replace(/{x}/, activeImage + 1).replace(/{y}/, images.length));
 
-
 
-
if (prevImage >= 0) preloadPrev.src = images[prevImage][0];
 
-
if (nextImage >= 0) preloadNext.src = images[nextImage][0];
 
-
 
-
centerWidth = image.offsetWidth;
 
-
centerHeight = image.offsetHeight;
 
-
var top = Math.max(0, middle - (centerHeight / 2)), check = 0, fn;
 
-
if (center.offsetHeight != centerHeight) {
 
-
check = fxResize.start({height: centerHeight, top: top});
 
-
}
 
-
if (center.offsetWidth != centerWidth) {
 
-
check = fxResize.start({width: centerWidth, marginLeft: -centerWidth/2});
 
-
}
 
-
fn = function() {
 
-
bottomContainer.setStyles({width: centerWidth, top: top + centerHeight, marginLeft: -centerWidth/2, visibility: "hidden", display: ""});
 
-
fxImage.start(1);
 
-
};
 
-
if (check) {
 
-
fxResize.chain(fn);
 
-
}
 
-
else {
 
-
fn();
 
-
}
 
-
}
 
-
 
-
function animateCaption() {
 
-
if (prevImage >= 0) prevLink.style.display = "";
 
-
if (nextImage >= 0) nextLink.style.display = "";
 
-
fxBottom.set(-bottom.offsetHeight).start(0);
 
-
bottomContainer.style.visibility = "";
 
-
}
 
-
 
-
function stop() {
 
-
preload.onload = null;
 
-
preload.src = preloadPrev.src = preloadNext.src = activeURL;
 
-
fxResize.cancel();
 
-
fxImage.cancel();
 
-
fxBottom.cancel();
 
-
$$(prevLink, nextLink, image, bottomContainer).setStyle("display", "none");
 
-
}
 
-
 
-
function close() {
 
-
if (activeImage >= 0) {
 
-
stop();
 
-
activeImage = prevImage = nextImage = -1;
 
-
center.style.display = "none";
 
-
fxOverlay.cancel().chain(setup).start(0);
 
-
}
 
-
 
-
return false;
 
-
}
 
-
 
-
 
-
/*
 
-
API
 
-
*/
 
-
 
-
Element.implement({
 
-
slimbox: function(_options, linkMapper) {
 
-
// The processing of a single element is similar to the processing of a collection with a single element
 
-
$$(this).slimbox(_options, linkMapper);
 
-
 
-
return this;
 
-
}
 
});
});
-
 
+
}
-
Elements.implement({
+
-
/*
+
-
options: Optional options object, see Slimbox.open()
+
-
linkMapper: Optional function taking a link DOM element and an index as arguments and returning an array containing 2 elements:
+
-
the image URL and the image caption (may contain HTML)
+
-
linksFilter: Optional function taking a link DOM element and an index as arguments and returning true if the element is part of
+
-
the image collection that will be shown on click, false if not. "this" refers to the element that was clicked.
+
-
This function must always return true when the DOM element argument is "this".
+
-
*/
+
-
slimbox: function(_options, linkMapper, linksFilter) {
+
-
linkMapper = linkMapper || function(el) {
+
-
return [el.href, el.title];
+
-
};
+
-
 
+
-
linksFilter = linksFilter || function() {
+
-
return true;
+
-
};
+
-
 
+
-
var links = this;
+
-
 
+
-
links.removeEvents("click").addEvent("click", function() {
+
-
// Build the list of images that will be displayed
+
-
var filteredLinks = links.filter(linksFilter, this);
+
-
return Slimbox.open(filteredLinks.map(linkMapper), filteredLinks.indexOf(this), _options);
+
-
});
+
-
 
+
-
return links;
+
-
}
+
-
});
+
-
 
+
-
return {
+
-
open: function(_images, startImage, _options) {
+
-
options = Object.append({
+
-
loop: false, // Allows to navigate between first and last images
+
-
overlayOpacity: 0.8, // 1 is opaque, 0 is completely transparent (change the color in the CSS file)
+
-
overlayFadeDuration: 400, // Duration of the overlay fade-in and fade-out animations (in milliseconds)
+
-
resizeDuration: 400, // Duration of each of the box resize animations (in milliseconds)
+
-
resizeTransition: false, // false uses the mootools default transition
+
-
initialWidth: 250, // Initial width of the box (in pixels)
+
-
initialHeight: 250, // Initial height of the box (in pixels)
+
-
imageFadeDuration: 400, // Duration of the image fade-in animation (in milliseconds)
+
-
captionAnimationDuration: 400, // Duration of the caption animation (in milliseconds)
+
-
counterText: "Image {x} of {y}", // Translate or change as you wish, or set it to false to disable counter text for image groups
+
-
closeKeys: [27, 88, 67], // Array of keycodes to close Slimbox, default: Esc (27), 'x' (88), 'c' (67)
+
-
previousKeys: [37, 80], // Array of keycodes to navigate to the previous image, default: Left arrow (37), 'p' (80)
+
-
nextKeys: [39, 78] // Array of keycodes to navigate to the next image, default: Right arrow (39), 'n' (78)
+
-
}, _options || {});
+
-
 
+
-
// Setup effects
+
-
fxOverlay = new Fx.Tween(overlay, {property: "opacity", duration: options.overlayFadeDuration});
+
-
fxResize = new Fx.Morph(center, Object.append({duration: options.resizeDuration, link: "chain"}, options.resizeTransition ? {transition: options.resizeTransition} : {}));
+
-
fxImage = new Fx.Tween(image, {property: "opacity", duration: options.imageFadeDuration, onComplete: animateCaption});
+
-
fxBottom = new Fx.Tween(bottom, {property: "margin-top", duration: options.captionAnimationDuration});
+
-
 
+
-
// The function is called for a single image, with URL and Title as first two arguments
+
-
if (typeof _images == "string") {
+
-
_images = [[_images, startImage]];
+
-
startImage = 0;
+
-
}
+
-
 
+
-
middle = win.getScrollTop() + (win.getHeight() / 2);
+
-
centerWidth = options.initialWidth;
+
-
centerHeight = options.initialHeight;
+
-
center.setStyles({top: Math.max(0, middle - (centerHeight / 2)), width: centerWidth, height: centerHeight, marginLeft: -centerWidth/2, display: ""});
+
-
compatibleOverlay = ie6 || (overlay.currentStyle && (overlay.currentStyle.position != "fixed"));
+
-
if (compatibleOverlay) overlay.style.position = "absolute";
+
-
fxOverlay.set(0).start(options.overlayOpacity);
+
-
position();
+
-
setup(1);
+
-
 
+
-
images = _images;
+
-
options.loop = options.loop && (images.length > 1);
+
-
return changeImage(startImage);
+
-
}
+
-
};
+
-
 
+
-
})();
+

Latest revision as of 13:25, 4 May 2014

/* Slimbox v2.03 - The ultimate lightweight Lightbox clone for jQuery (c) 2007-2009 Christophe Beyls <http://www.digitalia.be> MIT-style license.

  • /

(function(w){var E=w(window),u,g,F=-1,o,x,D,v,y,L,s,n=!window.XMLHttpRequest,e=window.opera&&(document.compatMode=="CSS1Compat")&&(w.browser.version>=9.3),m=document.documentElement,l={},t=new Image(),J=new Image(),H,a,h,q,I,d,G,c,A,K;w(function(){w("body").append(w([H=w('<div id="lbOverlay" />')[0],a=w('<div id="lbCenter" />')[0],G=w('<div id="lbBottomContainer" />')[0]]).css("display","none"));h=w('<div id="lbImage" />').appendTo(a).append(q=w('<div style="position: relative;" />').append([I=w('<a id="lbPrevLink" href="#" />').click(B)[0],d=w('<a id="lbNextLink" href="#" />').click(f)[0]])[0])[0];c=w('<div id="lbBottom" />').appendTo(G).append([w('<a id="lbCloseLink" href="#" />').add(H).click(C)[0],A=w('<div id="lbCaption" />')[0],K=w('<div id="lbNumber" />')[0],w('<div style="clear: both;" />')[0]])[0]});w.slimbox=function(O,N,M){u=w.extend({loop:false,overlayOpacity:0.8,overlayFadeDuration:400,resizeDuration:400,resizeEasing:"swing",initialWidth:250,initialHeight:250,imageFadeDuration:400,captionAnimationDuration:400,counterText:"Image {x} of {y}",closeKeys:[27,88,67],previousKeys:[37,80],nextKeys:[39,78]},M);if(typeof O=="string"){O=O,N;N=0}y=E.scrollTop()+((e?m.clientHeight:E.height())/2);L=u.initialWidth;s=u.initialHeight;w(a).css({top:Math.max(0,y-(s/2)),width:L,height:s,marginLeft:-L/2}).show();v=n||(H.currentStyle&&(H.currentStyle.position!="fixed"));if(v){H.style.position="absolute"}w(H).css("opacity",u.overlayOpacity).fadeIn(u.overlayFadeDuration);z();k(1);g=O;u.loop=u.loop&&(g.length>1);return b(N)};w.fn.slimbox=function(M,P,O){P=P||function(Q){return[Q.href,Q.title]};O=O||function(){return true};var N=this;return N.unbind("click").click(function(){var S=this,U=0,T,Q=0,R;T=w.grep(N,function(W,V){return O.call(S,W,V)});for(R=T.length;Q<R;++Q){if(T[Q]==S){U=Q}T[Q]=P(T[Q],Q)}return w.slimbox(T,U,M)})};function z(){var N=E.scrollLeft(),M=e?m.clientWidth:E.width();w([a,G]).css("left",N+(M/2));if(v){w(H).css({left:N,top:E.scrollTop(),width:M,height:E.height()})}}function k(M){w("object").add(n?"select":"embed").each(function(O,P){if(M){w.data(P,"slimbox",P.style.visibility)}P.style.visibility=M?"hidden":w.data(P,"slimbox")});var N=M?"bind":"unbind";E[N]("scroll resize",z);w(document)[N]("keydown",p)}function p(O){var N=O.keyCode,M=w.inArray;return(M(N,u.closeKeys)>=0)?C():(M(N,u.nextKeys)>=0)?f():(M(N,u.previousKeys)>=0)?B():false}function B(){return b(x)}function f(){return b(D)}function b(M){if(M>=0){F=M;o=g[F][0];x=(F||(u.loop?g.length:0))-1;D=((F+1)%g.length)||(u.loop?0:-1);r();a.className="lbLoading";l=new Image();l.onload=j;l.src=o}return false}function j(){a.className="";w(h).css({backgroundImage:"url("+o+")",visibility:"hidden",display:""});w(q).width(l.width);w([q,I,d]).height(l.height);w(A).html(g[F][1]||"");w(K).html((((g.length>1)&&u.counterText)||"").replace(/{x}/,F+1).replace(/{y}/,g.length));if(x>=0){t.src=g[x][0]}if(D>=0){J.src=g[D][0]}L=h.offsetWidth;s=h.offsetHeight;var M=Math.max(0,y-(s/2));if(a.offsetHeight!=s){w(a).animate({height:s,top:M},u.resizeDuration,u.resizeEasing)}if(a.offsetWidth!=L){w(a).animate({width:L,marginLeft:-L/2},u.resizeDuration,u.resizeEasing)}w(a).queue(function(){w(G).css({width:L,top:M+s,marginLeft:-L/2,visibility:"hidden",display:""});w(h).css({display:"none",visibility:"",opacity:""}).fadeIn(u.imageFadeDuration,i)})}function i(){if(x>=0){w(I).show()}if(D>=0){w(d).show()}w(c).css("marginTop",-c.offsetHeight).animate({marginTop:0},u.captionAnimationDuration);G.style.visibility=""}function r(){l.onload=null;l.src=t.src=J.src=o;w([a,h,c]).stop(true);w([I,d,h,G]).hide()}function C(){if(F>=0){r();F=x=D=-1;w(a).hide();w(H).stop().fadeOut(u.overlayFadeDuration,k)}return false}})(jQuery);

// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED) if (!/android|iphone|ipod|series60|symbian|windows ce|blackberry/i.test(navigator.userAgent)) { jQuery(function($) { $("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) { return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel)); }); }); }

Retrieved from "http://2014hs.igem.org/%E9%99%B3%E6%B2%9B%E9%B4%BB_Home1_templatemo_378_dragonfly_slimbox2_js"