ilch Forum » Ilch Clan 1.1 » Module und Modifikationen » lightbox 2 feste bildgröße

Geschlossen
  1. #1
    User Pic
    nixmomo Mitglied
    Registriert seit
    30.07.2008
    Beiträge
    25
    Beitragswertungen
    0 Beitragspunkte
    Hi,
    Ich sagte ja man wird mich hier wieder lesen^^
    Ich hab nen Problem mit der lightbox 2 die ich hier geladen hab.
    Eigentlich nur ne kurze frage. Wie bzw. wo kann ichs einstellen das die lightbox ein bild in einer maximalen festen bildgröße anzeigt. Das heißt also wenn das bild zu groß ist das ers automatisch an die eingestellte größe anpasst also in der breite und höhe des bildes.

    Ist mein erstes erlebnis mit der lightbox daher kenn ich mich damit nich so wirklich aus. wär also nett wenn mir jemand helfen könnte

    Mfg nixmomo

    Oh ich seh grad das die nur in der usergallery funzt ok dann nochma nen extra wie stell ichs ein das sie auch in der normalen gallery funzt?


    verwendete ilchClan Version: 1.1

    betroffene Homepage: externer Link


    Zuletzt modifiziert von nixmomo am 31.07.2008 - 13:08:49
    Ab dem 3. August ca 13 Uhr auf unbestimmte Zeit inaktiv da bei mir zuhause die netten Bauarbeiter die Leitung gekappt haben. Bin aber bald wieder da
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    nixmomo Mitglied
    Registriert seit
    30.07.2008
    Beiträge
    25
    Beitragswertungen
    0 Beitragspunkte
    hmm weiß dazu hier niemand etwas?
    Ab dem 3. August ca 13 Uhr auf unbestimmte Zeit inaktiv da bei mir zuhause die netten Bauarbeiter die Leitung gekappt haben. Bin aber bald wieder da
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    Tyrargo Mitglied
    Registriert seit
    30.01.2006
    Beiträge
    5.541
    Beitragswertungen
    7 Beitragspunkte
    hier der code für die normale gallery:
    include/templates/gallery.htm

    {EXPLODE}
    <table width="100%" class="border" border="0" cellspacing="1" cellpadding="3">
      <tr class="Chead">
    		<td width="80%" align="center"><b>{_lang_category}</b></td>
        <td width="20%" align="center">{_lang_pictures}</td>
    	</tr>
    	{EXPLODE}
    	<tr class="{class}">
    	  <td><a href="index.php?gallery-{id}">{name}</a><br /><span class="smalfont">&raquo;&nbsp;{besch}</span></td>
    		<td align="center">{gallery}</td>
    	</tr>
    	{EXPLODE}
    </table>
    <br /><br />
    {EXPLODE}
    <table width="100%" class="border" border="0" cellspacing="1" cellpadding="3">
      <tr class="Chead">
    		<td colspan="{imgperline}" align="center"><b>{cname}</b></td>
    	</tr>
      {EXPLODE}
         <td {class}  width="{width}%" valign="top" align="center">
    
    <div onmouseover="hiddpos('infodiv{id}')" class="layer" id="infodiv{id}" style="position:absolute; top:50px; left:50px; display:none; width:200px; height:200px;">
    <table width="100%" class="border" border="0" cellspacing="1" cellpadding="4">
      <tr>
        <td class="{class}" align="left">
          <strong>{_lang_filename}:</strong> {datei_name}
    <br /><strong>{_lang_seen}:</strong> {klicks}
    <br /><strong>{_lang_voting}:</strong> {vote_wertung}
    <br /><strong>{_lang_comments}:</strong> {anz_koms}
    <br /><strong>{_lang_desc}:</strong> {besch}
        </td>
      </tr>
    </table>
    </div>
           <table class="border" border="0" cellspacing="1" cellpadding="0">
             <tr>
               <td onmouseout="hiddpos('infodiv{id}')" onmouseover="alertpos('infodiv{id}')"><a href="include/images/gallery/img_{id}.{endung}" rel="lightbox"><img src="include/images/gallery/img_thumb_{id}.{endung}" border="0" alt="{datei_name}" title="&nbsp;" /></a></td>
             </tr>
           </table>
         </td>
       {EXPLODE}
      </tr>
    </table>
    <center>{MPL}</center>
    <script language="JavaScript" type="text/javascript">
    <!--
      function oeffneFenster (bildr, cat) {
        var fenster = window.open ('index.php?gallery-show-'+cat+'-p'+bildr,'showBild','scrollbars=yes,height=600,width={breite},left=200,status=yes');
        fenster.focus();
        return (false);
      }
    
      // manage div ...
      document.onmousemove = checkPosition;
      function checkPosition(e) {
        if(document.all) {
          mausX = event.clientX + document.body.scrollLeft;
          mausY = event.clientY + document.body.scrollTop;
        } else {
          mausX = e.pageX;
          mausY = e.pageY;
        }
    
      }
    
      function alertpos(dname) {
      if (document.layers) {
        document.layers[0].left = mausX;
        document.layers[0].top = mausY;
      } else if (document.getElementById) {
        document.getElementById(dname).style.left = mausX + "px";
        document.getElementById(dname).style.top = mausY + "px";
      }
      document.getElementById(dname).style.display = "inline";
      }
      function hiddpos(dname) {
        document.getElementById(dname).style.display = "none";
      }
    //-->
    </script>
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    nixmomo Mitglied
    Registriert seit
    30.07.2008
    Beiträge
    25
    Beitragswertungen
    0 Beitragspunkte
    besten dank ich werds gleich mal einbauen und testen. Weißt du zufällig auch wie ichs einstellen kann das bilder auf eine festgelegte maximal größe angezeigt werden?

    Der Code is nehm ich mal an von der gesamten gallery.htm oder?
    Ab dem 3. August ca 13 Uhr auf unbestimmte Zeit inaktiv da bei mir zuhause die netten Bauarbeiter die Leitung gekappt haben. Bin aber bald wieder da
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    Tyrargo Mitglied
    Registriert seit
    30.01.2006
    Beiträge
    5.541
    Beitragswertungen
    7 Beitragspunkte
    ZitatZitat geschrieben von Tyrargo

    hier der code für die normale gallery:
    include/templates/gallery.htm


    sagte ich doch... die größenbeschränkung hab ich auch noch nicht hinbekommen. hatte es mal versucht zu ändern, hat aber nicht geklappt. da hab ichs gelassen. stört mich ja nicht wirklich.
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    nixmomo Mitglied
    Registriert seit
    30.07.2008
    Beiträge
    25
    Beitragswertungen
    0 Beitragspunkte
    hmm dann hoff ich mal das da evtl jemand ne idee hat für mich wärs wichtig ^^ jedesma dann die bilder downloaden umse anzupassen is blöd

    Danke trotzdem an dich hast mir sehr geholfen und ne menge zeit erspart ^^
    Ab dem 3. August ca 13 Uhr auf unbestimmte Zeit inaktiv da bei mir zuhause die netten Bauarbeiter die Leitung gekappt haben. Bin aber bald wieder da
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    nixmomo Mitglied
    Registriert seit
    30.07.2008
    Beiträge
    25
    Beitragswertungen
    0 Beitragspunkte
    hmm habs jetzt eingebaut aber es funzt nicht es geht immernoch das popup auf nich die lightbox hab dein code mit dem original code aus der gallery.htm ersetzt und wieder hochgeladen funzt aber nicht komischerweise.

    Hab ich noch was vergessen evtl?
    Ab dem 3. August ca 13 Uhr auf unbestimmte Zeit inaktiv da bei mir zuhause die netten Bauarbeiter die Leitung gekappt haben. Bin aber bald wieder da
    0 Mitglieder finden den Beitrag gut.
  8. #8
    User Pic
    Tyrargo Mitglied
    Registriert seit
    30.01.2006
    Beiträge
    5.541
    Beitragswertungen
    7 Beitragspunkte
    ich hab den code aus meiner datei genommen. und bei mir funzt die lightbox. schau es dir selbst an:
    vistauri.net/index.php?gallery-22
    zum beispiel...

    wenn die lightbox in der usergallery geht, dann muss sie mit dem oben genannten code auch in der normalen gallery gehen.
    0 Mitglieder finden den Beitrag gut.
  9. #9
    User Pic
    nixmomo Mitglied
    Registriert seit
    30.07.2008
    Beiträge
    25
    Beitragswertungen
    0 Beitragspunkte
    kannst es ja gern probieren
    externer Link

    Ist der code den du gepostet hast und in der usergallery funzt die lightbox ^^
    Ab dem 3. August ca 13 Uhr auf unbestimmte Zeit inaktiv da bei mir zuhause die netten Bauarbeiter die Leitung gekappt haben. Bin aber bald wieder da
    0 Mitglieder finden den Beitrag gut.
  10. #10
    User Pic
    Tyrargo Mitglied
    Registriert seit
    30.01.2006
    Beiträge
    5.541
    Beitragswertungen
    7 Beitragspunkte
    welche version hast denn vom ilch script?

    weil meine dateinamen heißen so, wie die bilder heißen, wenn ich mit der maus drüber fahre. ohne klick.

    und bei dir heißen sie "...?gallery_show-0P0"

    denke mal, daß es damit zusammen hängt. poste doch mal deinen originalcode von deiner gallery.htm

    PS: in deiner usergallery wird der link zum bild auch richtig dargestellt! blabla/include/images/usergallery/blabla.jpg

    und so müsst es auch in der normalen gallery sein.


    PPS: versuch doch erstmal ne kategorie anzulegen, und da die bilder reinzuladen! und nicht gleich direkt drauf. evtl liegt es daran!


    Zuletzt modifiziert von Tyrargo am 01.08.2008 - 17:40:00
    0 Mitglieder finden den Beitrag gut.
  11. #11
    User Pic
    nixmomo Mitglied
    Registriert seit
    30.07.2008
    Beiträge
    25
    Beitragswertungen
    0 Beitragspunkte
    Funzt auch nicht hab aber nun das ganze auch noch in ner kategorie geschoben die auch gäste sehen können.

    Hier der code aus der original gallery.htm
    {EXPLODE}
    <table width="100%" class="border" border="0" cellspacing="1" cellpadding="3">
      <tr class="Chead">
    		<td width="80%" align="center"><b>{_lang_category}</b></td>
        <td width="20%" align="center">{_lang_pictures}</td>
    	</tr>
    	{EXPLODE}
    	<tr class="{class}">
    	  <td><a href="index.php?gallery-{id}">{name}</a><br />
            <span class="smalfont">&raquo;&nbsp;{besch}</span>
            {_if_{uploader}>'0'}<br /><span class="smalfont">hochgeladen von: <a href="index.php?user-details-{uploader}">{uname}</a></span>{/_endif}
        </td>
    		<td align="center">{gallery}</td>
    	</tr>
    	{EXPLODE}
    </table>
    <br /><br />
    {EXPLODE}
    <table width="100%" class="border" border="0" cellspacing="1" cellpadding="3">
      <tr class="Chead">
    		<td colspan="{imgperline}" align="center"><b>{cname}</b>{_if_{uploader}>'0'} - <span class="smalfont">hochgeladen von: <a href="index.php?user-details-{uploader}">{uname}</a></span>{/_endif}</td>
    	</tr>
      {EXPLODE}
         <td class="{class}" width="{width}%" valign="top" align="center">
     
    <div onmouseover="hiddpos('infodiv{id}')" class="layer" id="infodiv{id}" style="position:absolute; top:50px; left:50px; display:none; width:200px; height:200px;">
    <table width="100%" class="border" border="0" cellspacing="1" cellpadding="4">
      <tr>
        <td class="{class}" align="left">
          <strong>{_lang_filename}:</strong> {datei_name}
    <br /><strong>{_lang_seen}:</strong> {klicks}
    <br /><strong>{_lang_voting}:</strong> {vote_wertung}
    <br /><strong>{_lang_comments}:</strong> {anz_koms}
    <br /><strong>{_lang_desc}:</strong> {besch}
        </td>
      </tr>
    </table>
    </div>
           <table class="border" border="0" cellspacing="1" cellpadding="0">
             <tr>
               <td onmouseout="hiddpos('infodiv{id}')" onmouseover="alertpos('infodiv{id}')"><a href="index.php?gallery-show-{cat}-p{bildr}" onClick="return oeffneFenster({bildr},{cat});" target="_blank"><img src="include/images/gallery/img_thumb_{id}.{endung}" border="0" alt="{datei_name}" title="&nbsp;" /></a></td>           
             </tr>
           </table>
         </td>
       {EXPLODE}
      </tr>
    </table>
    <center>{MPL}</center>
    <div align="center">
      <script language="JavaScript" type="text/javascript">
    <!--
      function oeffneFenster (bildr, cat) {
        var fenster = window.open ('index.php?gallery-show-'+cat+'-p'+bildr,'showBild','scrollbars=yes,height=600,width={breite},left=200,status=yes');
        fenster.focus();
        return (false);
      }
      
      // manage div ...
      document.onmousemove = checkPosition;
      function checkPosition(e) {
        if(document.all) {
          mausX = event.clientX + document.body.scrollLeft;
          mausY = event.clientY + document.body.scrollTop;
        } else {
          mausX = e.pageX;
          mausY = e.pageY;
        }
        
      }
      
      function alertpos(dname) {
      if (document.layers) {
        document.layers[0].left = mausX;
        document.layers[0].top = mausY;
      } else if (document.getElementById) {
        document.getElementById(dname).style.left = mausX + "px";
        document.getElementById(dname).style.top = mausY + "px";
      }
      document.getElementById(dname).style.display = "inline";
      }
      function hiddpos(dname) {
        document.getElementById(dname).style.display = "none";
      }
    //-->
    </script>
      <font size="2"><a href="index.php?galleryupl" title="Bilder uploaden" target="_self">Bilder 
      uploaden</a></font> </div>


    Ist die aktuelle Version also k kanns evtl. was mit dem mod zutun haben das auch user in der normalen gallery uploaden können?

    ich seh grad is nich ganz original der teil
    <font size="2"><a href="index.php?galleryupl" title="Bilder uploaden" target="_self">Bilder 
      uploaden</a></font> </div>

    ist von mir selbst aber is ja nur nen textlink sollte keine auswirkungen haben


    Zuletzt modifiziert von nixmomo am 01.08.2008 - 17:56:23
    Ab dem 3. August ca 13 Uhr auf unbestimmte Zeit inaktiv da bei mir zuhause die netten Bauarbeiter die Leitung gekappt haben. Bin aber bald wieder da
    0 Mitglieder finden den Beitrag gut.
  12. #12
    User Pic
    nixmomo Mitglied
    Registriert seit
    30.07.2008
    Beiträge
    25
    Beitragswertungen
    0 Beitragspunkte
    hmm keene idee mehr? hats eventuell mit der galleryshow.htm zutun? das man da evtl. was ändern muß oder so
    Ab dem 3. August ca 13 Uhr auf unbestimmte Zeit inaktiv da bei mir zuhause die netten Bauarbeiter die Leitung gekappt haben. Bin aber bald wieder da
    0 Mitglieder finden den Beitrag gut.
  13. #13
    User Pic
    ronaldo Mitglied
    Registriert seit
    11.11.2008
    Beiträge
    4
    Beitragswertungen
    0 Beitragspunkte
    Hi,

    hatte auch dasselbe Problem, mit der Anleitung kann man die Bildgröße festlegen --> externer Link

    ist zwar in englisch, aber trotzdem eigentlich ganz gut verständlich

    MfG
    ronaldo
    0 Mitglieder finden den Beitrag gut.
  14. #14
    User Pic
    Lord|Schirmer Administrator
    Registriert seit
    21.03.2007
    Beiträge
    7.675
    Beitragswertungen
    1212 Beitragspunkte
    Super Link! Für Alle die es noch nicht hinbekommen haben, hier mal die modifizierte lightbox.js, wobei die maximale Bildgröße auf 800x600 begrenzt wurde!

    // -----------------------------------------------------------------------------------
    //
    //	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;
    var lb_max_width = 800; //if you wish to constrain the width (set to 99999 for unlimited size)
    var lb_max_height = 600; //if you wish to constring the height (set to 99999 for unlimited size)
    
    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]);
    			
    			var dims = lb_scale_dims(imgPreloader.width, imgPreloader.height, lb_max_width, lb_max_height);
    			Element.setWidth('lightboxImage', dims[0]);
    			Element.setHeight('lightboxImage', dims[1]);
    			myLightbox.resizeImageContainer(dims[0], dims[1]);
    			
    			// 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', "Bild " + eval(activeImage + 1) + " von " + 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 lb_scale_dims(orig_w, orig_h, max_w, max_h)
    {
    var scale = lb_scale_rate(orig_w, orig_h, max_w, max_h);
    var new_w = Math.round(scale*orig_w); new_h = Math.round(scale*orig_h);
    if (new_w < 1) { new_w = 1; } if (new_h < 1) { new_h = 1; }
    return Array(new_w, new_h);
    }
    function lb_scale_rate(orig_w, orig_h, max_w, max_h) {
    var scale1 = 0; var scale2 = 0;
    if (orig_w > max_w) { scale1 = (orig_w - max_w) / orig_w; }
    if (orig_h > max_h) { scale2 = (orig_h - max_h) / orig_h; }
    var scale = (scale1>scale2)?scale1:scale2;
    return (1-scale);
    }
    // ---------------------------------------------------
    
    function initLightbox() { myLightbox = new Lightbox(); }
    Event.observe(window, 'load', initLightbox, false);



    Zuletzt modifiziert von Lord|Schirmer am 29.05.2011 - 22:48:13
    rules :: doku :: faq :: linkus
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Module und Modifikationen

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten