Random Hintergrundbilder

In diesem Forum gibt es Starthilfe zum neuen Extension-System von phpBB 3.1/3.2. Fragen zur Entwicklung von Extensions und zur Konvertierung von phpBB 3.0.x MODs sind ebenfalls willkommen.
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: Random Hintergrundbilder

Beitrag von chris1278 »

Also bruno was das script angeht für das template so würd ich das so umsetzen:

Code: Alles auswählen

<script type="text/javascript">

var a = 0;
hintergrund = new Array();
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/bild1.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/bild2.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/bild3.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/bild4.jpg"; a++;
var x = Math.floor(Math.random() * a);
document.write('<body style="background:url('+ hintergrund[x] +') no-repeat center center fixed;height:100%;">')
</script>
Und zwar müsstest du das php script was wie für die listener bearbeitet haben:

Code: Alles auswählen

public function add_imagerandom_theme($event)
	{
		$ordner =dirname(__dir__).'/img/'; 
		$verz = opendir($ordner);
		$filesFound = 0;
		$linkl = array();
		
		while($file = readdir($verz))
		{
		if($file != "." && $file != "..")
		{
			$filesFound++;
			array_push ($linkl, $file);
        }
		
		}
		$index = array_rand($linkl, 1);
		closedir($verz);
		$zufall = dirname(__dir__).'/img/'.$linkl[$index];
		
		$this->template->assign_vars(array(
			'TEST_RANDOM'		=> $zufall,
		));
	}
}	
So anpassen dasd du die Variable $zufall

aus den gessammelten bildern die mittels oprndir eingelesen werden so in diese Variable übernommen werde:

und zwar müsste das diese zeichenfolge haben:

Code: Alles auswählen

hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/bild1.jpg"; a++;
Als beispiel bei vier bildern (bild1.jpg, bild2.jpg, bild3.jpg und bild4.jpg Alös beispiel hier für die namen):

Die listener liest mit der opendir variante die dateien aus die dort sind und erstellt für jede datei einen string für das javscript im template.


ähnlich wie der andere kollege von mir das gelöst hat in der listener:

Code: Alles auswählen

public function add_imagerandom_theme($event)
	{
		define ('ROOT', dirname(dirname(__FILE__)));
		$pic_data = '';

		$directory = opendir(ROOT.'/img/');
		while ($file = readdir($directory))
		{
			if ($file != "." && $file != "..")
			{
				$pic_data .= "	<img src='" . generate_board_url() . "/ext/chris1278/bgchange/img/$file'>\n";
				
				
			}
		}
        
		$this->template->assign_vars(array(
			'DEMO_ALEX'		=> $pic_data,
		));
		closedir($directory);
		
	}
und zwar gibt die variable demo_alex dann im template bzw. über dasa template im quellcode das aus:

Code: Alles auswählen

	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_13.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_5.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_16.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_20.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_19.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_15.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_11.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_9.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_3.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_18.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_17.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_8.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_4.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_7.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_14.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_6.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_1.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_12.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_2.jpg'>
	<img src='https://forenurl/ext/chris1278/bgchange/img/DK_Image_10.jpg'>
Wie du siehstz wird mit dem opendir das verzeichnis ausgelesen und für jede datei ein <img...> code erzeugt der dann in den entsprechenden div geladen wird.


Wenn du das so anwendest das anstelle dieser code die bilder eingelesen werden in diesem format:

Code: Alles auswählen

