/* 
* SimpleModalGallery v.0.9 - One Box For The Slideshow Gallery.
* based SimpleModal 1.3.1 - jQuery Plugin (like Lightbox).
* added object 'SimpleImage' to handling photo
* Copyright (c) 2009 Uwe Franke <uwe.franke@w3xp.de>
*/
/*
* SimpleModal 1.3.1 - jQuery Plugin
* http://www.ericmmartin.com/projects/simplemodal/
* Copyright (c) 2009 Eric Martin
* Dual licensed under the MIT and GPL licenses
* Revision: $Id: jquery.simplemodal.js 210 2009-09-01 04:36:29Z emartin24 $
*/
/* [SimpleModalGallery-Klasse] */
var SimpleModalGallery = function SimpleModalGallery(opt) {
// 'SimpleModalGallery'-Objekt Variablen 
opt = jQuery.extend(true, {
grpSelector: '',
imgSelector: '',
capSelector: '',
opacity: 50,
animate: false,
speed: 100,
insideLinks: false,
contBox: { // Hauptbereich
height: 0,
width: 0
},
capBox: { // Introbereich
height: 0,
width: 0,
top: 0,
add: false
},
evtBox: { // Navigatonsbereich
height: 0,
width: 0,
top: 0,
add: false
}
}, opt);
// 'SimpleModalGallery'-Objekt Initialisierung
var init = function(selector, obj) {
// 'click'-Events binden
$(selector, obj).click(function(e) {
opt.active = $(selector, obj).index(this);
opt.size = $(selector, obj).length;
opt.list = $(selector, obj).get();
opt.cap = $(opt.capSelector, obj);
/* 
* Slideshow fuer SimpleModalGallery erstellen:
* 1. Parameter: 'image'-Element beim Start
* 2. Parameter: Lightbox neu ('true').
*/
Slideshow.begin(opt.list[opt.active], true);
e.preventDefault();
this.blur();
return false;
});
}
if (opt.imgSelector != '' && $(opt.imgSelector).length) {
if (opt.grpSelector != '' && $(opt.grpSelector).length) {
$($(opt.grpSelector)).each(function(i) {
var self = this;
init(' ' + opt.imgSelector, self);
});
} else {
init(opt.imgSelector, null);
}
}
/* [innere statische Klassen] */
// 'Slideshow'-Objekt
var Slideshow = {
begin: function(imgObj, isStart) {
/* 
* Initialisierung Lightbox fuer Slideshow:
* 1. Pram: Aktuelles 'image'-Element beim Aufruf.
* 2. Pram: Lightbox neu ('true') oder aktualisieren ('false').
*/
Lightbox.init(imgObj, isStart);
// Mit Introbereich - Informationen zum Bild.
if (opt.capSelector) {
Lightbox.addCaption();
}
// Mit 'next' und 'back' Navigaton - Bilder > 1.
if (opt.size > 1) {
Lightbox.addEvents();
}
// Slideshow erstellen bzw. aktualisieren
Lightbox.create();
}
};
// 'Lightbox'-Objekt
var Lightbox = {
height: 0,
width: 0,
img: null,
isStart: null,
caption: null,
events: null,
init: function(img, isStart) {
var self = this;
self.caption = null;
self.events = null;
self.img = img;
self.isStart = isStart;
},
create: function() {
var self = this;
// neues 'img'-Objekt holen ('SimpleImage' - Plugin)
var attr = {
alt: self.img.title, // optional
src: self.img.href // !!
}
self.img = SimpleImage.load(attr);
// Ladezeit 'img'-Objekt beruecksichtigen - !! 'load'-Funktion vor 'img.pack()' !!
$(self.img.getImage()).load(function() {
// Lightbox Container (Bild, Intro und Navigation).
var simplemodalGallery = "<div id='simplemodalGallery'>" + self.img.getHtml() + (self.caption ? self.caption : '') + (self.events ? self.events : '') + "</div>";
// Einmal Lightbox und Container erstellen, beim Start, dann nur Container aktualisieren.
if (self.isStart) {
// Hoehe und Beite Lightbox
self.setSize();
// Lightbox erstellen ('SimpleModal 1.3.1' - jQuery Plugin)
$.modal(simplemodalGallery, {
opacity: opt.opacity,
minHeight: self.height,
minWidth: self.width,
overlayClose: true,
onOpen: Extend.open,
onClose: Extend.close
});
// Bild an Lightbox anpassen
$('#' + self.img.getID()).css({
left: ((self.width - self.img.getWidth()) / 2),
position: 'relative'
})
} else {
$("#simplemodal-data").append(simplemodalGallery);
}
// Slideshow mit/ohne 'next' und 'back'
if (self.events) {
$("#simplemodalGallery .next a").click(Events.goNext);
$("#simplemodalGallery .back a").click(Events.goBack);
// Slideshow mit/ohne Animation
if (opt.animate) {
/* 
* Initialisierung:
* Mit Animation, werden zuerst die entsprechenden
* 'next'/'back'-Elemente ausserhalb positioniert,
* ausgeblendet und dann animiert angezeigt.
* Entsprechend umgekehrt bei Ausblendung.
*/
Animate.init("#simplemodalGallery .back", "#simplemodalGallery .next");
// Animation bei Start bzw. waehrend Slideshow
if (self.isStart) {
Animate.doByStart();
} else {
Animate.doByRun();
}
}
// 'inner'-Navigation
if (opt.insideLinks) {
Events.insideEvents('.captionLine a');
}
}
});
// 'img'-Objekt erstellen
self.img.pack();
},
setSize: function() {
var self = this;
// Hoehe
if (opt.contBox.height > 0) {
self.height = opt.contBox.height; // 'opt'-Vorgabe
} else {
self.height = self.img.getHeight(); // img'-Objekt
}
// Beite
if (opt.contBox.width > 0) {
self.width = opt.contBox.width; // 'opt'-Vorgabe
} else {
self.width = self.img.getWidth(); // img'-Objekt
}
// plus Introbereich
if (opt.capBox.add) {
self.height += opt.capBox.height;
self.width += opt.capBox.width;
}
// plus Navigatonsbereich
if (opt.evtBox.add) {
self.height += opt.evtBox.height;
self.width += opt.evtBox.width;
}
},
addCaption: function() {
var self = this;
var cap = $(opt.cap).get(opt.active);
var css = "style='height:" + opt.capBox.height + "px; top:" + opt.capBox.top + "px;'";
if (cap) {
self.caption = "<div class='captionLine' " + css + ">" + $(cap).html() + "</div>";
}
},
addEvents: function() {
var self = this;
Events.init();
var events = Events.getEvents();
var css = "style='height:" + opt.evtBox.height + "px; top:" + opt.evtBox.top + "px;'";
if (events) {
self.events = "<div class='eventsLine' " + css + ">" + events + "</span></div>";
}
}
}
// 'Events'-Objekt, 'next' und 'back' Elemente.
var Events = {
next: '',
back: '',
init: function() {
var self = this;
self.preBack();
self.preNext();
},
preNext: function() {
var self = this;
var index;
if ((opt.active / 1 + 1) < opt.size) {
index = (opt.active / 1 + 1);
} else {
index = (0);
Animate.isMax = true;
}
self.preEvents(index, 'Next');
},
preBack: function() {
var self = this;
var index;
if ((opt.active / 1 - 1) >= 0) {
index = (opt.active / 1 - 1);
} else {
index = (opt.size / 1 - 1);
Animate.isMin = true;
}
self.preEvents(index, 'Back');
},
preEvents: function(index, type) {
var self = this;
if (opt.active != index) {
if (type === 'Next') {
if (index < opt.size && index > 0) {
self.next = '<span class="next"><a href="#"></a></span>';
} else {
self.next = (opt.animate ? '<span class="next"></span>' : '');
}
} else if (type === 'Back') {
if (opt.active > 0 && index < opt.active) {
self.back = '<span class="back"><a href="#"></a></span>';
} else {
self.back = (opt.animate ? '<span class="back"></span>' : '');
}
}
}
},
goNext: function() {
$("#simplemodalGallery").remove();
Slideshow.begin(opt.list[++opt.active], false);
this.blur();
return false;
},
goBack: function() {
$("#simplemodalGallery").remove();
Slideshow.begin(opt.list[--opt.active], false);
this.blur();
return false;
},
getEvents: function() {
var self = this;
return (self.back + self.next);
},
insideEvents: function(selector) {
$(selector).each(function(i) {
if (opt.active != i) {
$(this).click(function(e) {
$("#simplemodalGallery").remove();
Slideshow.begin(opt.list[opt.active = i], false);
e.preventDefault();
this.blur();
return false;
});
}
});
$(selector).eq(opt.active).css('color', '#e2001a');
}
}
// 'Animate'-Objekt, 'next' und 'back' Animation
var Animate = {
isMin: false,
isMax: false,
widthNext: '0px',
widthBack: '0px',
init: function(selectorBack, selectorNext) {
var self = this;
self.widthNext = $(selectorNext).css('width');
self.widthBack = $(selectorBack).css('width');
$(selectorBack + " ," + selectorNext).hide();
$(selectorNext).css('right', ('-' + self.widthNext));
$(selectorBack).css('left', ('-' + self.widthBack));
},
moveIn: function(selector, type) {
var self = this;
if ('back' == type.toLowerCase()) {
$(selector).show().animate({
left: '+=' + self.widthBack
}, (opt.animate ? (800 + opt.speed) : 800));
} else if ('next' == type.toLowerCase()) {
$(selector).show().animate({
right: '+=' + self.widthNext
}, (opt.animate ? (800 + opt.speed) : 800));
}
},
moveOut: function(selector, type) {
var self = this;
$(selector).show();
if ('back' == type.toLowerCase()) {
$(selector).css('left', 0);
$(selector).animate({
left: '-=' + self.widthBack
}, 350);
} else if ('next' == type.toLowerCase()) {
$(selector).css('right', 0);
$(selector).animate({
right: '-=' + self.widthNext
}, 350);
}
$(selector).queue(function() {
$(this).hide();
$(this).dequeue();
});
},
doByStart: function() {
var self = this;
if (Events.back && ($("#simplemodalGallery .back a").css('display'))) {
self.moveIn("#simplemodalGallery .back", "back");
}
if (Events.next && ($("#simplemodalGallery .next a").css('display'))) {
self.moveIn("#simplemodalGallery .next", "next");
}
},
doByRun: function() {
var self = this;
if ($("#simplemodalGallery .next a").css('display') == undefined) {
self.moveOut("#simplemodalGallery .next", "next");
}
if ($("#simplemodalGallery .back a").css('display') == undefined) {
self.moveOut("#simplemodalGallery .back", "back");
}
if ($("#simplemodalGallery .back a").css('display')) {
if (self.isMin) {
self.isMin = false;
self.moveIn("#simplemodalGallery .back", "back");
} else {
self.reset("#simplemodalGallery .back", "back");
}
}
if ($("#simplemodalGallery .next a").css('display')) {
if (self.isMax) {
self.isMax = false;
self.moveIn("#simplemodalGallery .next", "next");
} else {
self.reset("#simplemodalGallery .next", "next");
}
}
},
reset: function(selector, type) {
var self = this;
$(selector).show();
if ('back' == type.toLowerCase()) {
$(selector).css('left', 0);
} else if ('next' == type.toLowerCase()) {
$(selector).css('right', 0);
}
}
}
// 'Extend'-Objekt, 'SimpleModal'-Standard ersetzen.
var Extend = {
container: null,
open: function(d) {
var self = this;
self.container = d.container[0];
if (opt.animate) {
Extend.Helper.animateOpen(d, self);
} else {
d.overlay.fadeIn(1, function() {
self.dialog.container.fadeIn('slow', function() {
self.dialog.data.show();
});
});
}
},
close: function(d) {
var self = this;
if (opt.animate) {
Extend.Helper.animateClose(d);
} else {
if (opt.capSelector) {
$('.captionLine').hide();
}
d.container.fadeOut('slow', function() {
self.close(); // oder $.modal.close();
});
}
},
Helper: {
animateOpen: function(d, self) {
var t = Extend.Helper.getTop();
var l = Extend.Helper.getLeft();
d.overlay.fadeIn(100, function() {
$("#simplemodal-container a.modalCloseImg").hide();
d.container.css({
top: t + 'px',
left: l + 'px',
height: '0px',
width: '0px'
})
$(d.container).animate({
height: Lightbox.height + 'px',
width: Lightbox.width + 'px',
top: '-=' + Lightbox.height / 2 + 'px',
left: '-=' + Lightbox.width / 2 + 'px'
}, (opt.speed));
d.container.queue(function() {
$("#simplemodalGallery").fadeIn(200, function() {
self.dialog.data.show();
$("#simplemodal-container a.modalCloseImg").show();
});
$(this).dequeue();
});
});
},
animateClose: function(d) {
Animate.isMin = false;
Animate.isMax = false;
if ($(".eventsLine").length != 0) {
$(".eventsLine").fadeTo(200, 0, function() {
Extend.Helper.fadeOut(d);
});
} else {
Extend.Helper.fadeOut(d);
}
},
fadeOut: function(d) {
$("#simplemodalGallery").fadeOut(300, function() {
var t = Extend.Helper.getTop();
var l = Extend.Helper.getLeft();
$("#simplemodal-container a.modalCloseImg").hide();
$(d.container).animate({
borderWidth: '0',
top: t + 'px',
left: l + 'px',
height: '0px',
width: '0px'
}, (opt.speed));
d.container.queue(function() {
$.modal.close();
$(this).dequeue();
});
});
},
getTop: function() {
var t = parseInt($("#simplemodal-container").css('top'));
return (t + Lightbox.height / 2);
},
getLeft: function() {
var l = parseInt($("#simplemodal-container").css('left'));
return (l + Lightbox.width / 2);
}
}
};
}