// ----------------------------------------------------------------------------------- // // Lightbox Lite // by Steven Pothoven - http://blog.pothoven.net // 1/22/08 // // Derived from: // // Lightbox v2.03.3 (http://huddletogether.com/projects/lightbox2/) // by Lokesh Dhakar - http://www.huddletogether.com // 5/21/06 // // Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ // // Credit also due to those who have helped, inspired, and made their code available to the public. // Including: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), Thomas Fuchs(mir.aculo.us), and others. // // ----------------------------------------------------------------------------------- window.onload = function() { // Damit die Lightbox arbeiten kann benötigt sie ein verschachteltes Div-Konstrukt. // Dieses wollen wir aber nicht direkt ins Template schreiben sondern vom Script erzeugen lassen. // Das Div-Konstrukt entspricht diesem hier: // // // var objBody = $$('body')[0]; // Im die benötigten Divs erzeugen objBody.appendChild(Builder.node('div',{id:'overlay', style:'display:none'})); objBody.appendChild(Builder.node('div',{id:'photo', style:'display:none'}, [ Builder.node('div',{id:'lightbox'}, [ Builder.node('div',{id:'outerImageContainer'}, [ Builder.node('div',{id:'imageContainer'}, [ Builder.node('img',{id:'lightboxImage', style:'display:none'}), Builder.node('div',{id:'imageloading'}, [ Builder.node('img',{src:'portal/pics/layout/loading.gif'}) ]), ]), ]), Builder.node('div',{id:'imageDataContainer', style:'display:none;'}, [ Builder.node('div',{id:'imageData'}, [ Builder.node('div',{id:'imageDetails'}, [ Builder.node('span',{id:'imagecaption'}) ]), Builder.node('div',{id:'imageBottomNav', onclick:'LightBoxLite.reset();', style:'float:right'}, [ Builder.node('img',{src:'portal/pics/layout/close.gif', alt:'Schließen', title:'schließen', style:'cursor:pointer'}) ]), ]), ]), ]), ])); } // Ende document.observe function get_bild_src_by_bild_id(int_system_id, int_lightbox_breite, int_lightbox_hoehe, int_system_system_id) { var str_adresse = "bild.php?id=" + int_system_id + "&new_max_width=" + int_lightbox_breite + "&new_max_height=" + int_lightbox_hoehe; LightBoxLite.displayImage(str_adresse, int_system_system_id); } LightBoxLite = function() { var borderSize = 10; var resizeDuration = 0.6; /** * resizeImageContainer * * @param {Number} desired width * @param {Number} desired height */ function resizeImageContainer( imgWidth, imgHeight) { // get current width and height var widthCurrent = $('outerImageContainer').getWidth(); var heightCurrent = $('outerImageContainer').getHeight(); // get new width and height var widthNew = (imgWidth + (borderSize * 2)); var heightNew = (imgHeight + (borderSize * 2)); // scalars based on change from old to new var xScale = ( widthNew / widthCurrent) * 100; var yScale = ( heightNew / heightCurrent) * 100; // calculate size difference between new and old image, and resize if necessary var wDiff = widthCurrent - widthNew; var hDiff = heightCurrent - heightNew; if (!( hDiff === 0)) { new Effect.Scale('outerImageContainer', yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); } if (!( wDiff === 0)) { new Effect.Scale('outerImageContainer', xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); } $('imageDataContainer').style.width = widthNew + "px"; showImage(); } /** * updateDetails * */ function updateDetails() { $('imagecaption').innerHTML = caption; new Effect.Parallel( [ new Effect.SlideDown( 'imageDataContainer', { sync: true, duration: resizeDuration, from: 0.0, to: 1.0 }), new Effect.Appear('imageDataContainer', { sync: true, duration: resizeDuration }) ] ); } /** * showImage * Display image and begin preloading neighbors. */ function showImage() { $('imageloading').hide(); new Effect.Appear('lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: updateDetails }); } function checkForPreloadComplete(imgPreloader) { if (imgPreloader.complete) { $('lightboxImage').src = imgPreloader.src; resizeImageContainer(imgPreloader.width, imgPreloader.height); } else { setTimeout(checkForPreloadComplete.bind(this, imgPreloader), 100); } } return { /** * displayImage * display an image in a lightbox * * @param {String} URL of image */ displayImage : function(imageUrl, system_system_id) { if(system_system_id) caption = $('cf-' + system_system_id + '-captions').innerHTML else caption = ' '; $('overlay').setStyle({height: document.body.scrollHeight}); $('photo').setStyle({top: (document.body.scrollHeight - document.body.offsetHeight + 40)+'px'}); $('overlay').appear({ duration: 0.6, from:0, to: 0.7 }); $('imageloading').show(); $('lightboxImage').hide() $('imageDataContainer').hide() $('photo').show(); var imgPreloader = new Image(); imgPreloader.src = imageUrl; // once image is preloaded, resize image container setTimeout(checkForPreloadComplete.bind(this, imgPreloader), 100); }, reset : function() { $('overlay').fade({ duration: 0.3 }); $('photo').hide(); $('imageloading').show(); $('lightboxImage').hide() $('imageDataContainer').hide() $('lightboxImage').src = ""; $('outerImageContainer').style.width = "250px"; $('outerImageContainer').style.height = "250px"; } }; }();