hintergrund[a]="https://forenurl/ext/chris1278/bgchange/img/DK_Image_1.jpg"; a++;
hintergrund[a]="https://forenurl/ext/chris1278/bgchange/img/DK_Image_2.jpg"; a++;
hintergrund[a]="https://forenurl/ext/chris1278/bgchange/img/DK_Image_3.jpg"; a++;
hintergrund[a]="https://forenurl/ext/chris1278/bgchange/img/DK_Image_4.jpg"; a++;
hintergrund[a]="https://forenurl/ext/chris1278/bgchange/img/DK_Image_5.jpg"; a++;
hintergrund[a]="https://forenurl/ext/chris1278/bgchange/img/DK_Image_6.jpg"; a++;
hintergrund[a]="https://forenurl/ext/chris1278/bgchange/img/DK_Image_7.jpg"; a++;
hintergrund[a]="https://forenurl/ext/chris1278/bgchange/img/DK_Image_8.jpg"; a++;
hintergrund[a]="https://forenurl/ext/chris1278/bgchange/img/DK_Image_9.jpg"; a++;
hintergrund[a]="https://forenurl/ext/chris1278/bgchange/img/DK_Image_10.jpg"; a++;
sprich die variable demo_alex würde mit diesen zeilen gefüllt und dann kann man im template das hier nutzen:

Code: Alles auswählen

<script type="text/javascript">

var a = 0;
hintergrund = new Array();
{DEMO_ALEX}
var x = Math.floor(Math.random() * a);
document.write('<body style="background:url('+ hintergrund[x] +') no-repeat center center fixed;height:100%;">')
</script>
Wobei beim Auslesen der demo_alex Variable dann ja die entsprechenden zeilen dort stehen würde dann würde das bild direkt in die Body als Style classe eingelesen.

Falls das für dich ein ansatz ist.
69bruno
Mitglied
Beiträge: 444
Registriert: 05.06.2020 08:21

Re: Random Hintergrundbilder

Beitrag von 69bruno »

Das kann man später ja alles umsetzen.
Im ersten Schritt sollte man aber erstmal eine URL eines Bildes übergeben und damit den Hintergrund füllen können.
Und das geht nicht, weil die von mir angepasste Zeile:

Code: Alles auswählen

document.write('<body style="background:url('hintergrund');">') </script>
Nicht funktioniert. s. https://testforum.cruiser-lounge.de (Entwicklerkonsole)

Später per Array alle Bilder übergeben und per JS die Zufallsauswahl zu treffen ist m.E. unproblematisch.
Forum: cruiser-lounge.de
PHPBB-Version: 3.3.11 / Debian-Linux 10 / PHP-Version: 8.1
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: Random Hintergrundbilder

Beitrag von chris1278 »

Also die Url die in den quelltext übergeben wird bei dir sieht so aus:

Code: Alles auswählen

let hintergrund = "https:\/\/testforum.cruiser-lounge.de\/ext\/chris1278\/bgchange\/img\/01.jpg";
alert(hintergrund);
document.write('<body style=" background-image:url('hintergrund')">');
diese /\/ striche hintereinander gehen auch nicht.

Also ich habs teilweise so übergeben das die ganze zeole ausgegeben wird allerdings fehlen noch ein paar sonderzeichen in der zeile.

Die listener.php stelle sieht so aus:

Code: Alles auswählen

public function add_imagerandom_theme($event)
	{
		define ('ROOT', dirname(dirname(__FILE__)));
		$pic_data = '';

		$directory = opendir(ROOT.'/img/');
		while ($file = readdir($directory))
		{
			if ($file != "." && $file != "..")
			{	 
				$pic_data .= "	hintergrund[a]=". generate_board_url() . "/ext/chris1278/bgchange/img/$file\n";
			}
		}

		$this->template->assign_vars(array(
			'DEMO_RANDOM'		=> $pic_data,
		));
		closedir($directory);
		
	}
und das dazu gehöhrige template script:

Code: Alles auswählen

<script type="text/javascript">

var a = 0;
hintergrund = new Array();
{{DEMO_RANDOM}}
var x = Math.floor(Math.random() * a);
document.write('<body style="background:url('+ hintergrund[x] +') no-repeat center center fixed;height:100%;">')
</script>
Allerdings wie schon erwähnt sollte die zeile die ausgegeben wird folgendes Format haben:

