js / Firefox: Bildwechsel vor vorherstendem Skript

Migu · 26.02.08

Hallo Zusammen

Habe ein dringendes JavaScript-Problem:

In der Gallerie http://server14.cyon.ch/~michaels/cms/website.php?id=/de/portfolio/spontaneous.htm soll ein Wechsel der Bilder mittels Klick auf die Thumbnails oder auf die Pfeiltasten stattfinden.

Wie in Safari korrekt ausgeführt, hat der Wechsel folgende Reihenfolge:

1. Das aktuelle Bild wird ausgeblendet, indem es durch ein transparentes GIF ersetzt wird. Somit erscheint das darunter liegende, animierte PNG
2. Die Pfeile werden ausgeblendet
3. Der Name des Kunden wird geändert (nicht relevant für das Problem)
4. Die Höhe und Breite des neuen Bildes werden berechnet (Funktion optimisePhotoSize, Script in der Datei optimisePhotoSize.js)
5. Das neue Bild wird geladen und angezeigt
6. Die Pfeile werden eingeblendet
7. Das neue Bild wird angezeigt

In Firefox gibt es Probleme. Das neue Bild wird sofort geladen, bevor Höhe oder Breite berechnet wurde oder bevor die Pfeile ausgeblendet werden. DIes hat zur Folge, dass das neue Bild zuerst in den falschen Dimensionen dargestellt werden, dass die Pfeile zuerst falsch gesetzt sind (zum Teil im Bild) und dass das dahinter liegende, animierte PNG nie ersichtlich wird.

Ich hab dann mal versucht am Ende des Scripts optimisePhotoSize.js eine Variable zu setzen und diese im photoSwitcher.js zu ändern, damit das Script photoSwitcher.js gezwungen wird, zu warten, bis da Script optimisePhotoSize.js ausgeführt wurde. Merkwürdigerweise hat es mal kurz geklappt, nachdem ich aber den Firefox neu startete funktionierte es nicht mehr.

Um Hilfe wäre ich sehr dankbar!

photoSwitcher.js (ruft Funktion optimisePhotoSize.js auf):

Code:

function showPic (arrayID,placeholderImage,placeholderText,scale,setNewSource,source) {


//display="none" of image useless for displaying loading.gif while new image is loading because Firefox processes script before new source is fully loaded
document.getElementById(placeholderImage).src = "../html/img/pool/transparentImage.gif";

switch(arrayID) {

case 'next' :
if (displayedImage < imageSourceList.length - 1)
{ displayedImage++; };
break;

case 'previous' :
if (displayedImage > 0)
{ displayedImage--; };
break;

//when clicking on thumbnail
default :
displayedImage = arrayID;
}

//test whether behaviour for onclick event is supported by browser
if (document.getElementById) {

//scale image and change #clientLink for #portfolio and #home but not for #pdf
if (scale == "scale"){

//arrows are displayed after image with new width is loaded
document.getElementById("swapImage").style.visibility = "hidden";

if (imageClientLinkList[displayedImage] && imageClientNameList[displayedImage]) {

document.getElementById("clientLink").href = imageClientLinkList[displayedImage];
document.getElementById("clientLink").innerHTML = imageClientNameList[displayedImage];
document.getElementById(placeholderText).style.visibility = "visible";

} else if (imageClientNameList[displayedImage]) {

document.getElementById("clientLink").href = "javascript: void(0)";
document.getElementById("clientLink").innerHTML = imageClientNameList[displayedImage];
document.getElementById(placeholderText).style.visibility = "visible";

} else {

document.getElementById(placeholderText).style.visibility = "hidden";

}

optimisePhotoSize(imageSourceList[displayedImage],placeholderImage);

// Firefox changes source (see below) before size is calculated because it executes this script before function optimisePhotoSize is called, therefore it must be forced to wait until function is proceed
var test = FirefoxDontProceedUntilFunctionIsExecuted * 2;

}


document.getElementById(placeholderImage).src = source + imageSourceList[displayedImage];


//scale image and change #clientLink for #portfolio and #home but not for #pdf
if (scale == "scale"){

//arrows are displayed after image with new width is loaded
document.getElementById("swapImage").style.visibility = "visible";

}

//show image after being loaded, only relevant when loading page
document.getElementById(placeholderImage).style.display = "block";

return true;

 } else {
return false;}
}

optimisePhotoSize.js:

Code:

//source: Michael Imstepf
//date: 06/01/2008
//purpose: scale images according to avaiable screen space
//dependencies: style.css, imageDataLookup.js

