js: image replacement mit aktuellem .offsetHeight

[Migu]

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:

<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:

// 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:

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
}

 

[intime]

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)

 

[BoogieJones]

ganz große Klasse ist auch die JS-Bibliothek Mootools. Da geht sowas im Handumdrehen.