hintergrund[a]="https://forenurl/ext/chris1278/bgchange/img/DK_Image_10.jpg"; a++;

aber es kommt nur raus:

hintergrund[a]=http://localhost:80/phpbb3/ext/chris1278/bgchange/img/bild1.jpg


in der listener.php mus man diese zeile so anpassen:

$pic_data .= " hintergrund[a]=". generate_board_url() . "/ext/chris1278/bgchange/img/$file\n"; das dann entsprechedn das richtige fomat rauskommt.

Bei dieser zeile mus man das korrigieren. das die richtige zecihenfolge in den string $pic_data gelegt werden.

Dioe jetzige version liest in der listener.php das entsprechende verzeichnis aus und erstellt auch die jeweiligen zeilen je bild eine zeile aber das format ist halt nicht das richtige und darum kann der javascrupt das nicht verabeiten.


Ich habs getestet ob das so ausscheit für die scriptversion im template:

Code: Alles auswählen

<script type="text/javascript">

var a = 0;
hintergrund = new Array();
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_1.jpg"; a++;hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_2.jpg"; a++;hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_3.jpg"; a++;hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_4.jpg"; a++;hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_5.jpg"; a++;hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_6.jpg"; a++;hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_7.jpg"; a++;hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_8.jpg"; a++;hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_9.jpg"; a++;hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_10.jpg"; a++;
var x = Math.floor(Math.random() * a);
document.write('<body style="background:url('+ hintergrund[x] +') no-repeat center center fixed;height:100%;">')
</script>
oder so:

Code: Alles auswählen

<script type="text/javascript">

var a = 0;
hintergrund = new Array();
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_1.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_2.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_3.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_4.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_5.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_6.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_7.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_8.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_9.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_10.jpg"; a++;
var x = Math.floor(Math.random() * a);
document.write('<body style="background:url('+ hintergrund[x] +') no-repeat center center fixed;height:100%;">')
</script>
würde keine rolle spielen nur diese zeilen hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_10.jpg"; a++; müssen in exakt diesem format in die arqay variable $pic_data gelegt werden. Dann hääte man schon den ersten schritt hin zum wechselnden hintergrund. Dann muss man noch nach der scalierung schauen weil das bild unten dann in weisen hintergrund übergeht was niocht sein sollte. Aber ich denke das müsste sich mit anpassen der document write zeile eigentlich beheben lassen.
69bruno
Mitglied
Beiträge: 444
Registriert: 05.06.2020 08:21

Re: Random Hintergrundbilder

Beitrag von 69bruno »

Dann versuchs mal so:

Code: Alles auswählen

document.write('<body style="background:url('"'+ hintergrund[x] +'"') no-repeat center center fixed;height:100%;">')
Und der Link zum Bild funktioniert so ohne Probleme. Die Slashes werden durch die Funktionen generiert, da habe ich nichts dran geändert. Wenn Du den Link so nimmst und in die Adresszeile packst, wird das Bild geladen.
Zuletzt geändert von 69bruno am 11.07.2021 20:25, insgesamt 1-mal geändert.
Forum: cruiser-lounge.de
PHPBB-Version: 3.3.11 / Debian-Linux 10 / PHP-Version: 8.1
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: Random Hintergrundbilder

Beitrag von chris1278 »

Das funktioniert leider nicht. Die Zeile muss unbedingt in dem besagten php script in der listener.php schon korrekt gereiert werden. da die " in derm document write einzufügen brinhgt nicht wirklich was. weil die bilder bis dort erst gar nicht kommen. Die müssen in dem format in das script übergeben werden.

Weil im grundegenommen das script welches ich in der Template datei benutze dafür müssen jedes bild mit korrektem pfad in diesem formal eingetragen sein:

Code: Alles auswählen

<script type="text/javascript">