function optimisePhotoSize(fileName,placeholderImage){
var imageHeight = imageDataLookup(fileName,"Height");
var imageWidth = imageDataLookup(fileName,"Width");

//get information
var navigationHeight = document.getElementById('navigationOuterWrapper').offsetHeight;

var viewportHeight = $(window).height();
var viewportWidth = $(window).width();
	
var contentHeight = viewportHeight - navigationHeight - 40;
var contentWidth = viewportWidth - 140; 

var imageRatio = imageWidth / imageHeight;
					
var navigationPrimaryWidth = document.getElementById('navigationPrimary').offsetWidth;

//calculate ideal height
while ( ((imageHeight > 50) && (imageHeight > contentHeight)) || ((imageHeight > 50) && ((imageHeight * imageRatio) > contentWidth)))
{imageHeight--;}

//set height of image
document.images[placeholderImage].style.height = imageHeight + 'px';
//images in Firefox are displayed before size is calculated, therefore element must be hidden at first
//document.getElementById(placeholderImage).style.display = "block";


//set outer width of thumbnail bar respecting user determined font size by reading size of #navigation_primary (imageWidth + (.3/2) * this.navigationPrimaryWidth on each side for buttons)
/*document.getElementById("thumbnails").style.width = (imageHeight * imageRatio) + (0.3 * navigationPrimaryWidth) + 'px';*/
//images in Firefox are displayed before size is calculated, therefore element must be hidden at first (but must be displayed to calculate correct height of #navigationOuterWrapper
//document.getElementById("thumbnails").style.visibility = "visible";


//set inner width of thumbnail bar
/* document.getElementById("thumbnailsOuterWrapper0").style.width = (imageHeight * imageRatio) +'px';
document.getElementById("thumbnailsInnerWrapper0IncreaseWidth").style.width = (imageHeight * imageRatio) + (0.18 * navigationPrimaryWidth) + 'px'; don't go wider than right border of window to avoid its horizontal scrollbar */


//only set arrows in #thumbnail if thumbnails overlap available space within #thumbnails (1000px)
var thumbnailsInnerWrapper0Width = document.getElementById('thumbnailsInnerWrapper0').offsetWidth;
//#thumbnails minus padding of arrows
var thumbnailsWidth = document.getElementById('thumbnails').offsetWidth * 0.9;

if(thumbnailsInnerWrapper0Width > thumbnailsWidth) {
document.getElementById('lineup0').style.visibility = "visible";
document.getElementById('linedown0').style.visibility = "visible";
}


//set size of photo navigation using the same total width as #thumbnails calculated above
/* document.getElementById("swapImage").style.width = (imageHeight * imageRatio) + (0.3 * navigationPrimaryWidth) + 'px';*/
document.getElementById("swapImage").style.height = imageHeight + 'px';
document.getElementById("swapImage").style.marginTop = -imageHeight + 'px';
document.getElementById("previousImage").style.height = imageHeight + 'px';
document.getElementById("nextImage").style.height = imageHeight + 'px';
document.getElementById("previousImageArrow").style.marginLeft = (contentWidth - (imageHeight * imageRatio)) / 2 - 20 + 'px';
document.getElementById("nextImageArrow").style.marginRight = (contentWidth - (imageHeight * imageRatio)) / 2 - 20 + 'px';



//images in Firefox are displayed before size is calculated, therefore element must be hidden at first
//document.getElementById("swapImage").style.display = "block";

// Firefox changes source (see below) before size is calculated because it executes this script before function optimisePhotoSize is called, therefore it must be forced to wait until function is proceed
FirefoxDontProceedUntilFunctionIsExecuted = Math.floor(Math.random() * (.5 + 1));
}

HTML:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<!-- Head START -->
<head>
<title>Michael Sieber Switzerland |  Photographer: Portfolio - Spontan</title>

<!-- Meta START -->
<meta http-equiv="expires" content="0" />
<meta name="copyright" content="michaelimstepf.com (c) 2007" />
<meta name="author" content="Michael Imstepf" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="all" />
<meta http-equiv="content-language" content="de" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- Meta END -->

<!-- Script START -->
<!--<script type="text/javascript" src="../html/script/firebug/firebug.js"></script>-->
<script type="text/javascript" src="../html/script/maximiseWindow.js"></script>
<!-- Script END -->

<!-- Stylesheet Screen START -->
<style type="text/css" media="screen">
@import url(../html/style/screen/screen.css);
</style>
<!-- Stylesheet Screen END -->


<!-- Stylesheet Print START -->
<style type="text/css" media="print">
@import url(../html/style/print/print.css);
</style>
<!-- Stylesheet Print END -->

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

