Mehrere Bilder aus PHP mit JS ansprechen

[omothes]

Hallo!

Angefangen hat es hiermit: http://www.tutorials.de/css/367353-...beinhaltende-bilder-dynamisch-veraendern.html

Nun stehe ich aber schon vor dem nächsten Problem.

Via PHP werden Bilder aus einem Verzeichnis gelesen und geladen. Diese sollen, je nach Fenstergröße, ihre Höhe ändern, so dass das Fenster immer möglichst gut gefüllt ist.

Mittlerweile schaff ich es mit

<script type="text/javascript">
	function BildResize (){
	var hoehe = innerHeight-200;
	document.images.bild.style.height = hoehe + 'px';
}
</script>

im HEAD, und onLoad & onResize im BODY, die Größen zu ändern. Allerdings nur für das erste geladene Bild.

	<div id="content">
 
			<div id="content-wrapper">
				<div id="images">

			<?php
					$pfad = "img/$typ/";
					$verz = opendir ( "$pfad" );
					
					while ( $file = readdir ( $verz ) )
					{
  				if ( $file != '.' && $file != '..')
  				{
    			echo "<a href='$pfad/$file' rel='lightbox[$file]' target='_blank'><img name='bild' style='margin-left:2px;margin-right:2px;' src='$pfad/$file'/></a><!-- <br style='clear:both' /> -->";
  				}
					}
					closedir ( $verz );
		 ?>
			

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

versuche mit getElementById(xxx) haben das selbe Ergebnis gebracht. Wäre aber auch nicht so gut, da dann ja mehrere Elemente mit der gleichen ID existieren würden. Deshalb jetzt das ganze mit document.images.bild....

wie kann ich jetzt die restlichen Bilder (anzahl kann variieren) ansprechen?

spielplatz ist hier: http://www.mothes.info/test

nachtrag: achja, im IE (8) & safari funktioniert das ganze überhaupt nicht, leider.

Danke!
Olli

 

[gupi]

Hallo,

versuchs mal so:

<script type="text/javascript">
    function BildResize (){
    var hoehe = innerHeight-200;
    var img;
    for i=1;i<=bilderzahl;i++){
      img = "document.images.bild+String(i)";
      img.style.height = hoehe + 'px';
    }
}
</script>

$i=1;
while ( $file = readdir ( $verz ) ) { 
  if ( $file != '.' && $file != '..') {
    echo "<a href='$pfad/$file' rel='lightbox[$file]' target='_blank'>"
    echo "<img name='bild".$i."' style='margin-left:2px;margin-right:2px;' src='$pfad/$file'/>"
    echo "</a><!-- <br style='clear:both' /> ";
    $i++
  }
}
...

So hat jedes Image seinen Namen: bild1 bis bildnn und kann eindeutig adressiert werden.

Sinnvoll ist es eventuell auch, in PHP das Verzeichnis in ein Array zu lesen. Die Arraylänge übergibst du dann an eine JS Variable als "bilderzahl" für den for-loop.
HTH
Gunter

 

[omothes]

hi,

danke, habe es eingebaut (bis auf die tabelle). der code sieht dann jetzt so aus:

 	<div id="content">
 <?php
	 if($typ=="")
	 	{	?>
	 		
				<div id="content-wrapper">
					<h1>Das eine Auge des Fotografen schaut weit geöffnet durch den Sucher, <br/>das andere, das geschlossene, blickt in die eigene Seele.</h1>
					<p>Henri Cartier-Bresson</p>
				</div>
			
	<?php
		}
		else
		{			?>
			<div id="content-wrapper">
				<div id="images">

			<?php
					$pfad = "img/$typ/";
					$verz = opendir ( "$pfad" );
					$i=1;

					while ( $file = readdir ( $verz ) ) {
  					if ( $file != '.' && $file != '..') {
						echo "<a href='$pfad/$file' rel='lightbox[$file]' target='_blank'>";
						echo "<img name='bild".$i."' style='margin-left:2px;margin-right:2px;' src='$pfad/$file'/>";
						echo "</a><!-- <br style='clear:both' /> -->";
					$i++;
					}
					}

					closedir ( $verz );
		} ?>
			</div>
		</div>
	</div>

und

<script type="text/javascript">
	 function BildResize (){
    var hoehe = innerHeight-200;
    var img;
    for i=1;i<=bilderzahl;i++){
      img = "document.images.bild+String(i)";
      img.style.height = hoehe + 'px';
    }
}
</script>

im (vom browser) generierten quelltext scheint es auch zu passen, regen tut sich aber trotzdem nichts.

 

[SpiceLab]

regen tut sich aber trotzdem nichts.

Wo rufst du denn die Script-Funktion "BildResize()" auf?

Ohne dies läuft das Script nicht automatisch.

Desweiteren, falls du dies mit dem IE testest, bedenke, dass er innerHeight nicht unterstützt, sondern stattdessen clientHeight nutzt - siehe hierzu den Absatz "Beachten Sie".

 

[omothes]

...
Mittlerweile schaff ich es mit

<script type="text/javascript">
	function BildResize (){
	var hoehe = innerHeight-200;
	document.images.bild.style.height = hoehe + 'px';
}
</script>

im HEAD, und onLoad & onResize im BODY, die Größen zu ändern. Allerdings nur für das erste geladene Bild.
...

siehe erster post...

 

[SpiceLab]

Die Fehlerkonsole in FF gibt dir weiteren Aufschluß darüber, warum guppis Script nicht funktioniert.

 

[SpiceLab]

Außerdem gehört das Script nicht im Dokumentheader, sondern im Anschluß an die eingebundenen Grafiken notiert.

 

[SpiceLab]

Eine zusätzliche Durchnummerierung der Bildnamen ist hier zudem nicht vonnöten.

<body onresize="BildResize()" onload="BildResize()">

<div id="images">
  
    <!-- Hier werden die Bilder ausgegeben -->
    <img src="..." name="bild" alt="" /> <img src="..." name="bild" alt="" />

    <script type="text/javascript">
        function BildResize (){
            var hoehe = innerHeight-200;
            for (i = 0; i < document.getElementsByName("bild").length; ++i) {
                document.getElementsByName("bild")[i].style.height = hoehe + 'px';
            }
        }
    </script>

</div>