var a = 0;
hintergrund = new Array();
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/bild1.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/bild2.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/bild3.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/bild4.jpg"; a++;
var x = Math.floor(Math.random() * a);
document.write('<body style="background:url('+ hintergrund[x] +') no-repeat center center fixed;height:100%;">')
</script>
im grunde genmommen wie in dem beispiel für 4 bilder und jedes weitere bild mus genau so in diesen einen block zwischen: hintergrund = new Array(); und var x = Math.floor(Math.random() * a); aufgenommen werden. Und der listener.php sollte dann mittels der opendir variante das verzeichnis auslesen und diesen block erstellen. Daher mus dort schon das exakte format ausgegeben werden.

Das funktioniert aber im moment noch nicht.
vfrblue
Ehemaliges Teammitglied
Beiträge: 1993
Registriert: 22.11.2016 18:46

Re: Random Hintergrundbilder

Beitrag von vfrblue »

Falls es noch um die Vervielfältigung der Bilder nach unten geht:
Wie wäre es denn mit der Einbindung einer .css-Datei in die Extension mit folgendem Inhalt:

Code: Alles auswählen

body {
	background-repeat: no-repeat;
	}
(Nur mal so aus der Hüfte geschossen :wink: )
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: Random Hintergrundbilder

Beitrag von chris1278 »

vrfblu nein darum ging es nicht. Das bild war nach unten nicht verdoppelt. nur als das bild die höhe erreicht hat wurde der hintergrund weis. habe den fehler aber im script gefunden.

in dieser zeile hier:

document.write('<body style="background:url('+ hintergrund[x] +') no-repeat center center fixed;height:100%;">')

einfach das heightm 100%; entfernt dann passt es. wie du siehst ist da schon no-repear drin.
69bruno
Mitglied
Beiträge: 444
Registriert: 05.06.2020 08:21

Re: Random Hintergrundbilder

Beitrag von 69bruno »

OK,
sortieren wir uns mal kurz.
Um das mal kurz zu erläutern. Für ein Projekt habe ich im Internet ein kleines Snipet (Skript) gefunden wo ich für den Hintergrund (Body) wechselnde Bilder einfügen kann, sprich bei jedem Seitenaufruf ein neues Hintergrundbild per Zufall.
das war für mich die Ausgangslage aus deinem ersten Post.
Jetzt schickst Du dieses JS-Snippet:

Code: Alles auswählen

<script type="text/javascript">
var a = 0;
hintergrund = new Array();
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/bild1.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/bild2.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/bild3.jpg"; a++;
hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/bild4.jpg"; a++;
var x = Math.floor(Math.random() * a);
document.write('<body style="background:url('+ hintergrund[x] +') no-repeat center center fixed;height:100%;">')
</script>
Und möchtest, dass die Einträge in diesem Array aus PHP geliefert werden.

Hier muss die Zielsetzung klar sein. Wenn Du bei jedem Seitenaufruf ein neues Hintergrundbild haben willst, dann sollte tunlichst per PHP das img-Verzeichnis gelesen werden, eine zufällig ausgewählte Bild-URL an JS übergeben werden und als Hintergrundbild verwendet werden. Nur dann reicht auch die Variante mit

Code: Alles auswählen

document.write
, weil diese beim Aufbau der Seite einmalig ausgeführt wird.
Wenn Du zeitgesteuert verschiedene Hintergrundbilder anzeigen willst (ala Slideshow), dann wäre es vlt sinnvoll, das ganze mit JS zu realisieren, wobei das Snippet von Dir nur bedingt einsetzbar ist, da es nur für 4 hartcodierte Bilder verwendet werden kann. Zu der Notation: das [a] ist ein Index und wird am Ende der Zeile mit der Anweisung inkrementiert, also hochgezählt. Das a++ darf also ganz sicher nicht von PHP an Javasript übergeben werden. Die Indexe aus PHP werden bei der Umwandlung in ein JS-Array automatisch gesetzt. Also Muss "hintergrund" anstelle von "hintergrund[a]" übergeben werden. DAs a++ entfällt somit gänzlich.
Was spricht denn dagegen, zeitgesteuert die Funktion