<!-- openEngine Comment START -->
<style type="text/css">
.oe_comment { display:none; }
</style>
<!-- openEngine Comment END -->
<script type="text/javascript" src="../html/script/eventsManager.js"></script>
<script type="text/javascript" src="../html/script/DHTML3API.js"></script>
<script type="text/javascript" src="../html/script/imageDataLookup.js"></script>
<script type="text/javascript" src="../html/script/optimisePhotoSize.js"></script>
<script type="text/javascript" src="../html/script/scrollButtonsHorizontal.js"></script>
<script type="text/javascript" src="../html/script/jquery-1.2.2.min.js"></script>
<script type="text/javascript" src="../html/script/opacityThumbnailBar.js"></script>
<script type="text/javascript" src="../html/script/photoSwitcher.js"></script>
<script type="text/javascript" src="../html/script/showElementsWhenJSEnabled.js"></script>
<script type="text/javascript">
//<![CDATA[

//for photoSwitcher.js
displayedImage=0;


//fill array with names of images
imageSourceList = new Array("PortSpontImg_001.jpg", "PortSpontImg_002.jpg", "PortSpontImg_003.jpg", "PortSpontImg_004.jpg", "PortSpontImg_005.jpg", "PortSpontImg_006.jpg", "PortSpontImg_007.jpg", "PortSpontImg_008.jpg", "PortSpontImg_009.jpg", "PortSpontImg_010.jpg", "PortSpontImg_011.jpg", "PortSpontImg_012.jpg", "PortSpontImg_013.jpg", "PortSpontImg_016.jpg", "PortSpontImg_015.jpg");

//fill array with height of images
imageHeightList = new Array(1000, 664, 1000, 660, 1000, 1000, 590, 1000, 664, 1100, 700, 800, 1000, 1000, 1000);

//fill array with width of images
imageWidthList = new Array(800, 1000, 700, 1000, 700, 800, 1000, 800, 1000, 800, 1000, 1000, 800, 800, 800);

//fill array with name of clients
imageClientNameList = new Array("SWISS RE", "CHIQUITA BANANA COMPANY", "DIE SCHWEIZERISCHE POST", "DIE SCHWEIZERISCHE POST", "PFLEGEZENTRUM BAAR", "DIE SCHWEIZERISCHE POST", "DIE SCHWEIZERISCHE POST", "DIE SCHWEIZERISCHE POST", "CHIQUITA BANANA COMPANY", "SWISS RE", "PFLEGEZENTRUM BAAR", "DIE SCHWEIZERISCHE POST", "", "", "");

//fill array with links to clients
imageClientLinkList = new Array("http://www.swissre.ch", "http://chiquita.ch", "https://shop.post.ch/PostShop/default.aspx?ph=0", "https://shop.post.ch/PostShop/default.aspx?ph=0", "flegezentrum-baar.ch/", "http://post.ch", "https://shop.post.ch/PostShop/default.aspx?ph=0", "https://shop.post.ch/PostShop/default.aspx?ph=0", "http://chiquita.ch/", "http://swissre.com/", "http://www.pflegezentrum-baar.ch/", "https://www.postmail.ch/de/index_pm.htm", "", "", "");

	//]]>
</script>

</head>
<!-- Head END -->


<body id="portfolio" onload="return showPic(0,'photo','client1de','scale','do not set new source','../html/img/pool/')">

<div id="navigationOuterWrapper"> <div id="navigationInnerWrapper">
<div id="navigationPrimary">
<ul>
<li><a href="website.php?id=/de/index.htm">MICHAEL SIEBER</a></li>
<li>|</li><li><a href="website.php?id=/de/portfolio/portfolio.htm" class="high">PORTFOLIO</a></li>
<li>|</li><li><a href="http://server14.cyon.ch/~michaels/cms/website.php?id=/de/services/send_link.htm">DIENSTE</a></li>
<li>|</li><li><a href="website.php?id=/de/contact/contact.htm">KONTAKT</a></li>
</ul>
</div>
<div id="navigationSecondary">
<ul>
<li><a href="website.php?id=/de/portfolio/spontaneous.htm" class="high">SPONTAN</a></li><li>|</li>
<li><a href="website.php?id=/de/portfolio/accurate.htm">PRÄZIS</a></li><li>|</li>
<li><a href="website.php?id=/de/portfolio/eloquent.htm">ELOQUENT</a></li><li>|</li>
<li><a href="website.php?id=/de/portfolio/projekte.htm">PROJEKTE</a></li><li>|</li>
</ul>
</div>
<div class="clear"></div>
</div>
<div class="line"></div>
<div id="client">
<div class="client1de" id="client1de">FÜR <a id="clientLink" href="http://www.swissre.ch">SWISS RE</a></div></div>

<div id="content">




<div id="thumbnails">
<img src="../html/img/pool/scrollButtonLeft.png" id="lineup0" class="lineup" alt="scroll left" />
<img src="../html/img/pool/scrollButtonRight.png" id="linedown0" class="linedown" alt="scroll right" />


<div class="thumbnailsOuterWrapper0">

<div id="thumbnailsInnerWrapper0IncreaseWidth">
<div id="thumbnailsInnerWrapper0" class="thumbnailsInnerWrapper0">

