1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

js: image replacement mit aktuellem .offsetHeight

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Migu, 31.12.07.

  1. Migu

    Migu Kaiser Wilhelm

    Dabei seit:
    14.02.04
    Beiträge:
    175
    Hallo Zusammen

    Auf einer Gallerieseite http://server14.cyon.ch/~michaels/cms/website.php?id=portfolio/spontaneous.htm möchte ich die Bilder beim Anklicken des jeweiligen Thumbnails ändern und zwecks Berechnung der optimalen Bildhöhe und -breite zum jeweiligen Bild die Höhe und Breite abfragen.

    Die Abfrage klappt beim ersten Bild mittels onload wunderbar, jedoch scheint die Funktion nach Änderung der Quelle des Bildes (src) nicht mehr auf das ausgewählte Bild zur Berechnung der korrekten Höhe (1. Bild: 669px, 2. Bild: 395px, 3. Bild: ca 2000px) zu referenzieren.

    Herzlichen Dank für eure geschätzte Hilfe, Michael

    HTML:
    Code:
    <a onclick="return showPic(this)" href="../html/img/pool/PhotoSpontaneous1.jpg"><img onclick="setForm(1)" class="thumbnail" src="../html/img/pool/ThumbnailSpontaneous1.jpg" alt="" title="" /></a>
    <a onclick="return showPic(this)" href="../html/img/pool/PhotoSpontaneous2.jpg"><img onclick="setForm(2)" class="thumbnail" src="../html/img/pool/ThumbnailSpontaneous2.jpg" alt="" title="" /></a>
    <a onclick="return showPic(this)" href="../html/img/pool/PhotoSpontaneous3.jpg"><img onclick="setForm(3)" class="thumbnail" src="../html/img/pool/ThumbnailSpontaneous3.jpg" alt="" title="" /></a>
    
    <img id="photo" src="../html/img/pool/PhotoSpontaneous1.jpg" alt="" title="" />
    <p id="desc"> </p>
    
    Javascript zum Wechseln der Galleriebilder:
    Code:
    // source: http://www.alistapart.com/articles/imagegallery/
    
    function showPic (whichpic) {
    if (document.getElementById) {
    
     document.getElementById('photo').src = whichpic.href;
    
    optimisePhotoSize();
    
    if (whichpic.title) {
      document.getElementById('desc').childNodes[0].nodeValue = whichpic.title; 
     } else {
      document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue; 
     }  return false; 
    } else {
     return true;
     }
    }
    

    Javascript zum Auslesen der Höhe und Breite:
    Code:
    function optimisePhotoSize() {
    
    //get information
    this.navigationHeight = document.getElementById('navigationOuterWrapper').offsetHeight;
    this.viewportHeight = parseInt(DHTMLAPI.getInsideWindowHeight());
    this.viewportWidth = parseInt(DHTMLAPI.getInsideWindowWidth());
    
    			
    this.contentHeight = this.viewportHeight - this.navigationHeight - 40;
    this.contentWidth = this.viewportWidth - 100;
    
    this.photoHeight = document.getElementById('photo').offsetHeight;
    this.photoWidth = document.getElementById('photo').offsetWidth;
    this.photoRatio = this.photoWidth / this.photoHeight;
    
    alert("berechnete Höhe: "+this.photoHeight+"px");
    					
    this.navigationPrimaryWidth = document.getElementById('navigationPrimary').offsetWidth;
    
    //calculate ideal height
    while ( ((this.photoHeight > 50) && (this.photoHeight > this.contentHeight)) || ((this.photoHeight > 50) && ((this.photoHeight * this.photoRatio) > this.contentWidth))) {
    				this.photoHeight--;
    			}
    
    
    //set height of photo
    document.getElementById("photo").style.height = this.photoHeight+'px';
    
    //etc
    }
    
     
    #1 Migu, 31.12.07
    Zuletzt bearbeitet: 31.12.07
  2. intime

    intime Wohlschmecker aus Vierlanden

    Dabei seit:
    05.01.04
    Beiträge:
    236
    hallo,

    probiere doch mal thickbox oder lightbox
    vielleicht hilft es ja weiter.

    grüße

    intime

    ps: hab gerade auf deine seite geschaut: also firefox bringt eine meldung für alle bilder mit unterschiedlichen höhenberechnungen... (Bild)
     

    Anhänge:

    #2 intime, 31.12.07
    Zuletzt bearbeitet: 31.12.07
  3. BoogieJones

    BoogieJones Transparent von Croncels

    Dabei seit:
    10.11.07
    Beiträge:
    305
    ganz große Klasse ist auch die JS-Bibliothek Mootools. Da geht sowas im Handumdrehen.
     

Diese Seite empfehlen