Code: Alles auswählen

add_imagerandom_theme($event)
aufzurufen und dann mit dem dann ausgewähltem Bild den Hintergrund zu füllen ? Ich sehe noch nicht den Vorteil, den Zufallsgenerator von JS zu nutzen. Die Bilder liegen auf dem Server und du liest mit PHP als serverorientierte Scriptsprache die Pfade ein. Dann kannst du dort auch den Zufallsgenerator nutzen und übergibst nur das Minimum, nämlich die Bild-URL welche den Hintergrund darstellen soll.

Im https://testforum.cruiser-lounge.de kannst Du sehen, dass ich die URL's sauber übergeben kriege, auch mit den fehlenden Anführungszeichen.
In der Seite selbst stehen sie aus PHP, im popup aus JS.
Forum: cruiser-lounge.de
PHPBB-Version: 3.3.11 / Debian-Linux 10 / PHP-Version: 8.1
Benutzeravatar
chris1278
Mitglied
Beiträge: 3526
Registriert: 12.11.2007 06:20
Wohnort: Euskirchen
Kontaktdaten:

Re: Random Hintergrundbilder

Beitrag von chris1278 »

Wenn Du zeitgesteuert verschiedene Hintergrundbilder anzeigen willst (ala Slideshow), dann wäre es vlt sinnvoll, das ganze mit JS zu realisieren, wobei das Snippet von Dir nur bedingt einsetzbar ist, da es nur für 4 hartcodierte Bilder verwendet werden kann. Zu der Notation: das [a] ist ein Index und wird am Ende der Zeile mit der Anweisung
Die Anzahl ist hier irrelevant. In dem Beispiel sind es 4 Bilder man kann aber auch 2 oder 20 nahmen man muss eben nur für jedes Bild in diesem besagten template snipet eine Zeile anlegen. Also bei 20 wären das 20 Zeilen je Bild eben eine.

Wie gesagt es muss nicht unbedingt diese template Lösung sein. du kannst das auch anders mit Java Skript umsetzen.

Wichtig wäre das man mittels listener das entsprechende Verzeichnis in der ext (in dem fall ext/chris1278/bgchange/img/) aus liest die Bilder listet und diese als ziel übergibt.

Das mit dem a++ müsste bei dem Schon sein also bei dem snipet.

Wie schon erwähnt bei der variante die ich im template habe muss zwingende diese zeile eben so ausgegeben werden.

Ob man mit dem document write so die Slideshow auch noch mit einbinden kann weis ich nicht.

aber Zumindest würde schonmal je Seiten Aufruf das Hintergrund Bild gewechselt. Man bräuchte eben nicht mehr jedes Bild einzeln einzutragen sondern würde dies über die listener machen.

Klar letzten endlich stelle ich mir das so vor:

Aufruf listener.

Das Verzeichnis wird ausgelesen und die Bilder liste generiert So wie du bzw. wir es ja jetzt schon haben.

Und im template wird dann das Bild übergeben und es wird als Slideshow generiert.

Der Alex hat das zwar umgesetzt aber der hat im Prinzip den Foren Inhalt in einen div Container gesetzt und davor einen div Container wo er das Bild mittels template Übergabe einfließen lässt eben mit besagten img Codes. Und hat das ganze in den wrap Container getan. Die Version hatte ich dir ja auch zukommen lassen.

Und meine Überlegung ist es halt das man dies irgendwie über eine art css übergabe macht. Und daher dachte ich erstmal an diese document.write Geschichte wobei da ja ein style baum direkt in die body klasse geschrieben wird. Leider lässt sich dieser nicht mittels externer css umsetzen weil man ja leider keine variablen in eine css datei übergeben kann. Zumindest nach meinem Kenntnisstand eben.