<a href="javascript: void(0)" onclick="return showPic(0,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_001.jpg" alt="" /></a>
<a href="javascript: void(0)" onclick="return showPic(1,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_002.jpg" alt="" /></a>
<a href="javascript: void(0)" onclick="return showPic(2,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_003.jpg" alt="" /></a>
<a href="javascript: void(0)" onclick="return showPic(3,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_004.jpg" alt="" /></a>
<a href="javascript: void(0)" onclick="return showPic(4,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_005.jpg" alt="" /></a>
<a href="javascript: void(0)" onclick="return showPic(5,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_006.jpg" alt="" /></a>
<a href="javascript: void(0)" onclick="return showPic(6,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_007.jpg" alt="" /></a>
<a href="javascript: void(0)" onclick="return showPic(7,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_008.jpg" alt="" /></a>
<a href="javascript: void(0)" onclick="return showPic(8,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_009.jpg" alt="" /></a>
<a href="javascript: void(0)" onclick="return showPic(9,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_010.jpg" alt="" /></a>
<a href="javascript: void(0)" onclick="return showPic(10,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_011.jpg" alt="" /></a>
<a href="javascript: void(0)" onclick="return showPic(11,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_012.jpg" alt="" /></a>
<a href="javascript: void(0)" onclick="return showPic(12,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_014.jpg" alt="" /></a>
<a href="javascript: void(0)" onclick="return showPic(13,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_016.jpg" alt="" /></a>
<a href="javascript: void(0)" onclick="return showPic(14,'photo','client1de','scale','set new source','../html/img/pool/')"><img class="thumbnail" src="../html/img/pool/1_PortSpontThumb_015.jpg" alt="" /></a>

</div>
</div>
</div>
</div>

</div>
</div><div class="clear"></div>
<div>

<img id="loadingImage" src="../html/img/pool/loading.gif" alt="please wait while loading" title="please wait while loading" />

<img id="photo" src="../html/img/pool/PortSpontImg_001.jpg" alt="SWISS RE" title="SWISS RE" />

<!--  name="photo" -->


<div id="swapImage">
<a onclick="return showPic('previous','photo','client1de','scale','set new source','../html/img/pool/')" href="javascript: void(0)"><span id="previousImage"><img id="previousImageArrow" src="../html/img/pool/scrollButtonLeft.png" alt="previous image" title="previous image" /></span></a>
<a onclick="return showPic('next','photo','client1de','scale','set new source','../html/img/pool/')" href="javascript: void(0)"><span id="nextImage"><img id="nextImageArrow" src="../html/img/pool/scrollButtonRight.png" alt="next image" title="next image" /></span></a>
<div class="clear"></div>
</div>



<noscript>


<div id="clientNoscript">
<div class="client1de">FÜR <a href="http://www.swissre.ch">SWISS RE</a></div></div>

<div id="thumbnailsNoscript">
<div class="thumbnailsOuterWrapper0">
<div class="thumbnailsInnerWrapper0">
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image1"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_001.jpg" alt="" title="" /></a>
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image2"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_002.jpg" alt="" title="" /></a>
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image3"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_003.jpg" alt="" title="" /></a>
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image4"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_004.jpg" alt="" title="" /></a>
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image5"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_005.jpg" alt="" title="" /></a>
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image6"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_006.jpg" alt="" title="" /></a>
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image7"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_007.jpg" alt="" title="" /></a>
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image8"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_008.jpg" alt="" title="" /></a>
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image9"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_009.jpg" alt="" title="" /></a>
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image10"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_010.jpg" alt="" title="" /></a>
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image11"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_011.jpg" alt="" title="" /></a>
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image12"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_012.jpg" alt="" title="" /></a>
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image13"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_014.jpg" alt="" title="" /></a>
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image15"><img class="thumbnail" src="../html/img/pool/PortSpontThumb_016.jpg" alt="" title="" /></a>
<a href="website.php?id=/de/portfolio/spontaneous.htm&image=page_image16"><img class="thumbnail" src="../html/img/pool/1_PortSpontThumb_015.jpg" alt="" title="" /></a>
</div>
</div>
<div class="clear"></div>
</div>

<div><img id="photoNoscript" src="../html/img/pool/PortSpontImg_001.jpg" alt="SWISS RE" title="SWISS RE" /></div>
<div class="clear"></div>


</noscript>
</div></body>
</html>

Suche

Suche

js / Firefox: Bildwechsel vor vorherstendem Skript

Migu

Kaiser Wilhelm

Wir schützen Ihre Privatsphäre

Informationen auf einem Gerät speichern und/oder abrufen

Personalisierte Anzeigen und Inhalte, Anzeigen- und Inhaltsmessungen, Erkenntnisse über Zielgruppen und Produktentwicklungen (Optionale Cookies)

Datenübermittlung an Partner in anderen Staaten (Drittanbieter-Cookies)