Initial import: Carteasy Shop (Dev-Stand)
This commit is contained in:
Thomas Bartelt
@@ -0,0 +1,34 @@
|
||||
SLIMBOX V2.02 README
|
||||
====================
|
||||
The ultimate lightweight Lightbox clone
|
||||
... now using the jQuery javascript library
|
||||
|
||||
(c) Christophe Beyls 2007-2009
|
||||
MIT-style license
|
||||
|
||||
http://code.google.com/p/slimbox/
|
||||
|
||||
|
||||
Included files:
|
||||
|
||||
example.html A simple example page demonstrating how to use Slimbox with the default configuration.
|
||||
example.jpg An example image used on the example page.
|
||||
README.txt The file you are reading.
|
||||
css/* The Slimbox stylesheet and its associated images. You can edit them to customize Slimbox appearance.
|
||||
js/slimbox2.js The minified version of Slimbox 2, plus the editable autoloading code using default options.
|
||||
src/slimbox2.js The Slimbox 2 source. Contains many comments and is not suitable for production use (needs to be minified first).
|
||||
extra/* Some extra scripts that you can add to the autoload code block inside slimbox2.js to add special functionality.
|
||||
|
||||
|
||||
Slimbox 2 requires the jQuery library (version 1.2.6 or more recent) to be installed on your website in order to work properly.
|
||||
|
||||
You can remove or customize the provided autoload code block by editing the slimbox2.js file. By default, it behaves like Lightbox.
|
||||
When deploying slimbox2.js, you MUST always preserve the copyright notice at the beginning of the file.
|
||||
|
||||
If you are a developer and want to edit the provided source code, it is strongly recommended to minify the script using "YUI Compressor"
|
||||
by Julien Lecomte before distribution. It will strip spaces and comments and shrink the variable names in order to obtain the smallest file size.
|
||||
|
||||
For more information, please read the documentation on the official project page.
|
||||
|
||||
|
||||
Enjoy!
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 925 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 405 B |
Binary file not shown.
|
After Width: | Height: | Size: 462 B |
@@ -0,0 +1,105 @@
|
||||
/* SLIMBOX */
|
||||
|
||||
#lbOverlay {
|
||||
position: fixed;
|
||||
z-index: 9999;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#lbCenter, #lbBottomContainer {
|
||||
position: absolute;
|
||||
z-index: 9999;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.lbLoading {
|
||||
background: #fff url(loading.gif) no-repeat center;
|
||||
}
|
||||
|
||||
#lbImage {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
border: 10px solid #fff;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
#lbPrevLink, #lbNextLink {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 50%;
|
||||
outline: none;
|
||||
z-index: 3;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
#lbPrevLink {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
#lbPrevLink:hover {
|
||||
background: transparent url(prevlabel.gif) no-repeat 0 15%;
|
||||
}
|
||||
|
||||
#lbNextLink {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
#lbNextLink:hover {
|
||||
background: transparent url(nextlabel.gif) no-repeat 100% 15%;
|
||||
}
|
||||
|
||||
#lbBottom {
|
||||
font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
line-height: 1.4em;
|
||||
text-align: left;
|
||||
border: 10px solid #fff;
|
||||
border-top-style: none;
|
||||
}
|
||||
|
||||
#lbCloseLink {
|
||||
display: block;
|
||||
float: right;
|
||||
width: 66px;
|
||||
height: 22px;
|
||||
background: transparent url(closelabel.gif) no-repeat center;
|
||||
margin: 5px 0;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#lbCaption, #lbNumber {
|
||||
margin-right: 71px;
|
||||
}
|
||||
|
||||
#lbCaption {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#lbSpecialImageHolder {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#lbSpecialImage {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#lbSizer {
|
||||
position: relative;
|
||||
z-index:4;
|
||||
background-image:url(transpixel.gif);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 43 B |
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>Slimbox 2 example page</title>
|
||||
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
|
||||
<script type="text/javascript" src="js/slimbox2.js"></script>
|
||||
<link rel="stylesheet" href="css/slimbox2.css" type="text/css" media="screen" />
|
||||
<style type="text/css">
|
||||
body {
|
||||
background-color: #fff;
|
||||
font-family: arial, helvetica, sans-serif;
|
||||
color: #000;
|
||||
}
|
||||
h1, p {
|
||||
text-align: center;
|
||||
}
|
||||
p {
|
||||
margin-top: 100px;
|
||||
}
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #f00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Slimbox 2 example page</h1>
|
||||
<p>
|
||||
<a href="example.jpg" rel="lightbox" title="Beautiful, isn't it?">Click here</a> to view a picture inside Slimbox.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@@ -0,0 +1,18 @@
|
||||
/*
|
||||
With the following code, Slimbox will activate itself automatically on all links pointing to images,
|
||||
or more specifically all links having URLs ending with: ".jpg" or ".png" or ".gif".
|
||||
As a result, you will not need to set the rel="lightbox" attribute on any link to activate Slimbox.
|
||||
Furthermore, all image links contained in the same block or paragraph (having the same parent element)
|
||||
will automatically be grouped together in a gallery, so you will not need to specify groups either.
|
||||
Images that are alone in their block or paragraph will be displayed individually.
|
||||
|
||||
Replace the default autoload code block with this one.
|
||||
*/
|
||||
|
||||
jQuery(function($) {
|
||||
$("a[href]").filter(function() {
|
||||
return /\.(jpg|png|gif)$/i.test(this.href);
|
||||
}).slimbox({}, null, function(el) {
|
||||
return (this == el) || (this.parentNode && (this.parentNode == el.parentNode));
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,17 @@
|
||||
/*
|
||||
This code automatically integrates Flickr thumbnails with Slimbox.
|
||||
It will scan for all links around thumbnail images pointing to Flickr photo PAGES.
|
||||
Note that you don't need to add rel="lightbox" to these links.
|
||||
When clicking on a Flickr thumbnail, Slimbox will open and display the medium-sized image.
|
||||
The title attribute of the link (or the alt attribute of the thumbnail if not available) will be used
|
||||
as description text, and a link to the Flickr photo page will be added under the description.
|
||||
|
||||
Add the following code to the autoload code block.
|
||||
*/
|
||||
|
||||
jQuery(function($) {
|
||||
$("a[href^='http://www.flickr.com/photos/'] > img:first-child[src]").parent().slimbox({}, function(el) {
|
||||
return [el.firstChild.src.replace(/_[mts]\.(\w+)$/, ".$1"),
|
||||
(el.title || el.firstChild.alt) + '<br /><a href="' + el.href + '">Flickr page</a>'];
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,17 @@
|
||||
/*
|
||||
This code automatically integrates Picasa Web Albums thumbnails with Slimbox.
|
||||
It will scan for all links around thumbnail images pointing to Picasa Web Albums photo PAGES.
|
||||
Note that you don't need to add rel="lightbox" to these links.
|
||||
When clicking on a Picasa Web Albums thumbnail, Slimbox will open and display the medium-sized image.
|
||||
The title attribute of the link (or the alt attribute of the thumbnail if not available) will be used
|
||||
as description text, and a link to the Picasa Web Albums photo page will be added under the description.
|
||||
|
||||
Add the following code to the autoload code block.
|
||||
*/
|
||||
|
||||
jQuery(function($) {
|
||||
$("a[href^='http://picasaweb.google.'] > img:first-child[src]").parent().slimbox({}, function(el) {
|
||||
return [el.firstChild.src.replace(/\/s\d+(?:\-c)?\/([^\/]+)$/, "/s512/$1"),
|
||||
(el.title || el.firstChild.alt) + '<br /><a href="' + el.href + '">Picasa Web Albums page</a>'];
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,16 @@
|
||||
/*
|
||||
Slimbox v2.02 - 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)
|
||||
jQuery(function($) {
|
||||
$("a[rel^='lightbox']").slimbox({
|
||||
loop: true,
|
||||
counterText: "Bild {x} von {y}"
|
||||
}, null, function(el) {
|
||||
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
|
||||
});
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,6 @@
|
||||
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
|
||||
jQuery(function($) {
|
||||
$("a[rel^='lightbox']").slimbox({/* Put custom options here */}, null, function(el) {
|
||||
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,282 @@
|
||||
/*!
|
||||
Slimbox v2.02 - The ultimate lightweight Lightbox clone for jQuery
|
||||
(c) 2007-2009 Christophe Beyls <http://www.digitalia.be>
|
||||
MIT-style license.
|
||||
*/
|
||||
|
||||
(function($) {
|
||||
|
||||
// Global variables, accessible to Slimbox only
|
||||
var win = $(window), options, images, activeImage = -1, activeURL, prevImage, nextImage, compatibleOverlay, middle, centerWidth, centerHeight, ie6 = !window.XMLHttpRequest,
|
||||
operaFix = window.opera && (document.compatMode == "CSS1Compat") && ($.browser.version >= 9.3), documentElement = document.documentElement,
|
||||
|
||||
// Preload images
|
||||
preload = {}, preloadPrev = new Image(), preloadNext = new Image(),
|
||||
|
||||
// DOM elements
|
||||
overlay, center, image, sizer, prevLink, nextLink, bottomContainer, bottom, caption, number;
|
||||
|
||||
/*
|
||||
Initialization
|
||||
*/
|
||||
|
||||
$(function() {
|
||||
// Append the Slimbox HTML code at the bottom of the document
|
||||
$("body").append(
|
||||
$([
|
||||
overlay = $('<div id="lbOverlay" />')[0],
|
||||
center = $('<div id="lbCenter" />')[0],
|
||||
bottomContainer = $('<div id="lbBottomContainer" />')[0]
|
||||
]).css("display", "none")
|
||||
);
|
||||
|
||||
image = $('<div id="lbImage" />')
|
||||
.append('<div id="lbSpecialImageHolder" />')
|
||||
.appendTo(center)
|
||||
.append(
|
||||
sizer = $('<div id="lbSizer" />')
|
||||
.append([
|
||||
prevLink = $('<a id="lbPrevLink" href="#" />').click(previous)[0],
|
||||
nextLink = $('<a id="lbNextLink" href="#" />').click(next)[0]
|
||||
])[0]
|
||||
)[0];
|
||||
|
||||
$('<img id="lbSpecialImage" />')
|
||||
.appendTo('#lbSpecialImageHolder')
|
||||
;
|
||||
|
||||
bottom = $('<div id="lbBottom" />').appendTo(bottomContainer).append([
|
||||
$('<a id="lbCloseLink" href="#" />').add(overlay).click(close)[0],
|
||||
caption = $('<div id="lbCaption" />')[0],
|
||||
number = $('<div id="lbNumber" />')[0],
|
||||
$('<div style="clear: both;" />')[0]
|
||||
])[0];
|
||||
});
|
||||
|
||||
|
||||
/*
|
||||
API
|
||||
*/
|
||||
|
||||
// Open Slimbox with the specified parameters
|
||||
$.slimbox = function(_images, startImage, _options) {
|
||||
options = $.extend({
|
||||
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)
|
||||
resizeEasing: "swing", // "swing" is jQuery's default easing
|
||||
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)
|
||||
maxWidth: $(window).width() - 70,
|
||||
maxHeight: $(window).height() - 130
|
||||
}, _options);
|
||||
|
||||
// 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.scrollTop() + ((operaFix ? documentElement.clientHeight : win.height()) / 2);
|
||||
centerWidth = options.initialWidth;
|
||||
centerHeight = options.initialHeight;
|
||||
$(center).css({top: Math.max(0, middle - (centerHeight / 2)), width: centerWidth, height: centerHeight, marginLeft: -centerWidth/2}).show();
|
||||
compatibleOverlay = ie6 || (overlay.currentStyle && (overlay.currentStyle.position != "fixed"));
|
||||
if (compatibleOverlay) overlay.style.position = "absolute";
|
||||
$(overlay).css("opacity", options.overlayOpacity).fadeIn(options.overlayFadeDuration);
|
||||
position();
|
||||
setup(1);
|
||||
|
||||
images = _images;
|
||||
options.loop = options.loop && (images.length > 1);
|
||||
return changeImage(startImage);
|
||||
};
|
||||
|
||||
/*
|
||||
options: Optional options object, see jQuery.slimbox()
|
||||
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".
|
||||
*/
|
||||
$.fn.slimbox = function(_options, linkMapper, linksFilter) {
|
||||
linkMapper = linkMapper || function(el) {
|
||||
return [el.href, el.title];
|
||||
};
|
||||
|
||||
linksFilter = linksFilter || function() {
|
||||
return true;
|
||||
};
|
||||
|
||||
var links = this;
|
||||
|
||||
return links.unbind("click").click(function() {
|
||||
// Build the list of images that will be displayed
|
||||
var link = this, startIndex = 0, filteredLinks, i = 0, length;
|
||||
filteredLinks = $.grep(links, function(el, i) {
|
||||
return linksFilter.call(link, el, i);
|
||||
});
|
||||
|
||||
// We cannot use jQuery.map() because it flattens the returned array
|
||||
for (length = filteredLinks.length; i < length; ++i) {
|
||||
if (filteredLinks[i] == link) startIndex = i;
|
||||
filteredLinks[i] = linkMapper(filteredLinks[i], i);
|
||||
}
|
||||
|
||||
return $.slimbox(filteredLinks, startIndex, _options);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
/*
|
||||
Internal functions
|
||||
*/
|
||||
|
||||
function position() {
|
||||
var l = win.scrollLeft(), w = operaFix ? documentElement.clientWidth : win.width();
|
||||
$([center, bottomContainer]).css("left", l + (w / 2));
|
||||
if (compatibleOverlay) $(overlay).css({left: l, top: win.scrollTop(), width: w, height: win.height()});
|
||||
}
|
||||
|
||||
function setup(open) {
|
||||
$("object").add(ie6 ? "select" : "embed").each(function(index, el) {
|
||||
if (open) $.data(el, "slimbox", el.style.visibility);
|
||||
el.style.visibility = open ? "hidden" : $.data(el, "slimbox");
|
||||
});
|
||||
var fn = open ? "bind" : "unbind";
|
||||
win[fn]("scroll resize", position);
|
||||
$(document)[fn]("keydown", keyDown);
|
||||
}
|
||||
|
||||
function keyDown(event) {
|
||||
var code = event.keyCode, fn = $.inArray;
|
||||
// Prevent default keyboard action (like navigating inside the page)
|
||||
return (fn(code, options.closeKeys) >= 0) ? close()
|
||||
: (fn(code, options.nextKeys) >= 0) ? next()
|
||||
: (fn(code, options.previousKeys) >= 0) ? previous()
|
||||
: false;
|
||||
}
|
||||
|
||||
function previous() {
|
||||
return changeImage(prevImage);
|
||||
}
|
||||
|
||||
function next() {
|
||||
return changeImage(nextImage);
|
||||
}
|
||||
|
||||
function changeImage(imageIndex) {
|
||||
if (imageIndex >= 0) {
|
||||
activeImage = imageIndex;
|
||||
activeURL = images[activeImage][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 = "";
|
||||
// $(image).css({backgroundImage: "url(" + activeURL + ")", visibility: "hidden", display: ""});
|
||||
$(image).css({visibility: "hidden", display: ""});
|
||||
|
||||
if (preload.width > options.maxWidth) {
|
||||
var oldwidth = preload.width;
|
||||
preload.width = options.maxWidth;
|
||||
preload.height = preload.height / (oldwidth / preload.width);
|
||||
}
|
||||
if (preload.height > options.maxHeight) {
|
||||
var oldheight = preload.height;
|
||||
preload.height = options.maxHeight;
|
||||
preload.width = preload.width / (oldheight / preload.height);
|
||||
}
|
||||
|
||||
// $('#lbSpecialImageHolder').html('<img id="lbSpecialImage" src="' + activeURL + '" width="' + preload.width + '" height="' + preload.height + '" />');
|
||||
// $('#lbSpecialImageHolder').html('<img id="lbSpecialImage" src="' + activeURL + '" width="150" height="150" />');
|
||||
$('#lbSpecialImage').attr('src', activeURL).width(preload.width).height(preload.height);
|
||||
|
||||
$(sizer).width(preload.width);
|
||||
$([sizer, prevLink, nextLink]).height(preload.height);
|
||||
|
||||
$(caption).html(images[activeImage][1] || "");
|
||||
$(number).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));
|
||||
|
||||
$(center).animate({
|
||||
height: centerHeight,
|
||||
top: top,
|
||||
width: centerWidth,
|
||||
marginLeft: -centerWidth/2
|
||||
}, options.resizeDuration, options.resizeEasing);
|
||||
|
||||
/*
|
||||
if (center.offsetHeight != centerHeight) {
|
||||
$(center).animate({height: centerHeight, top: top}, options.resizeDuration, options.resizeEasing);
|
||||
}
|
||||
if (center.offsetWidth != centerWidth) {
|
||||
$(center).animate({width: centerWidth, marginLeft: -centerWidth/2}, options.resizeDuration, options.resizeEasing);
|
||||
}*/
|
||||
$(center).queue(function() {
|
||||
$(bottomContainer).css({width: centerWidth, top: top + centerHeight, marginLeft: -centerWidth/2, visibility: "hidden", display: ""});
|
||||
$(image).css({display: "none", visibility: "", opacity: ""}).fadeIn(options.imageFadeDuration, animateCaption);
|
||||
});
|
||||
}
|
||||
|
||||
function animateCaption() {
|
||||
if (prevImage >= 0) $(prevLink).show();
|
||||
if (nextImage >= 0) $(nextLink).show();
|
||||
$(bottom).css("marginTop", -bottom.offsetHeight).animate({marginTop: 0}, options.captionAnimationDuration);
|
||||
bottomContainer.style.visibility = "";
|
||||
}
|
||||
|
||||
function stop() {
|
||||
preload.onload = null;
|
||||
preload.src = preloadPrev.src = preloadNext.src = activeURL;
|
||||
$([center, image, bottom]).stop(true);
|
||||
$([prevLink, nextLink, image, bottomContainer]).hide();
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (activeImage >= 0) {
|
||||
stop();
|
||||
activeImage = prevImage = nextImage = -1;
|
||||
$(center).hide();
|
||||
$(overlay).stop().fadeOut(options.overlayFadeDuration, setup);
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
})(jQuery);
|
||||
|
||||
// AUTOLOAD CODE BLOCK (MAY BE CHANGED OR REMOVED)
|
||||
jQuery(function($) {
|
||||
$("a[rel^='lightbox']").slimbox({
|
||||
loop: true,
|
||||
counterText: "Bild {x} von {y}"
|
||||
}, null, function(el) {
|
||||
return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user