Es muss nicht so sein ich bin auch für andere Lösungen offen. Du kannst dir die Variante wie es aktuell ist unter demo.dk-forum.de anschauen. Dort läuft die variante vom Alex.

Falls du bezüglich JS ne andere Idee hast wäre das auch kein ding.


Code: Alles auswählen

<script type="text/javascript">

var a = 0;
hintergrund = new Array();

<< Hier mus der inhalt rein also die bilder mit besagter Pfadangabe -->

var x = Math.floor(Math.random() * a);
document.write('<body style="background:url('+ hintergrund[x] +') no-repeat center center fixed;height:100%;">')
</script>

In dem Snipet sah halt die zeile in dem Format aus:

hintergrund[a]="https://forenurl/ext/chris1278/bgchange/img/DK_Image_1.jpg"; a++;

wenns auch mit anderem zeilenformat geht auch gut. Aber sobald in dem Block aber eben die Bilder in diesem Format ausgegeben werden sprich je bild eine zeile dann sollte zumindest die Variante so mit dem document write funktionieren mal abgesehen von dem Slideshow Effekt.


Falls du eine andere Idee hast bitte her damit.

Ich habs bei der HTML Variante mal versucht so zu machen:

Code: Alles auswählen

<script type="text/javascript">

var a = 0;
hintergrund = new Array();
hintergrund='http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_1.jpg';
hintergrund='http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_2.jpg';
hintergrund='http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_3.jpg';
hintergrund='http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_4.jpg';
hintergrund='http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_5.jpg';
hintergrund='http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_6.jpg';
hintergrund='http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_7.jpg';
hintergrund='http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_8.jpg';
hintergrund='http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_9.jpg';
hintergrund='http://localhost/phpbb3/ext/chris1278/bgchange/img/DK_Image_10.jpg';
var x = Math.floor(Math.random() * a);
document.write('<body style="background:url('+ hintergrund[x] +') no-repeat center center fixedx;">')
</script>
Leider werden die Bilder eben so nicht in den Document.write übergeben.
69bruno
Mitglied
Beiträge: 444
Registriert: 05.06.2020 08:21

Re: Random Hintergrundbilder

Beitrag von 69bruno »

Dein JS-script diente dazu, Zeilenweise per Code ein Array zu befüllen.
Die Zeile (für a = 0):

Code: Alles auswählen

hintergrund[a]="http://localhost/phpbb3/ext/chris1278/bgchange/img/bild1.jpg"; a++;
erzeugt diesen Eintrag im Array:
und setzt a dann auf "1".

So werden Arrays per Codezeilen gefüllt.

Über das PHP-Script bekommen wir aber schon alle Zeilen als Array.
Wir haben dann schon:
Wieso soll man die jetzt als einzelne Zeilen wieder einfügen ????
Dazu kommt, dass Du deine Definition des Arrays in JS jedesmal anpassen müsstest, wenn sich die Anzahl der Images ändert. Das ist Unsinn, wenn wir über das php-Script einfach alle Bilder laden und daraus zufällig eines auswählen.

Ich werde die Tage mal meinen bisherigen Weg weiterverfolgen und über die PHP-Script-Funktion erst mal ein Bild je Seitenaufruf zufällig auswählen.
Wenn das läuft, kannst Du es ausprobieren und sagst mir, welche zusätzlichen Funktionen Du dann genau haben möchtest, dann versuche ich die einzubauen. Aber ich werde das Script nicht so anpassen können, wie Du dir das vorstellst. Denn in einen bestehenden Array kann ich keinen Platzhalter für den Index eines neuen Arrays einbauen (damit ist [a] gemeint).
Forum: cruiser-lounge.de
PHPBB-Version: 3.3.11 / Debian-Linux 10 / PHP-Version: 8.1
Antworten

Zurück zu „Extension Bastelstube“