ilch Forum » Ilch Clan 1.1 » Fehlersuche und Probleme » Problem bei Lightbox

Geschlossen
  1. #1
    User Pic
    Fussel86 Mitglied
    Registriert seit
    18.01.2009
    Beiträge
    47
    Beitragswertungen
    0 Beitragspunkte
    Hallo Leute ich habe ein Problem ich habe mir die Lightbox installiert funktioniert auch soweit, nur da ich ein Header mit Wassereffekt habe und das mit java läuft schneidet es mir ab dem Heder das Bild ab.

    Also ich schaue mir ein Bild an, das Bild liegt etwas über dem Header, also ist für mich das Bild unter dem Header sichtbar, kann ich das irgendwie beheben?


    verwendete ilchClan Version: 1.1

    betroffene Homepage: heroes-of-death.de
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    Rock@wulf Hall Of Fame
    Registriert seit
    03.06.2004
    Beiträge
    3.282
    Beitragswertungen
    239 Beitragspunkte
    ja den wasser Header entfernen währe punkt 1

    oder CSS vom lightbox mod entsprechend abändern
    Meine Postings repräsentieren meine Meinung wenn nicht anders gekennzeichnet.
    MFG Rock@wulf
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Fussel86 Mitglied
    Registriert seit
    18.01.2009
    Beiträge
    47
    Beitragswertungen
    0 Beitragspunkte
    Also den wassereffekt würde ich gerne behalten.

    wie muss ich die css von der lightbox ändern?
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    würde es denn nicht einfach schon reichen wenn du die Position der Lightbox weiter nach unten veränderst?


    Zuletzt modifiziert von darkentik am 02.07.2009 - 09:30:16
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Fussel86 Mitglied
    Registriert seit
    18.01.2009
    Beiträge
    47
    Beitragswertungen
    0 Beitragspunkte
    ja würde es nur wo muss ich die position ändern
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    post mir ma die css, vllt ist dort schon was vordefiniert. ansonsten halt die php und die html wo die lightbox aufgerufen wird.
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    Fussel86 Mitglied
    Registriert seit
    18.01.2009
    Beiträge
    47
    Beitragswertungen
    0 Beitragspunkte
    #lightbox{
    	position: absolute;
    	left: 0;
    	width: 100%;
    	z-index: 100;
    	text-align: center;
    	line-height: 0;
    	}
    
    #lightbox a img{ border: none; }
    
    #outerImageContainer{
    	position: relative;
    	background-color: #fff;
    	width: 250px;
    	height: 250px;
    	margin: 0 auto;
    	}
    
    #imageContainer{
    	padding: 10px;
    	}
    
    #loading{
    	position: absolute;
    	top: 40%;
    	left: 0%;
    	height: 25%;
    	width: 100%;
    	text-align: center;
    	line-height: 0;
    	}
    #hoverNav{
    	position: absolute;
    	top: 0;
    	left: 0;
    	height: 100%;
    	width: 100%;
    	z-index: 10;
    	}
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}
    
    #prevLink, #nextLink{
    	width: 49%;
    	height: 100%;
    	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    	display: block;
    	}
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }
    
    
    #imageDataContainer{
    	font: 10px Verdana, Helvetica, sans-serif;
    	background-color: #fff;
    	margin: 0 auto;
    	line-height: 1.4em;
    	overflow: auto;
    	width: 100%	
    	}
    
    #imageData{	padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
    #imageData #caption{ font-weight: bold;	}
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
    #imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em;	}	
    		
    #overlay{
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 90;
    	width: 100%;
    	height: 500px;
    	background-color: #000;
    	}
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    versuch ma das :

    #lightbox{
        position: absolute;
        left: 0;
        top: 400px;
        width: 100%;
        z-index: 100;
        text-align: center;
        line-height: 0;
        }


    Das top: 400px; sollte die Lightbox wenns klappt um 400 Pixel nach unten verschieben. Wenn es der Wert ist, dann musst du testen welcher Wert dort am optimalsten ist.


    Zuletzt modifiziert von darkentik am 02.07.2009 - 10:35:01
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    Fussel86 Mitglied
    Registriert seit
    18.01.2009
    Beiträge
    47
    Beitragswertungen
    0 Beitragspunkte
    ne das hat nichts verändert
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    hmmm dann nimm das wieder raus und schau mal ob das was bringt :

    #loading{
        position: absolute;
        top: 40%;
        left: 0%;
        height: 25%;
        width: 100%;
        text-align: center;
        line-height: 0;
        }


    ändern in

    #loading{
        position: absolute;
        top: 400px;
        left: 0%;
        height: 25%;
        width: 100%;
        text-align: center;
        line-height: 0;
        }


    wie gesagt bin kein Profi, muss bei mir leider auch noch viel probiern.
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    Fussel86 Mitglied
    Registriert seit
    18.01.2009
    Beiträge
    47
    Beitragswertungen
    0 Beitragspunkte
    nein ebenfalls nichts passiert
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    hhmmm...ok....*grübel*

    dann letzter Versuch :

    das hier :

    #overlay{
        position: absolute;
        top: 0;
        left: 0;
        z-index: 90;
        width: 100%;
        height: 500px;
        background-color: #000;
        }


    ändern in :

    #overlay{
        position: absolute;
        top: 400px;
        left: 0;
        z-index: 90;
        width: 100%;
        height: 500px;
        background-color: #000;
        }


    ansonsten müssten wir mal in andere dateien schauen, dort wo die Lightbox initialisiert wird. Quasi beim *klick* auf ein Bild, glaub das is irgendwas mit gallery oder showpic...ka weiß er grad net.
    0 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    Fussel86 Mitglied
    Registriert seit
    18.01.2009
    Beiträge
    47
    Beitragswertungen
    0 Beitragspunkte
    ja ich habe aber 3 galery dateien.

    Und ging wieder net.


    Zuletzt modifiziert von Fussel86 am 02.07.2009 - 11:02:59
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    annemarie gelöschter User
    *räusper* firebug soll helfen zwinker

    werd wohl auch dazu ein tut verfassen müssen, leider merke ich immer wieder wie die leute bei css problemen mehr raten als konkret das problem zu bennen / lösen
    0 Mitglieder finden den Beitrag gut.
  15. #15
    User Pic
    Fussel86 Mitglied
    Registriert seit
    18.01.2009
    Beiträge
    47
    Beitragswertungen
    0 Beitragspunkte
    das heißt?
    0 Mitglieder finden den Beitrag gut.
  16. #16
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    @ annemarie :
    Offtopic :
    • das Problem ist, dass ich teilweise mit den Bezeichnungen der Klassen nich viel anfangen kann...weil ich eben nicht automatisch wie der Coder denke. Deswegen hab ich mir angewöhnt Kommentare zu vergeben, aber das ist ja in der Programmierwelt sowieso sehr selten...ABER es hilft Neulingen ungemein, find ich jedenfalls so.


    b2t :
    • Könntest du uns verraten wo man das einstellt?



    Zuletzt modifiziert von darkentik am 02.07.2009 - 11:14:38
    0 Mitglieder finden den Beitrag gut.
  17. #17
    User Pic
    annemarie gelöschter User
    tjo, ich seh weder irgendeinen wassereffekt noch n bild was sich mit ner lightbox öffnet, vielleicht link und sagen "dann daa rechts ist ne box wo.." oder so.

    bin atm @ work, ich werd jetzt nicht danach suchen gehen.

    sry, aber das die designer / coder noch nicht firebug benutzen ist eine wissenslücke die man stopfen sollte wenn man sinnvoll / effektiver designs machen will.
    0 Mitglieder finden den Beitrag gut.
  18. #18
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    ich selber benutze auch firebug zum probleme beheben zwinker
    und zwar geht es um die Seite
    da oben auf
    gallery
    ->eine kategorie wählen und ein bild anklicken
    ->dann erscheint die lightbox

    so besser? zwinker
    nee kein stress, bin atm auch auf Arbeit lächeln *g*
    0 Mitglieder finden den Beitrag gut.
  19. #19
    User Pic
    annemarie gelöschter User
    also ich denke da an eine ganz simple lösung, eine die auch bei selectboxen und lightboxen eingesetzt wird.

    die lightbox scheint ein problem mit dem java applet zu haben oder andersherum.

    Lösung:

    als hintergrund des headers das bild nehmen das dem applett als hintergrundbild mitgegeben wird (also background:url(./include/designs/redlight_cs/HoD-Header.jpg))

    dann müsste vor aufrufen der lightbox die visibility des applets ausgeschaltet werden.
    hier wird wahrscheinlich kein z-index helfen, habe die situation von jar applet und lightbox noch nicht gehabt.

    bei schließen der lightbox müsste die visibility des header applets dann wieder auf sichtbar geschaltet werden.

    da dies ja dann eh nur für die page wär würd ich das lightbox script manipulieren (include/includes/js/lightbox/js/lightbox.js)

    such dir mal die funktionen raus die die box öffnet und die die sie schließt.

    bitte dem applet im head mal eine ID geben
    <APPLET archive="/include/designs/redlight_cs/DuriusWaterPic.jar" WIDTH="1000" HEIGHT="171" ALIGN="MIDDLE" CODE="DuriusWaterPic.class" ID="applet_im_head">


    dort einfach mal
    document.getElementById("applet_im_head").style.visibility("visible");
    oder
    document.getElementById("applet_im_head").style.visibility("hidden");


    jeweils beim öffnen / schließen der lightbox
    0 Mitglieder finden den Beitrag gut.
  20. #20
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    Fussel86 sag dann ma bitte bescheid ob das klappt, würd ich ja jetz auch gern mal wissen.
    0 Mitglieder finden den Beitrag gut.
  21. #21
    User Pic
    Fussel86 Mitglied
    Registriert seit
    18.01.2009
    Beiträge
    47
    Beitragswertungen
    0 Beitragspunkte
    also ich werd es mal in ruhe testen und dann gebe ich bescheid.
    0 Mitglieder finden den Beitrag gut.
  22. #22
    User Pic
    Fussel86 Mitglied
    Registriert seit
    18.01.2009
    Beiträge
    47
    Beitragswertungen
    0 Beitragspunkte
    ich kann die .js nicht öffnen, bekomme folgenden fehler.

    ---------------------------
    Windows Script Host
    ---------------------------
    Skript: C:\Dokumente und Einstellungen\Administrator\Desktop\lightbox\upload\include\includes\js\lightbox\js\scriptaculous.js
    Zeile: 32
    Zeichen: 7
    Fehler: Annahme ausgelöst und nicht aufgefangen.
    Code: 800A139E
    Quelle: Laufzeitfehler in Microsoft JScript
    0 Mitglieder finden den Beitrag gut.
  23. #23
    User Pic
    annemarie gelöschter User
    rechtsklick auf die datei, "öffnen mit" oder einfach in deinen editor per drag and drop reinziehen!

    außerdem sprach ich nicht von der prototype.js sondern von dieser hier "include/includes/js/lightbox/js/lightbox.js"
    0 Mitglieder finden den Beitrag gut.
  24. #24
    User Pic
    Fussel86 Mitglied
    Registriert seit
    18.01.2009
    Beiträge
    47
    Beitragswertungen
    0 Beitragspunkte
    ja hatte da nur gerade probiert ob ich bei allen js ne fehlermeldung bekomme.
    0 Mitglieder finden den Beitrag gut.
  25. #25
    User Pic
    Fussel86 Mitglied
    Registriert seit
    18.01.2009
    Beiträge
    47
    Beitragswertungen
    0 Beitragspunkte
    annemarie kannst du mir sagen wo ich den code einfügen muss kenne mich damit nicht aus.

    // -----------------------------------------------------------------------------------
    //
    //	Lightbox v2.03.3
    //	by Lokesh Dhakar - http://www.huddletogether.com
    //	5/21/06
    //
    //	For more information on this script, visit:
    //	http://huddletogether.com/projects/lightbox2/
    //
    //	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.
    //
    //
    // -----------------------------------------------------------------------------------
    /*
    
    	Table of Contents
    	-----------------
    	Configuration
    	Global Variables
    
    	Extending Built-in Objects	
    	- Object.extend(Element)
    	- Array.prototype.removeDuplicates()
    	- Array.prototype.empty()
    
    	Lightbox Class Declaration
    	- initialize()
    	- updateImageList()
    	- start()
    	- changeImage()
    	- resizeImageContainer()
    	- showImage()
    	- updateDetails()
    	- updateNav()
    	- enableKeyboardNav()
    	- disableKeyboardNav()
    	- keyboardAction()
    	- preloadNeighborImages()
    	- end()
    	
    	Miscellaneous Functions
    	- getPageScroll()
    	- getPageSize()
    	- getKey()
    	- listenKey()
    	- showSelectBoxes()
    	- hideSelectBoxes()
    	- showFlash()
    	- hideFlash()
    	- pause()
    	- initLightbox()
    	
    	Function Calls
    	- addLoadEvent(initLightbox)
    	
    */
    // -----------------------------------------------------------------------------------
    
    //
    //	Configuration
    //
    var fileLoadingImage = "include/includes/js/lightbox/images/loading.gif";		
    var fileBottomNavCloseImage = "include/includes/js/lightbox/images/closelabel.gif";
    
    var overlayOpacity = 0.8;	// controls transparency of shadow overlay
    
    var animate = true;			// toggles resizing animations
    var resizeSpeed = 7;		// controls the speed of the image resizing animations (1=slowest and 10=fastest)
    
    var borderSize = 10;		//if you adjust the padding in the CSS, you will need to update this variable
    
    // -----------------------------------------------------------------------------------
    
    //
    //	Global Variables
    //
    var imageArray = new Array;
    var activeImage;
    
    if(animate == true){
    	overlayDuration = 0.2;	// shadow fade in/out duration
    	if(resizeSpeed > 10){ resizeSpeed = 10;}
    	if(resizeSpeed < 1){ resizeSpeed = 1;}
    	resizeDuration = (11 - resizeSpeed) * 0.15;
    } else { 
    	overlayDuration = 0;
    	resizeDuration = 0;
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    //	Additional methods for Element added by SU, Couloir
    //	- further additions by Lokesh Dhakar (huddletogether.com)
    //
    Object.extend(Element, {
    	getWidth: function(element) {
    	   	element = $(element);
    	   	return element.offsetWidth; 
    	},
    	setWidth: function(element,w) {
    	   	element = $(element);
        	element.style.width = w +"px";
    	},
    	setHeight: function(element,h) {
       		element = $(element);
        	element.style.height = h +"px";
    	},
    	setTop: function(element,t) {
    	   	element = $(element);
        	element.style.top = t +"px";
    	},
    	setLeft: function(element,l) {
    	   	element = $(element);
        	element.style.left = l +"px";
    	},
    	setSrc: function(element,src) {
        	element = $(element);
        	element.src = src; 
    	},
    	setHref: function(element,href) {
        	element = $(element);
        	element.href = href; 
    	},
    	setInnerHTML: function(element,content) {
    		element = $(element);
    		element.innerHTML = content;
    	}
    });
    
    // -----------------------------------------------------------------------------------
    
    //
    //	Extending built-in Array object
    //	- array.removeDuplicates()
    //	- array.empty()
    //
    Array.prototype.removeDuplicates = function () {
        for(i = 0; i < this.length; i++){
            for(j = this.length-1; j>i; j--){        
                if(this[i][0] == this[j][0]){
                    this.splice(j,1);
                }
            }
        }
    }
    
    // -----------------------------------------------------------------------------------
    
    Array.prototype.empty = function () {
    	for(i = 0; i <= this.length; i++){
    		this.shift();
    	}
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    //	Lightbox Class Declaration
    //	- initialize()
    //	- start()
    //	- changeImage()
    //	- resizeImageContainer()
    //	- showImage()
    //	- updateDetails()
    //	- updateNav()
    //	- enableKeyboardNav()
    //	- disableKeyboardNav()
    //	- keyboardNavAction()
    //	- preloadNeighborImages()
    //	- end()
    //
    //	Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
    //
    var Lightbox = Class.create();
    
    Lightbox.prototype = {
    	
    	// initialize()
    	// Constructor runs on completion of the DOM loading. Calls updateImageList and then
    	// the function inserts html at the bottom of the page which is used to display the shadow 
    	// overlay and the image container.
    	//
    	initialize: function() {	
    		
    		this.updateImageList();
    
    		// Code inserts html at the bottom of the page that looks similar to this:
    		//
    		//	<div id="overlay"></div>
    		//	<div id="lightbox">
    		//		<div id="outerImageContainer">
    		//			<div id="imageContainer">
    		//				<img id="lightboxImage">
    		//				<div style="" id="hoverNav">
    		//					<a href="#" id="prevLink"></a>
    		//					<a href="#" id="nextLink"></a>
    		//				</div>
    		//				<div id="loading">
    		//					<a href="#" id="loadingLink">
    		//						<img src="images/loading.gif">
    		//					</a>
    		//				</div>
    		//			</div>
    		//		</div>
    		//		<div id="imageDataContainer">
    		//			<div id="imageData">
    		//				<div id="imageDetails">
    		//					<span id="caption"></span>
    		//					<span id="numberDisplay"></span>
    		//				</div>
    		//				<div id="bottomNav">
    		//					<a href="#" id="bottomNavClose">
    		//						<img src="images/close.gif">
    		//					</a>
    		//				</div>
    		//			</div>
    		//		</div>
    		//	</div>
    
    
    		var objBody = document.getElementsByTagName("body").item(0);
    		
    		var objOverlay = document.createElement("div");
    		objOverlay.setAttribute('id','overlay');
    		objOverlay.style.display = 'none';
    		objOverlay.onclick = function() { myLightbox.end(); }
    		objBody.appendChild(objOverlay);
    		
    		var objLightbox = document.createElement("div");
    		objLightbox.setAttribute('id','lightbox');
    		objLightbox.style.display = 'none';
    		objLightbox.onclick = function(e) {	// close Lightbox is user clicks shadow overlay
    			if (!e) var e = window.event;
    			var clickObj = Event.element(e).id;
    			if ( clickObj == 'lightbox') {
    				myLightbox.end();
    			}
    		};
    		objBody.appendChild(objLightbox);
    			
    		var objOuterImageContainer = document.createElement("div");
    		objOuterImageContainer.setAttribute('id','outerImageContainer');
    		objLightbox.appendChild(objOuterImageContainer);
    
    		// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
    		// If animations are turned off, it will be hidden as to prevent a flicker of a
    		// white 250 by 250 box.
    		if(animate){
    			Element.setWidth('outerImageContainer', 250);
    			Element.setHeight('outerImageContainer', 250);			
    		} else {
    			Element.setWidth('outerImageContainer', 1);
    			Element.setHeight('outerImageContainer', 1);			
    		}
    
    		var objImageContainer = document.createElement("div");
    		objImageContainer.setAttribute('id','imageContainer');
    		objOuterImageContainer.appendChild(objImageContainer);
    	
    		var objLightboxImage = document.createElement("img");
    		objLightboxImage.setAttribute('id','lightboxImage');
    		objImageContainer.appendChild(objLightboxImage);
    	
    		var objHoverNav = document.createElement("div");
    		objHoverNav.setAttribute('id','hoverNav');
    		objImageContainer.appendChild(objHoverNav);
    	
    		var objPrevLink = document.createElement("a");
    		objPrevLink.setAttribute('id','prevLink');
    		objPrevLink.setAttribute('href','#');
    		objHoverNav.appendChild(objPrevLink);
    		
    		var objNextLink = document.createElement("a");
    		objNextLink.setAttribute('id','nextLink');
    		objNextLink.setAttribute('href','#');
    		objHoverNav.appendChild(objNextLink);
    	
    		var objLoading = document.createElement("div");
    		objLoading.setAttribute('id','loading');
    		objImageContainer.appendChild(objLoading);
    	
    		var objLoadingLink = document.createElement("a");
    		objLoadingLink.setAttribute('id','loadingLink');
    		objLoadingLink.setAttribute('href','#');
    		objLoadingLink.onclick = function() { myLightbox.end(); return false; }
    		objLoading.appendChild(objLoadingLink);
    	
    		var objLoadingImage = document.createElement("img");
    		objLoadingImage.setAttribute('src', fileLoadingImage);
    		objLoadingLink.appendChild(objLoadingImage);
    
    		var objImageDataContainer = document.createElement("div");
    		objImageDataContainer.setAttribute('id','imageDataContainer');
    		objLightbox.appendChild(objImageDataContainer);
    
    		var objImageData = document.createElement("div");
    		objImageData.setAttribute('id','imageData');
    		objImageDataContainer.appendChild(objImageData);
    	
    		var objImageDetails = document.createElement("div");
    		objImageDetails.setAttribute('id','imageDetails');
    		objImageData.appendChild(objImageDetails);
    	
    		var objCaption = document.createElement("span");
    		objCaption.setAttribute('id','caption');
    		objImageDetails.appendChild(objCaption);
    	
    		var objNumberDisplay = document.createElement("span");
    		objNumberDisplay.setAttribute('id','numberDisplay');
    		objImageDetails.appendChild(objNumberDisplay);
    		
    		var objBottomNav = document.createElement("div");
    		objBottomNav.setAttribute('id','bottomNav');
    		objImageData.appendChild(objBottomNav);
    	
    		var objBottomNavCloseLink = document.createElement("a");
    		objBottomNavCloseLink.setAttribute('id','bottomNavClose');
    		objBottomNavCloseLink.setAttribute('href','#');
    		objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
    		objBottomNav.appendChild(objBottomNavCloseLink);
    	
    		var objBottomNavCloseImage = document.createElement("img");
    		objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
    		objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
    	},
    
    
    	//
    	// updateImageList()
    	// Loops through anchor tags looking for 'lightbox' references and applies onclick
    	// events to appropriate links. You can rerun after dynamically adding images w/ajax.
    	//
    	updateImageList: function() {	
    		if (!document.getElementsByTagName){ return; }
    		var anchors = document.getElementsByTagName('a');
    		var areas = document.getElementsByTagName('area');
    
    		// loop through all anchor tags
    		for (var i=0; i<anchors.length; i++){
    			var anchor = anchors[i];
    			
    			var relAttribute = String(anchor.getAttribute('rel'));
    			
    			// use the string.match() method to catch 'lightbox' references in the rel attribute
    			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    				anchor.onclick = function () {myLightbox.start(this); return false;}
    			}
    		}
    
    		// loop through all area tags
    		// todo: combine anchor & area tag loops
    		for (var i=0; i< areas.length; i++){
    			var area = areas[i];
    			
    			var relAttribute = String(area.getAttribute('rel'));
    			
    			// use the string.match() method to catch 'lightbox' references in the rel attribute
    			if (area.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    				area.onclick = function () {myLightbox.start(this); return false;}
    			}
    		}
    	},
    	
    	
    	//
    	//	start()
    	//	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
    	//
    	start: function(imageLink) {	
    
    		hideSelectBoxes();
    		hideFlash();
    
    		// stretch overlay to fill page and fade in
    		var arrayPageSize = getPageSize();
    		Element.setWidth('overlay', arrayPageSize[0]);
    		Element.setHeight('overlay', arrayPageSize[1]);
    
    		new Effect.Appear('overlay', { duration: overlayDuration, from: 0.0, to: overlayOpacity });
    
    		imageArray = [];
    		imageNum = 0;		
    
    		if (!document.getElementsByTagName){ return; }
    		var anchors = document.getElementsByTagName( imageLink.tagName);
    
    		// if image is NOT part of a set..
    		if((imageLink.getAttribute('rel') == 'lightbox')){
    			// add single image to imageArray
    			imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));			
    		} else {
    		// if image is part of a set..
    
    			// loop through anchors, find other images in set, and add them to imageArray
    			for (var i=0; i<anchors.length; i++){
    				var anchor = anchors[i];
    				if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
    					imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
    				}
    			}
    			imageArray.removeDuplicates();
    			while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
    		}
    
    		// calculate top and left offset for the lightbox 
    		var arrayPageScroll = getPageScroll();
    		var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
    		var lightboxLeft = arrayPageScroll[0];
    		Element.setTop('lightbox', lightboxTop);
    		Element.setLeft('lightbox', lightboxLeft);
    		
    		Element.show('lightbox');
    		
    		this.changeImage(imageNum);
    	},
    
    	//
    	//	changeImage()
    	//	Hide most elements and preload image in preparation for resizing image container.
    	//
    	changeImage: function(imageNum) {	
    		
    		activeImage = imageNum;	// update global var
    
    		// hide elements during transition
    		if(animate){ Element.show('loading');}
    		Element.hide('lightboxImage');
    		Element.hide('hoverNav');
    		Element.hide('prevLink');
    		Element.hide('nextLink');
    		Element.hide('imageDataContainer');
    		Element.hide('numberDisplay');		
    		
    		imgPreloader = new Image();
    		
    		// once image is preloaded, resize image container
    		imgPreloader.onload=function(){
    			Element.setSrc('lightboxImage', imageArray[activeImage][0]);
    			myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
    			
    			imgPreloader.onload=function(){};	//	clear onLoad, IE behaves irratically with animated gifs otherwise 
    		}
    		imgPreloader.src = imageArray[activeImage][0];
    	},
    
    	//
    	//	resizeImageContainer()
    	//
    	resizeImageContainer: function( imgWidth, imgHeight) {
    
    		// get curren width and height
    		this.widthCurrent = Element.getWidth('outerImageContainer');
    		this.heightCurrent = Element.getHeight('outerImageContainer');
    
    		// get new width and height
    		var widthNew = (imgWidth  + (borderSize * 2));
    		var heightNew = (imgHeight  + (borderSize * 2));
    
    		// scalars based on change from old to new
    		this.xScale = ( widthNew / this.widthCurrent) * 100;
    		this.yScale = ( heightNew / this.heightCurrent) * 100;
    
    		// calculate size difference between new and old image, and resize if necessary
    		wDiff = this.widthCurrent - widthNew;
    		hDiff = this.heightCurrent - heightNew;
    
    		if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
    		if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }
    
    		// if new and old image are same size and no scaling transition is necessary, 
    		// do a quick pause to prevent image flicker.
    		if((hDiff == 0) && (wDiff == 0)){
    			if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 
    		}
    
    		Element.setHeight('prevLink', imgHeight);
    		Element.setHeight('nextLink', imgHeight);
    		Element.setWidth( 'imageDataContainer', widthNew);
    
    		this.showImage();
    	},
    	
    	//
    	//	showImage()
    	//	Display image and begin preloading neighbors.
    	//
    	showImage: function(){
    		Element.hide('loading');
    		new Effect.Appear('lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: function(){	myLightbox.updateDetails(); } });
    		this.preloadNeighborImages();
    	},
    
    	//
    	//	updateDetails()
    	//	Display caption, image number, and bottom nav.
    	//
    	updateDetails: function() {
    	
    		// if caption is not null
    		if(imageArray[activeImage][1]){
    			Element.show('caption');
    			Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
    		}
    		
    		// if image is part of set display 'Image x of x' 
    		if(imageArray.length > 1){
    			Element.show('numberDisplay');
    			Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
    		}
    
    		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 }) ], 
    			{ duration: resizeDuration, afterFinish: function() {
    				// update overlay size and update nav
    				var arrayPageSize = getPageSize();
    				Element.setHeight('overlay', arrayPageSize[1]);
    				myLightbox.updateNav();
    				}
    			} 
    		);
    	},
    
    	//
    	//	updateNav()
    	//	Display appropriate previous and next hover navigation.
    	//
    	updateNav: function() {
    
    		Element.show('hoverNav');				
    
    		// if not first image in set, display prev image button
    		if(activeImage != 0){
    			Element.show('prevLink');
    			document.getElementById('prevLink').onclick = function() {
    				myLightbox.changeImage(activeImage - 1); return false;
    			}
    		}
    
    		// if not last image in set, display next image button
    		if(activeImage != (imageArray.length - 1)){
    			Element.show('nextLink');
    			document.getElementById('nextLink').onclick = function() {
    				myLightbox.changeImage(activeImage + 1); return false;
    			}
    		}
    		
    		this.enableKeyboardNav();
    	},
    
    	//
    	//	enableKeyboardNav()
    	//
    	enableKeyboardNav: function() {
    		document.onkeydown = this.keyboardAction; 
    	},
    
    	//
    	//	disableKeyboardNav()
    	//
    	disableKeyboardNav: function() {
    		document.onkeydown = '';
    	},
    
    	//
    	//	keyboardAction()
    	//
    	keyboardAction: function(e) {
    		if (e == null) { // ie
    			keycode = event.keyCode;
    			escapeKey = 27;
    		} else { // mozilla
    			keycode = e.keyCode;
    			escapeKey = e.DOM_VK_ESCAPE;
    		}
    
    		key = String.fromCharCode(keycode).toLowerCase();
    		
    		if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){	// close lightbox
    			myLightbox.end();
    		} else if((key == 'p') || (keycode == 37)){	// display previous image
    			if(activeImage != 0){
    				myLightbox.disableKeyboardNav();
    				myLightbox.changeImage(activeImage - 1);
    			}
    		} else if((key == 'n') || (keycode == 39)){	// display next image
    			if(activeImage != (imageArray.length - 1)){
    				myLightbox.disableKeyboardNav();
    				myLightbox.changeImage(activeImage + 1);
    			}
    		}
    
    	},
    
    	//
    	//	preloadNeighborImages()
    	//	Preload previous and next images.
    	//
    	preloadNeighborImages: function(){
    
    		if((imageArray.length - 1) > activeImage){
    			preloadNextImage = new Image();
    			preloadNextImage.src = imageArray[activeImage + 1][0];
    		}
    		if(activeImage > 0){
    			preloadPrevImage = new Image();
    			preloadPrevImage.src = imageArray[activeImage - 1][0];
    		}
    	
    	},
    
    	//
    	//	end()
    	//
    	end: function() {
    		this.disableKeyboardNav();
    		Element.hide('lightbox');
    		new Effect.Fade('overlay', { duration: overlayDuration});
    		showSelectBoxes();
    		showFlash();
    	}
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // getPageScroll()
    // Returns array with x,y page scroll values.
    // Core code from - quirksmode.com
    //
    function getPageScroll(){
    
    	var xScroll, yScroll;
    
    	if (self.pageYOffset) {
    		yScroll = self.pageYOffset;
    		xScroll = self.pageXOffset;
    	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
    		yScroll = document.documentElement.scrollTop;
    		xScroll = document.documentElement.scrollLeft;
    	} else if (document.body) {// all other Explorers
    		yScroll = document.body.scrollTop;
    		xScroll = document.body.scrollLeft;	
    	}
    
    	arrayPageScroll = new Array(xScroll,yScroll) 
    	return arrayPageScroll;
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // getPageSize()
    // Returns array with page width, height and window width, height
    // Core code from - quirksmode.com
    // Edit for Firefox by pHaez
    //
    function getPageSize(){
    	
    	var xScroll, yScroll;
    	
    	if (window.innerHeight && window.scrollMaxY) {	
    		xScroll = window.innerWidth + window.scrollMaxX;
    		yScroll = window.innerHeight + window.scrollMaxY;
    	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
    		xScroll = document.body.scrollWidth;
    		yScroll = document.body.scrollHeight;
    	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
    		xScroll = document.body.offsetWidth;
    		yScroll = document.body.offsetHeight;
    	}
    	
    	var windowWidth, windowHeight;
    	
    //	console.log(self.innerWidth);
    //	console.log(document.documentElement.clientWidth);
    
    	if (self.innerHeight) {	// all except Explorer
    		if(document.documentElement.clientWidth){
    			windowWidth = document.documentElement.clientWidth; 
    		} else {
    			windowWidth = self.innerWidth;
    		}
    		windowHeight = self.innerHeight;
    	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
    		windowWidth = document.documentElement.clientWidth;
    		windowHeight = document.documentElement.clientHeight;
    	} else if (document.body) { // other Explorers
    		windowWidth = document.body.clientWidth;
    		windowHeight = document.body.clientHeight;
    	}	
    	
    	// for small pages with total height less then height of the viewport
    	if(yScroll < windowHeight){
    		pageHeight = windowHeight;
    	} else { 
    		pageHeight = yScroll;
    	}
    
    //	console.log("xScroll " + xScroll)
    //	console.log("windowWidth " + windowWidth)
    
    	// for small pages with total width less then width of the viewport
    	if(xScroll < windowWidth){	
    		pageWidth = xScroll;		
    	} else {
    		pageWidth = windowWidth;
    	}
    //	console.log("pageWidth " + pageWidth)
    
    	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
    	return arrayPageSize;
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // getKey(key)
    // Gets keycode. If 'x' is pressed then it hides the lightbox.
    //
    function getKey(e){
    	if (e == null) { // ie
    		keycode = event.keyCode;
    	} else { // mozilla
    		keycode = e.which;
    	}
    	key = String.fromCharCode(keycode).toLowerCase();
    	
    	if(key == 'x'){
    	}
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // listenKey()
    //
    function listenKey () {	document.onkeypress = getKey; }
    	
    // ---------------------------------------------------
    
    function showSelectBoxes(){
    	var selects = document.getElementsByTagName("select");
    	for (i = 0; i != selects.length; i++) {
    		selects[i].style.visibility = "visible";
    	}
    }
    
    // ---------------------------------------------------
    
    function hideSelectBoxes(){
    	var selects = document.getElementsByTagName("select");
    	for (i = 0; i != selects.length; i++) {
    		selects[i].style.visibility = "hidden";
    	}
    }
    
    // ---------------------------------------------------
    
    function showFlash(){
    	var flashObjects = document.getElementsByTagName("object");
    	for (i = 0; i < flashObjects.length; i++) {
    		flashObjects[i].style.visibility = "visible";
    	}
    
    	var flashEmbeds = document.getElementsByTagName("embed");
    	for (i = 0; i < flashEmbeds.length; i++) {
    		flashEmbeds[i].style.visibility = "visible";
    	}
    }
    
    // ---------------------------------------------------
    
    function hideFlash(){
    	var flashObjects = document.getElementsByTagName("object");
    	for (i = 0; i < flashObjects.length; i++) {
    		flashObjects[i].style.visibility = "hidden";
    	}
    
    	var flashEmbeds = document.getElementsByTagName("embed");
    	for (i = 0; i < flashEmbeds.length; i++) {
    		flashEmbeds[i].style.visibility = "hidden";
    	}
    
    }
    
    
    // ---------------------------------------------------
    
    //
    // pause(numberMillis)
    // Pauses code execution for specified time. Uses busy code, not good.
    // Help from Ran Bar-On [ran2103@gmail.com]
    //
    
    function pause(ms){
    	var date = new Date();
    	curDate = null;
    	do{var curDate = new Date();}
    	while( curDate - date < ms);
    }
    /*
    function pause(numberMillis) {
    	var curently = new Date().getTime() + sender;
    	while (new Date().getTime();	
    }
    */
    // ---------------------------------------------------
    
    
    
    function initLightbox() { myLightbox = new Lightbox(); }
    Event.observe(window, 'load', initLightbox, false);


    ID hab ich im dem header gegeben
    0 Mitglieder finden den Beitrag gut.
  26. #26
    User Pic
    annemarie gelöschter User
    #374
        start: function(imageLink) {    
    document.getElementById("applet_im_head").style.visibility("hidden"); 
            hideSelectBoxes();
            hideFlash();


    #624

        end: function() {
            this.disableKeyboardNav();
            Element.hide('lightbox');
            new Effect.Fade('overlay', { duration: overlayDuration});
            showSelectBoxes();
            showFlash();
    document.getElementById("applet_im_head").style.visibility("visible"); 
        }


    vergiss nicht deinem applet die ID zu geben, sonst geht gar nichts.
    code ist jetzt nicht getestet, nur schnell zusammengehauen zwinker
    0 Mitglieder finden den Beitrag gut.
  27. #27
    User Pic
    Fussel86 Mitglied
    Registriert seit
    18.01.2009
    Beiträge
    47
    Beitragswertungen
    0 Beitragspunkte
    jetzt wird das Bild normal angezeigt und nicht mehr mit lightbox
    0 Mitglieder finden den Beitrag gut.
  28. #28
    User Pic
    dastiii Mitglied
    Registriert seit
    27.12.2005
    Beiträge
    2.354
    Beitragswertungen
    84 Beitragspunkte
    #374
        start: function(imageLink) {    
    document.getElementById("applet_im_head").style.visibility="hidden"; 
            hideSelectBoxes();
            hideFlash();


    #624

        end: function() {
            this.disableKeyboardNav();
            Element.hide('lightbox');
            new Effect.Fade('overlay', { duration: overlayDuration});
            showSelectBoxes();
            showFlash();
    document.getElementById("applet_im_head").style.visibility="visible"; 
        }



    Is das nich so richtig?
    0 Mitglieder finden den Beitrag gut.
  29. #29
    User Pic
    annemarie gelöschter User
    hier, ich hab das für den applett header in funktionen gesetzt.
    Zeile #745 - #759

    die funktionen werden bei start und ende der lightbox aufgerufen

    Zeile #376 und #625

    // -----------------------------------------------------------------------------------
    //
    //	Lightbox v2.03.3
    //	by Lokesh Dhakar - http://www.huddletogether.com
    //	5/21/06
    //
    //	For more information on this script, visit:
    //	http://huddletogether.com/projects/lightbox2/
    //
    //	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.
    //
    //
    // -----------------------------------------------------------------------------------
    /*
    
    	Table of Contents
    	-----------------
    	Configuration
    	Global Variables
    
    	Extending Built-in Objects	
    	- Object.extend(Element)
    	- Array.prototype.removeDuplicates()
    	- Array.prototype.empty()
    
    	Lightbox Class Declaration
    	- initialize()
    	- updateImageList()
    	- start()
    	- changeImage()
    	- resizeImageContainer()
    	- showImage()
    	- updateDetails()
    	- updateNav()
    	- enableKeyboardNav()
    	- disableKeyboardNav()
    	- keyboardAction()
    	- preloadNeighborImages()
    	- end()
    	
    	Miscellaneous Functions
    	- getPageScroll()
    	- getPageSize()
    	- getKey()
    	- listenKey()
    	- showSelectBoxes()
    	- hideSelectBoxes()
    	- showFlash()
    	- hideFlash()
    	- pause()
    	- initLightbox()
    	
    	Function Calls
    	- addLoadEvent(initLightbox)
    	
    */
    // -----------------------------------------------------------------------------------
    
    //
    //	Configuration
    //
    var fileLoadingImage = "include/includes/js/lightbox/images/loading.gif";		
    var fileBottomNavCloseImage = "include/includes/js/lightbox/images/closelabel.gif";
    
    var overlayOpacity = 0.8;	// controls transparency of shadow overlay
    
    var animate = true;			// toggles resizing animations
    var resizeSpeed = 7;		// controls the speed of the image resizing animations (1=slowest and 10=fastest)
    
    var borderSize = 10;		//if you adjust the padding in the CSS, you will need to update this variable
    
    // -----------------------------------------------------------------------------------
    
    //
    //	Global Variables
    //
    var imageArray = new Array;
    var activeImage;
    
    if(animate == true){
    	overlayDuration = 0.2;	// shadow fade in/out duration
    	if(resizeSpeed > 10){ resizeSpeed = 10;}
    	if(resizeSpeed < 1){ resizeSpeed = 1;}
    	resizeDuration = (11 - resizeSpeed) * 0.15;
    } else { 
    	overlayDuration = 0;
    	resizeDuration = 0;
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    //	Additional methods for Element added by SU, Couloir
    //	- further additions by Lokesh Dhakar (huddletogether.com)
    //
    Object.extend(Element, {
    	getWidth: function(element) {
    	   	element = $(element);
    	   	return element.offsetWidth; 
    	},
    	setWidth: function(element,w) {
    	   	element = $(element);
        	element.style.width = w +"px";
    	},
    	setHeight: function(element,h) {
       		element = $(element);
        	element.style.height = h +"px";
    	},
    	setTop: function(element,t) {
    	   	element = $(element);
        	element.style.top = t +"px";
    	},
    	setLeft: function(element,l) {
    	   	element = $(element);
        	element.style.left = l +"px";
    	},
    	setSrc: function(element,src) {
        	element = $(element);
        	element.src = src; 
    	},
    	setHref: function(element,href) {
        	element = $(element);
        	element.href = href; 
    	},
    	setInnerHTML: function(element,content) {
    		element = $(element);
    		element.innerHTML = content;
    	}
    });
    
    // -----------------------------------------------------------------------------------
    
    //
    //	Extending built-in Array object
    //	- array.removeDuplicates()
    //	- array.empty()
    //
    Array.prototype.removeDuplicates = function () {
        for(i = 0; i < this.length; i++){
            for(j = this.length-1; j>i; j--){        
                if(this[i][0] == this[j][0]){
                    this.splice(j,1);
                }
            }
        }
    }
    
    // -----------------------------------------------------------------------------------
    
    Array.prototype.empty = function () {
    	for(i = 0; i <= this.length; i++){
    		this.shift();
    	}
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    //	Lightbox Class Declaration
    //	- initialize()
    //	- start()
    //	- changeImage()
    //	- resizeImageContainer()
    //	- showImage()
    //	- updateDetails()
    //	- updateNav()
    //	- enableKeyboardNav()
    //	- disableKeyboardNav()
    //	- keyboardNavAction()
    //	- preloadNeighborImages()
    //	- end()
    //
    //	Structuring of code inspired by Scott Upton (http://www.uptonic.com/)
    //
    var Lightbox = Class.create();
    
    Lightbox.prototype = {
    	
    	// initialize()
    	// Constructor runs on completion of the DOM loading. Calls updateImageList and then
    	// the function inserts html at the bottom of the page which is used to display the shadow 
    	// overlay and the image container.
    	//
    	initialize: function() {	
    		
    		this.updateImageList();
    
    		// Code inserts html at the bottom of the page that looks similar to this:
    		//
    		//	<div id="overlay"></div>
    		//	<div id="lightbox">
    		//		<div id="outerImageContainer">
    		//			<div id="imageContainer">
    		//				<img id="lightboxImage">
    		//				<div style="" id="hoverNav">
    		//					<a href="#" id="prevLink"></a>
    		//					<a href="#" id="nextLink"></a>
    		//				</div>
    		//				<div id="loading">
    		//					<a href="#" id="loadingLink">
    		//						<img src="images/loading.gif">
    		//					</a>
    		//				</div>
    		//			</div>
    		//		</div>
    		//		<div id="imageDataContainer">
    		//			<div id="imageData">
    		//				<div id="imageDetails">
    		//					<span id="caption"></span>
    		//					<span id="numberDisplay"></span>
    		//				</div>
    		//				<div id="bottomNav">
    		//					<a href="#" id="bottomNavClose">
    		//						<img src="images/close.gif">
    		//					</a>
    		//				</div>
    		//			</div>
    		//		</div>
    		//	</div>
    
    
    		var objBody = document.getElementsByTagName("body").item(0);
    		
    		var objOverlay = document.createElement("div");
    		objOverlay.setAttribute('id','overlay');
    		objOverlay.style.display = 'none';
    		objOverlay.onclick = function() { myLightbox.end(); }
    		objBody.appendChild(objOverlay);
    		
    		var objLightbox = document.createElement("div");
    		objLightbox.setAttribute('id','lightbox');
    		objLightbox.style.display = 'none';
    		objLightbox.onclick = function(e) {	// close Lightbox is user clicks shadow overlay
    			if (!e) var e = window.event;
    			var clickObj = Event.element(e).id;
    			if ( clickObj == 'lightbox') {
    				myLightbox.end();
    			}
    		};
    		objBody.appendChild(objLightbox);
    			
    		var objOuterImageContainer = document.createElement("div");
    		objOuterImageContainer.setAttribute('id','outerImageContainer');
    		objLightbox.appendChild(objOuterImageContainer);
    
    		// When Lightbox starts it will resize itself from 250 by 250 to the current image dimension.
    		// If animations are turned off, it will be hidden as to prevent a flicker of a
    		// white 250 by 250 box.
    		if(animate){
    			Element.setWidth('outerImageContainer', 250);
    			Element.setHeight('outerImageContainer', 250);			
    		} else {
    			Element.setWidth('outerImageContainer', 1);
    			Element.setHeight('outerImageContainer', 1);			
    		}
    
    		var objImageContainer = document.createElement("div");
    		objImageContainer.setAttribute('id','imageContainer');
    		objOuterImageContainer.appendChild(objImageContainer);
    	
    		var objLightboxImage = document.createElement("img");
    		objLightboxImage.setAttribute('id','lightboxImage');
    		objImageContainer.appendChild(objLightboxImage);
    	
    		var objHoverNav = document.createElement("div");
    		objHoverNav.setAttribute('id','hoverNav');
    		objImageContainer.appendChild(objHoverNav);
    	
    		var objPrevLink = document.createElement("a");
    		objPrevLink.setAttribute('id','prevLink');
    		objPrevLink.setAttribute('href','#');
    		objHoverNav.appendChild(objPrevLink);
    		
    		var objNextLink = document.createElement("a");
    		objNextLink.setAttribute('id','nextLink');
    		objNextLink.setAttribute('href','#');
    		objHoverNav.appendChild(objNextLink);
    	
    		var objLoading = document.createElement("div");
    		objLoading.setAttribute('id','loading');
    		objImageContainer.appendChild(objLoading);
    	
    		var objLoadingLink = document.createElement("a");
    		objLoadingLink.setAttribute('id','loadingLink');
    		objLoadingLink.setAttribute('href','#');
    		objLoadingLink.onclick = function() { myLightbox.end(); return false; }
    		objLoading.appendChild(objLoadingLink);
    	
    		var objLoadingImage = document.createElement("img");
    		objLoadingImage.setAttribute('src', fileLoadingImage);
    		objLoadingLink.appendChild(objLoadingImage);
    
    		var objImageDataContainer = document.createElement("div");
    		objImageDataContainer.setAttribute('id','imageDataContainer');
    		objLightbox.appendChild(objImageDataContainer);
    
    		var objImageData = document.createElement("div");
    		objImageData.setAttribute('id','imageData');
    		objImageDataContainer.appendChild(objImageData);
    	
    		var objImageDetails = document.createElement("div");
    		objImageDetails.setAttribute('id','imageDetails');
    		objImageData.appendChild(objImageDetails);
    	
    		var objCaption = document.createElement("span");
    		objCaption.setAttribute('id','caption');
    		objImageDetails.appendChild(objCaption);
    	
    		var objNumberDisplay = document.createElement("span");
    		objNumberDisplay.setAttribute('id','numberDisplay');
    		objImageDetails.appendChild(objNumberDisplay);
    		
    		var objBottomNav = document.createElement("div");
    		objBottomNav.setAttribute('id','bottomNav');
    		objImageData.appendChild(objBottomNav);
    	
    		var objBottomNavCloseLink = document.createElement("a");
    		objBottomNavCloseLink.setAttribute('id','bottomNavClose');
    		objBottomNavCloseLink.setAttribute('href','#');
    		objBottomNavCloseLink.onclick = function() { myLightbox.end(); return false; }
    		objBottomNav.appendChild(objBottomNavCloseLink);
    	
    		var objBottomNavCloseImage = document.createElement("img");
    		objBottomNavCloseImage.setAttribute('src', fileBottomNavCloseImage);
    		objBottomNavCloseLink.appendChild(objBottomNavCloseImage);
    	},
    
    
    	//
    	// updateImageList()
    	// Loops through anchor tags looking for 'lightbox' references and applies onclick
    	// events to appropriate links. You can rerun after dynamically adding images w/ajax.
    	//
    	updateImageList: function() {	
    		if (!document.getElementsByTagName){ return; }
    		var anchors = document.getElementsByTagName('a');
    		var areas = document.getElementsByTagName('area');
    
    		// loop through all anchor tags
    		for (var i=0; i<anchors.length; i++){
    			var anchor = anchors[i];
    			
    			var relAttribute = String(anchor.getAttribute('rel'));
    			
    			// use the string.match() method to catch 'lightbox' references in the rel attribute
    			if (anchor.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    				anchor.onclick = function () {myLightbox.start(this); return false;}
    			}
    		}
    
    		// loop through all area tags
    		// todo: combine anchor & area tag loops
    		for (var i=0; i< areas.length; i++){
    			var area = areas[i];
    			
    			var relAttribute = String(area.getAttribute('rel'));
    			
    			// use the string.match() method to catch 'lightbox' references in the rel attribute
    			if (area.getAttribute('href') && (relAttribute.toLowerCase().match('lightbox'))){
    				area.onclick = function () {myLightbox.start(this); return false;}
    			}
    		}
    	},
    	
    	
    	//
    	//	start()
    	//	Display overlay and lightbox. If image is part of a set, add siblings to imageArray.
    	//
    	start: function(imageLink) {	
    		hideSelectBoxes();
    		hideFlash();
    		hideAppletHeader();
    
    		// stretch overlay to fill page and fade in
    		var arrayPageSize = getPageSize();
    		Element.setWidth('overlay', arrayPageSize[0]);
    		Element.setHeight('overlay', arrayPageSize[1]);
    
    		new Effect.Appear('overlay', { duration: overlayDuration, from: 0.0, to: overlayOpacity });
    
    		imageArray = [];
    		imageNum = 0;		
    
    		if (!document.getElementsByTagName){ return; }
    		var anchors = document.getElementsByTagName( imageLink.tagName);
    
    		// if image is NOT part of a set..
    		if((imageLink.getAttribute('rel') == 'lightbox')){
    			// add single image to imageArray
    			imageArray.push(new Array(imageLink.getAttribute('href'), imageLink.getAttribute('title')));			
    		} else {
    		// if image is part of a set..
    
    			// loop through anchors, find other images in set, and add them to imageArray
    			for (var i=0; i<anchors.length; i++){
    				var anchor = anchors[i];
    				if (anchor.getAttribute('href') && (anchor.getAttribute('rel') == imageLink.getAttribute('rel'))){
    					imageArray.push(new Array(anchor.getAttribute('href'), anchor.getAttribute('title')));
    				}
    			}
    			imageArray.removeDuplicates();
    			while(imageArray[imageNum][0] != imageLink.getAttribute('href')) { imageNum++;}
    		}
    
    		// calculate top and left offset for the lightbox 
    		var arrayPageScroll = getPageScroll();
    		var lightboxTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
    		var lightboxLeft = arrayPageScroll[0];
    		Element.setTop('lightbox', lightboxTop);
    		Element.setLeft('lightbox', lightboxLeft);
    		
    		Element.show('lightbox');
    		
    		this.changeImage(imageNum);
    	},
    
    	//
    	//	changeImage()
    	//	Hide most elements and preload image in preparation for resizing image container.
    	//
    	changeImage: function(imageNum) {	
    		
    		activeImage = imageNum;	// update global var
    
    		// hide elements during transition
    		if(animate){ Element.show('loading');}
    		Element.hide('lightboxImage');
    		Element.hide('hoverNav');
    		Element.hide('prevLink');
    		Element.hide('nextLink');
    		Element.hide('imageDataContainer');
    		Element.hide('numberDisplay');		
    		
    		imgPreloader = new Image();
    		
    		// once image is preloaded, resize image container
    		imgPreloader.onload=function(){
    			Element.setSrc('lightboxImage', imageArray[activeImage][0]);
    			myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
    			
    			imgPreloader.onload=function(){};	//	clear onLoad, IE behaves irratically with animated gifs otherwise 
    		}
    		imgPreloader.src = imageArray[activeImage][0];
    	},
    
    	//
    	//	resizeImageContainer()
    	//
    	resizeImageContainer: function( imgWidth, imgHeight) {
    
    		// get curren width and height
    		this.widthCurrent = Element.getWidth('outerImageContainer');
    		this.heightCurrent = Element.getHeight('outerImageContainer');
    
    		// get new width and height
    		var widthNew = (imgWidth  + (borderSize * 2));
    		var heightNew = (imgHeight  + (borderSize * 2));
    
    		// scalars based on change from old to new
    		this.xScale = ( widthNew / this.widthCurrent) * 100;
    		this.yScale = ( heightNew / this.heightCurrent) * 100;
    
    		// calculate size difference between new and old image, and resize if necessary
    		wDiff = this.widthCurrent - widthNew;
    		hDiff = this.heightCurrent - heightNew;
    
    		if(!( hDiff == 0)){ new Effect.Scale('outerImageContainer', this.yScale, {scaleX: false, duration: resizeDuration, queue: 'front'}); }
    		if(!( wDiff == 0)){ new Effect.Scale('outerImageContainer', this.xScale, {scaleY: false, delay: resizeDuration, duration: resizeDuration}); }
    
    		// if new and old image are same size and no scaling transition is necessary, 
    		// do a quick pause to prevent image flicker.
    		if((hDiff == 0) && (wDiff == 0)){
    			if (navigator.appVersion.indexOf("MSIE")!=-1){ pause(250); } else { pause(100);} 
    		}
    
    		Element.setHeight('prevLink', imgHeight);
    		Element.setHeight('nextLink', imgHeight);
    		Element.setWidth( 'imageDataContainer', widthNew);
    
    		this.showImage();
    	},
    	
    	//
    	//	showImage()
    	//	Display image and begin preloading neighbors.
    	//
    	showImage: function(){
    		Element.hide('loading');
    		new Effect.Appear('lightboxImage', { duration: resizeDuration, queue: 'end', afterFinish: function(){	myLightbox.updateDetails(); } });
    		this.preloadNeighborImages();
    	},
    
    	//
    	//	updateDetails()
    	//	Display caption, image number, and bottom nav.
    	//
    	updateDetails: function() {
    	
    		// if caption is not null
    		if(imageArray[activeImage][1]){
    			Element.show('caption');
    			Element.setInnerHTML( 'caption', imageArray[activeImage][1]);
    		}
    		
    		// if image is part of set display 'Image x of x' 
    		if(imageArray.length > 1){
    			Element.show('numberDisplay');
    			Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);
    		}
    
    		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 }) ], 
    			{ duration: resizeDuration, afterFinish: function() {
    				// update overlay size and update nav
    				var arrayPageSize = getPageSize();
    				Element.setHeight('overlay', arrayPageSize[1]);
    				myLightbox.updateNav();
    				}
    			} 
    		);
    	},
    
    	//
    	//	updateNav()
    	//	Display appropriate previous and next hover navigation.
    	//
    	updateNav: function() {
    
    		Element.show('hoverNav');				
    
    		// if not first image in set, display prev image button
    		if(activeImage != 0){
    			Element.show('prevLink');
    			document.getElementById('prevLink').onclick = function() {
    				myLightbox.changeImage(activeImage - 1); return false;
    			}
    		}
    
    		// if not last image in set, display next image button
    		if(activeImage != (imageArray.length - 1)){
    			Element.show('nextLink');
    			document.getElementById('nextLink').onclick = function() {
    				myLightbox.changeImage(activeImage + 1); return false;
    			}
    		}
    		
    		this.enableKeyboardNav();
    	},
    
    	//
    	//	enableKeyboardNav()
    	//
    	enableKeyboardNav: function() {
    		document.onkeydown = this.keyboardAction; 
    	},
    
    	//
    	//	disableKeyboardNav()
    	//
    	disableKeyboardNav: function() {
    		document.onkeydown = '';
    	},
    
    	//
    	//	keyboardAction()
    	//
    	keyboardAction: function(e) {
    		if (e == null) { // ie
    			keycode = event.keyCode;
    			escapeKey = 27;
    		} else { // mozilla
    			keycode = e.keyCode;
    			escapeKey = e.DOM_VK_ESCAPE;
    		}
    
    		key = String.fromCharCode(keycode).toLowerCase();
    		
    		if((key == 'x') || (key == 'o') || (key == 'c') || (keycode == escapeKey)){	// close lightbox
    			myLightbox.end();
    		} else if((key == 'p') || (keycode == 37)){	// display previous image
    			if(activeImage != 0){
    				myLightbox.disableKeyboardNav();
    				myLightbox.changeImage(activeImage - 1);
    			}
    		} else if((key == 'n') || (keycode == 39)){	// display next image
    			if(activeImage != (imageArray.length - 1)){
    				myLightbox.disableKeyboardNav();
    				myLightbox.changeImage(activeImage + 1);
    			}
    		}
    
    	},
    
    	//
    	//	preloadNeighborImages()
    	//	Preload previous and next images.
    	//
    	preloadNeighborImages: function(){
    
    		if((imageArray.length - 1) > activeImage){
    			preloadNextImage = new Image();
    			preloadNextImage.src = imageArray[activeImage + 1][0];
    		}
    		if(activeImage > 0){
    			preloadPrevImage = new Image();
    			preloadPrevImage.src = imageArray[activeImage - 1][0];
    		}
    	
    	},
    
    	//
    	//	end()
    	//
    	end: function() {
    		this.disableKeyboardNav();
    		Element.hide('lightbox');
    		new Effect.Fade('overlay', { duration: overlayDuration});
    		showSelectBoxes();
    		showFlash();
    		showAppletHeader();
    	}
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // getPageScroll()
    // Returns array with x,y page scroll values.
    // Core code from - quirksmode.com
    //
    function getPageScroll(){
    
    	var xScroll, yScroll;
    
    	if (self.pageYOffset) {
    		yScroll = self.pageYOffset;
    		xScroll = self.pageXOffset;
    	} else if (document.documentElement && document.documentElement.scrollTop){	 // Explorer 6 Strict
    		yScroll = document.documentElement.scrollTop;
    		xScroll = document.documentElement.scrollLeft;
    	} else if (document.body) {// all other Explorers
    		yScroll = document.body.scrollTop;
    		xScroll = document.body.scrollLeft;	
    	}
    
    	arrayPageScroll = new Array(xScroll,yScroll) 
    	return arrayPageScroll;
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // getPageSize()
    // Returns array with page width, height and window width, height
    // Core code from - quirksmode.com
    // Edit for Firefox by pHaez
    //
    function getPageSize(){
    	
    	var xScroll, yScroll;
    	
    	if (window.innerHeight && window.scrollMaxY) {	
    		xScroll = window.innerWidth + window.scrollMaxX;
    		yScroll = window.innerHeight + window.scrollMaxY;
    	} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
    		xScroll = document.body.scrollWidth;
    		yScroll = document.body.scrollHeight;
    	} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
    		xScroll = document.body.offsetWidth;
    		yScroll = document.body.offsetHeight;
    	}
    	
    	var windowWidth, windowHeight;
    	
    //	console.log(self.innerWidth);
    //	console.log(document.documentElement.clientWidth);
    
    	if (self.innerHeight) {	// all except Explorer
    		if(document.documentElement.clientWidth){
    			windowWidth = document.documentElement.clientWidth; 
    		} else {
    			windowWidth = self.innerWidth;
    		}
    		windowHeight = self.innerHeight;
    	} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
    		windowWidth = document.documentElement.clientWidth;
    		windowHeight = document.documentElement.clientHeight;
    	} else if (document.body) { // other Explorers
    		windowWidth = document.body.clientWidth;
    		windowHeight = document.body.clientHeight;
    	}	
    	
    	// for small pages with total height less then height of the viewport
    	if(yScroll < windowHeight){
    		pageHeight = windowHeight;
    	} else { 
    		pageHeight = yScroll;
    	}
    
    //	console.log("xScroll " + xScroll)
    //	console.log("windowWidth " + windowWidth)
    
    	// for small pages with total width less then width of the viewport
    	if(xScroll < windowWidth){	
    		pageWidth = xScroll;		
    	} else {
    		pageWidth = windowWidth;
    	}
    //	console.log("pageWidth " + pageWidth)
    
    	arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight) 
    	return arrayPageSize;
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // getKey(key)
    // Gets keycode. If 'x' is pressed then it hides the lightbox.
    //
    function getKey(e){
    	if (e == null) { // ie
    		keycode = event.keyCode;
    	} else { // mozilla
    		keycode = e.which;
    	}
    	key = String.fromCharCode(keycode).toLowerCase();
    	
    	if(key == 'x'){
    	}
    }
    
    // -----------------------------------------------------------------------------------
    
    //
    // listenKey()
    //
    function listenKey () {	document.onkeypress = getKey; }
    
    // ---------------------------------------------------
    
    function hideAppletHeader(){
    	var applet = document.getElementById("applet_im_head");
    	applet.style.visibility = "hidden";
    }
    
    // ---------------------------------------------------
    
    function showAppletHeader(){
    	var applet = document.getElementById("applet_im_head");
    	applet.style.visibility = "visible";
    }
    
    // ---------------------------------------------------
    
    function showSelectBoxes(){
    	var selects = document.getElementsByTagName("select");
    	for (i = 0; i != selects.length; i++) {
    		selects[i].style.visibility = "visible";
    	}
    }
    
    // ---------------------------------------------------
    
    function hideSelectBoxes(){
    	var selects = document.getElementsByTagName("select");
    	for (i = 0; i != selects.length; i++) {
    		selects[i].style.visibility = "hidden";
    	}
    }
    
    // ---------------------------------------------------
    
    function showFlash(){
    	var flashObjects = document.getElementsByTagName("object");
    	for (i = 0; i < flashObjects.length; i++) {
    		flashObjects[i].style.visibility = "visible";
    	}
    
    	var flashEmbeds = document.getElementsByTagName("embed");
    	for (i = 0; i < flashEmbeds.length; i++) {
    		flashEmbeds[i].style.visibility = "visible";
    	}
    }
    
    // ---------------------------------------------------
    
    function hideFlash(){
    	var flashObjects = document.getElementsByTagName("object");
    	for (i = 0; i < flashObjects.length; i++) {
    		flashObjects[i].style.visibility = "hidden";
    	}
    
    	var flashEmbeds = document.getElementsByTagName("embed");
    	for (i = 0; i < flashEmbeds.length; i++) {
    		flashEmbeds[i].style.visibility = "hidden";
    	}
    
    }
    
    
    // ---------------------------------------------------
    
    //
    // pause(numberMillis)
    // Pauses code execution for specified time. Uses busy code, not good.
    // Help from Ran Bar-On [ran2103@gmail.com]
    //
    
    function pause(ms){
    	var date = new Date();
    	curDate = null;
    	do{var curDate = new Date();}
    	while( curDate - date < ms);
    }
    /*
    function pause(numberMillis) {
    	var curently = new Date().getTime() + sender;
    	while (new Date().getTime();	
    }
    */
    // ---------------------------------------------------
    
    
    
    function initLightbox() { myLightbox = new Lightbox(); }
    Event.observe(window, 'load', initLightbox, false);
    0 Mitglieder finden den Beitrag gut.
  30. #30
    User Pic
    darkentik Mitglied
    Registriert seit
    29.03.2007
    Beiträge
    420
    Beitragswertungen
    1 Beitragspunkte
    WOOOOOW! *bin erstma erschlagen, wenn das ma kein grßer Qullecode is zwinker Und auch noch dokumentiert SAHNE!
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Fehlersuche und Probleme

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten