Bildgröße an HTML übergeben

Cujo

Hallo,

ich habe mir ein Slideshow-Script runtergeladen. Jetzt möchte ich das so verändern, dass zufallsgesteuert aus einer Auswahl von 24 Ordnern mit je 8 Bildern ein Ordner ermittelt und dessen 8 Bilder angezeigt werden. Die Zufallsfunktion habe ich hingekriegt.

Das Problem ist jetzt aber, dass es 2 verschiedene Ordner gibt. Einmal Ordner mit Bildern im Format 256x341 und einmal Ordner mit Bildern im Format 341x256. Für jedes Format gibt es auch noch ein extra Startbild.

Jetzt habe ich versucht, ein zweites Script einzubinden, dass die Bildbreite und Bildhöhe ermittelt und die entsprechenden Werte dem HTML-Befehl <img> übergibt.

Ich habe versucht mir die JS-Grundbegriffe mittels SELFHTML anzulesen, aber irgendwie haut es nicht so hin, wie ich will. Das Bild wird nicht angezeigt

Könnt ihr euch das bitte mal angucken? Ich wäre euch sehr dankbar.

Code

var maxnr = 8; // Anzahl der Bilder
var pause = 2000; // Pause zwischen den Bildern
var aktnr = 0, halt = 1, an = 1
var zufall=Math.round(Math.random()*24+1)
var startbild = new Image();
if (zufall<100) {
zufall="0" + zufall;
if (zufall<10) {
zufall="0" + zufall;
}
}
function doIt()
{
var newImage = new Image();
newImage.onload = function ()
{
getHeightWidth( this )
};


newImage.src = "foto-puzzle/" + zufall + "/foto-puzzle-" + 001 + ".jpg";";
getHeightWidth( newImage );


if (breite==256)
{
startbild.src = "foto-puzzle/foto-puzzle-quer.jpg";
} else
{
startbild.src = "foto-puzzle/foto-puzzle.jpg";
}
}


function getHeightWidth( newImage )
{
if (newImage.alreadyLoaded || newImage.width == 0)
	return true;
breite = newImage.width;
hoehe = newImage.height;
newImage.alreadyLoaded = true;
alert(breite + ":" + hoehe);
document.getElementById( "myDiv" ).appendChild( newImage );
}


function bild(nr) {
if (an) {
aktnr += nr;
if (aktnr < 1)
aktnr = maxnr;
else if (aktnr > maxnr)
aktnr = 1;
document.slide.src="foto-puzzle/" + zufall + "/foto-puzzle-" + aktnr + ".jpg"; // Adresse der Bilder und Format!
}
doIt();
}
function show(){
if (!halt) {
bild(1);
setTimeout("show()",pause);
}
}
// -->

Alles anzeigen

HTML-Code:

Code

[img]startbild[/img]


<input value=" |&lt; " onclick="aktnr=1;bild(0);" type="button"> <input value=" &lt; " onclick="bild(-1)" type="button"> <input value="Play" onclick="halt=0;show()" type="button">
<input value="Stop" onclick="halt=1" type="button"><input value=" &gt; " onclick="bild(1)" type="button"><input value=" &gt;| " onclick="aktnr=maxnr;bild(0);" type="button">

synaptic

also zwei dinge solltest du beachten...
du kannst mit javascript keine ordner auslesen und du kannst mit javascript keine abmessungen von bildern auslesen, bevor sie nicht in eine html-datei eingebettet wurden...
du müsstest mit nem array arbeiten, da kannste dann alle bild-src´s als sammlung anbieten und per zufalls-zahl dann aus dem array auslesen.
für die verschiedenen bildgrössen rate ich zu ner switch-anweisung in der du dann den file-name oder eben die arraynummer auslist und entsprechend dann die grösse festlegst.

Cujo

Also das Skript hat ja soweit funktioniert, dass Javascript eine Zufallszahl ermittelt, dann den Pfad zusammenbastelt und an HTML weiterleitet. Wenn es nur eine Bildgröße gäbe, hätte ich kein Problem.

Und hier habe ich den Tipp gefunden, wie man die Bildgröße mit JS ermittelt:

http://www.traum-projekt.com/forum/101-java…-ermitteln.html

Jetzt habe ich halt versucht, die beiden Skripte miteinander zu verbinden. Sollte das wirklich nicht möglich sein?

synaptic

also selbst bei deinem tip wird die grösse des bildes unmittelbar vor der anzeige ermittelt, bzw während der anzeige.
um jetzt beide scripte miteinander zu verbinden bedarf es etwas aufwand

du hast in der funktion doit() letztlich die src von deinem newImage
und in der funktion getHeightWidth( newImage ) wird dann die anzeige durchgeführt.

also musst du jetzt gucken, dass du ne funktion baust, die dann eine zufallszahl ermittelt, dieser wert wird dann am besten mit return ausgegeben, so kannst du diese funktion wie ne variable einbauen.
die letztendliche darstellung würd ich weiterhin getHeightWidth( newImage ) überlassen denn dann kannst du dort auch dementsprechend die werte weiterverarbeiten.
evtl diese werte global definieren, dann können andere funktionen sie auch benutzen.

Zitat

Das Problem ist jetzt aber, dass es 2 verschiedene Ordner gibt. Einmal Ordner mit Bildern im Format 256x341 und einmal Ordner mit Bildern im Format 341x256. Für jedes Format gibt es auch noch ein extra Startbild.

und wenn du nur zwei formate benutzt, die auch noch in verschiedenen ordnern ligen, dann kannst du anhand der variable die den ordner identifiziert auch nen entsprechenden stylesetzen, sogar noch bevor das bild überhaupt ausgesucht wird.
on daher würd ich gar nicht versuchn die grösse eines jeden bildes abzufangen.
das macht nur dann sinn, wenn du wirklich probleme bekämest, weil die pix alle verschiedne auflösungen haben...

Cujo

Zitat von synaptic

also musst du jetzt gucken, dass du ne funktion baust, die dann eine zufallszahl ermittelt, dieser wert wird dann am besten mit return ausgegeben, so kannst du diese funktion wie ne variable einbauen.

Ich werde mich wohl weiter mit JS beschäftigen müssen. Das ist mir noch ein bißchen zu hoch

Zitat

und wenn du nur zwei formate benutzt, die auch noch in verschiedenen ordnern ligen, dann kannst du anhand der variable die den ordner identifiziert auch nen entsprechenden stylesetzen, sogar noch bevor das bild überhaupt ausgesucht wird.
on daher würd ich gar nicht versuchn die grösse eines jeden bildes abzufangen.
das macht nur dann sinn, wenn du wirklich probleme bekämest, weil die pix alle verschiedne auflösungen haben...

Tja, du hast den Teufel an die Wand gemalt Zusätzlich zu dem obigen Beispiel sind mir jetzt noch andere Fotos eingefallen, die ich auch gerne zufällig anzeigen würde. Und die sind alle verschieden in ihrer Größe.

synaptic

so cujo ich denke mal dein vorhaben ist mit dem folgenden code gelöst

bei fragen einfach fragen und wenn du änderungen haben willst die du selber nicht durchführen kannst steh ich natürlich gerne zur vefügung!!!

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


<html>
<head>
	<title>http://cujo.bplaced.net/foto-puzzle/004/foto-puzzle-1.jpg</title>
	<script type="text/javascript">
/* <![CDATA[ */
var maxAnzahlPic = 8;
var pause = 2000;
var maxAnzahlFolder = 24;
var hoehe;
var breite;
var urlpart ="http://cujo.bplaced.net/foto-puzzle/";
var trenner="/";
var prefix="foto-puzzle-";
var suffix=".jpg";
var folder;
var zahl;
var newImage = new Image();
var counter=1;
var TIMER;
var picUrl;
var picholder;


function zufallszahl(n){
zahl = Math.round(Math.random()*n);
if(zahl == 0){zahl=1}
return zahl;
}


function getRandomFolder(){
var folder = zufallszahl(maxAnzahlFolder);
	if(folder<10){
	   folder="00" + folder;
	}
	if(folder > 9){
	   folder="0" + folder;
	}
	return folder;
}


function createURL(){
picUrl = urlpart+getRandomFolder()+trenner;
return picUrl;
}


function createArray(){
picholder = new Array();
   for(i=0; i<maxAnzahlPic; i++){
   picholder[i] = new Image()
picholder[i].src = picUrl+prefix+(i+1)+suffix;
   }

}


function doIt(){


	newImage.onload = function(){
		getHeightWidth( this )
};


newImage.src = createURL()+prefix+counter+suffix;


getHeightWidth( newImage );
}


function getHeightWidth( newImage ){
 createArray();
if (newImage.alreadyLoaded || newImage.width == 0)
	return true;
breite = newImage.width;
hoehe = newImage.height;
newImage.alreadyLoaded = true;
var target=document.getElementById( "slide" );


if(breite == 341){target.src = "http://cujo.bplaced.net/foto-puzzle/foto-puzzle-quer.jpg"}
else{target.src = "http://cujo.bplaced.net/foto-puzzle/foto-puzzle.jpg"}
target.style.height = hoehe;
target.style.width = breite;


}


function show(){
var target=document.getElementById( "slide" );
target.src = picholder[(counter-1)].src;
target.style.height = hoehe;
target.style.width = breite;
document.getElementById("playbtn").disabled = "disabled";
}




function play(){
show();
TIMER = setTimeout("play()", pause);
counter++;
   if(counter > 8){
     stop();
	 again();
   }
}


function stop(){
clearTimeout(TIMER);
document.getElementById("playbtn").disabled = false;
}


function vor(){
stop();


   if(counter > 8){
 again();
 }
 
show();
counter++;
}


function zurueck(){
stop();
counter--;
if(counter<1){counter=1}
show();
}


function erstes(){
stop();
counter=1;
show();
}


function letztes(){
stop();
counter=8;
show();
}


function again(){
var weiter = confirm("Willst Du weitermachen??");
 if(weiter){
 var address= top.location.href;
top.location.href= address;
 }
 else{
 alert("Ich hoffe das rätseln hat Dir Spass bereitet");
 }
}
/* ]]> */
</script>
</head>


<body onload="doIt();">
<div id="header"></div>
	 <div id="wrapper">
	 	  <div id="content">
		  	   <div id="showDiv">
			   		[img][/img]</div>
			   		<input value=" |&lt; " onclick="erstes();" type="button">
 			   		<input value=" &lt; " onclick="zurueck()" type="button"> 
 			   		<input value="Play" onclick="play();" id="playbtn" type="button">
			  		<input value="Stop" onclick="stop();" type="button">
			  		<input value=" &gt; " onclick="vor();" type="button">
			  		<input value=" &gt;| " onclick="letztes();" type="button">
	   	  </div>
	 </div>




</body>
</html>

Alles anzeigen

das ganze als link haste dann hier:
http://home.arcor.de/synaptic/hilfe…show_array.html

Cujo

Wow, da hast du dich ja richtig für mich ins Zeug gelegt.

Vielen Dank für deine Hilfe

Tags