Zufallsbilder als Hintergrund

**markocupic** · 03.06.2011, 16:24

HAllo gesti

mit css und javascript (random) kannst du das machen.

Gruss Marko

**gesti** · 03.06.2011, 16:32

Hallo Marko,
also etwas so, wie ich es bei der derzeitigen Version auf der Eingangsseite mit dem Hauptbild gemacht habe?! [Bin leider ein absoluter JavaScript-Laie]

Code:

<script type="text/javascript" language="JavaScript">
<!--

var Anzahl = 11;     // Anzahl der Bilder

var ZufallJetzt = new Date()
var ZufallsZahl = ZufallJetzt.getSeconds() % (Anzahl);

// Zuweisungen abhängig von der Zufallszahl

if (ZufallsZahl==0) {
TextFarbe = "#C04000";
GrafikUrl = "img/index/1.jpg";
UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
}

if (ZufallsZahl==1) {
TextFarbe="#DF0000";
GrafikUrl = "img/index/2.jpg";
UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
}

if (ZufallsZahl==2) {
TextFarbe="#DF0000";
GrafikUrl = "img/index/3.jpg";
UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
}

if (ZufallsZahl==3) {
TextFarbe="#DF0000";
GrafikUrl = "img/index/4.jpg";
UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
}

if (ZufallsZahl==4) {
TextFarbe="#DF0000";
GrafikUrl = "img/index/5.jpg";
UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
}

if (ZufallsZahl==5) {
TextFarbe="#DF0000";
GrafikUrl = "img/index/6.jpg";
UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
}

if (ZufallsZahl==6) {
TextFarbe="#DF0000";
GrafikUrl = "img/index/7.jpg";
UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
}

if (ZufallsZahl==7) {
TextFarbe="#DF0000";
GrafikUrl = "img/index/9.jpg";
UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
}


if (ZufallsZahl==8) {
TextFarbe="#DF0000";
GrafikUrl = "img/index/11.jpg";
UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
}

if (ZufallsZahl==9) {
TextFarbe="#DF0000";
GrafikUrl = "img/index/14.jpg";
UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
}

if (ZufallsZahl==10) {
TextFarbe="#DF0000";
GrafikUrl = "img/index/15.jpg";
UnterTitel="Schloss und Riegel, Fotoauftrag der BFSM 2010"
}


function Zufallsbild01() {
document.write("<img src='" + GrafikUrl+ "' border='0' alt='Zufallsbild'><br>")
document.write("<font color='" + TextFarbe +"'>" + UnterTitel + "</font><br>")
return
}

// -->

</script>

Und wie riefe ich das im CSS auf? In HTML ging es mit

Code:

<script type="text/javascript" language="JavaScript">
<!--
Zufallsbild01();
//-->
</script>

**markocupic** · 03.06.2011, 22:52

Hallo gesti
Du kannst es so lösen. Mootools sollte aktiviert sein!
Hier das js:

Code:

<script type="text/javascript">


window.addEvent('domready', function() {
 	//random
	var number=Math.floor(Math.random()*10) 
	if (number==0) {
		number=1;
	}

	var color=new Array();
	color[1]="#bbbbbb";
	color[2]="#000000";
	color[3]="#C04000";
	//usw.

	var title=new Array();
	title[1]="Titel 1";
	title[2]="Titel 2";
	title[3]="Titel 3";
	//usw.

	var pathToImage = 'img/index/' + number + '.jpg';
	$('idHeaderDiv').setStyle('background-image', 'url('+ pathToImage +')');
	//Titelfarbe
	$('idTitle').setStyle('color', color[number]);
	//Inhalt des Titels
	$('idTitle').set('text', title[number]);

});

</script>

Auszug aus dem Template

Code:

<div id="idHeaderDiv">
<h1 id="idTitle">Das ist der Titel</h1>
</div>

Gruss Marko

**gesti** · 04.06.2011, 12:45

Herzlichen Dank, Marco, das hat mich weiter gebracht!

**minstyle** · 09.09.2011, 13:03

Ein zufälliges Hintergrundbild kann natürlich auch mit Contao, mit dem Modul "Zufallsbild" realisiert werden.

Möchte man aus irgendweinem Grund darauf verzichten, dann kann man ein zufälliges Hintergrundbild auch mithilfe von PHP realisieren.

So geht man dabei vor:

1. Ordner mit den Zufallsbildern erstellen, z. B. unter /tl_files/img/bg/ und eurer Bilder hier ablegen.
2. PHP-Datei, z. B. mit dem Namen rotate.php erstellen und ebenfalls in dem Ordner /tl_files/img/bg/ ablegen.

PHP-Code:

<?php


/* ------------------------- Konfiguration -----------------------

Verzeichnispfad der Hintergrundbilder.
Befindet sich die rotate.php im gleichen Ordner wie die Bilder, dann $folder = '.'

*/

    $folder = '.'; 

/* Welche Dateitypen sollen unterstützt werden? */

    $extList = array();
    $extList['gif'] = 'image/gif';
    $extList['jpg'] = 'image/jpeg';
    $extList['jpeg'] = 'image/jpeg';
    $extList['png'] = 'image/png';
    
// --------------------- Ende Konfiguration -----------------------

$img = null;

if (substr($folder,-1) != '/') {
    $folder = $folder.'/';
}

if (isset($_GET['img'])) {
    $imageInfo = pathinfo($_GET['img']);
    if (
        isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
        $img = $folder.$imageInfo['basename'];
    }
} else {
    $fileList = array();
    $handle = opendir($folder);
    while ( false !== ( $file = readdir($handle) ) ) {
        $file_info = pathinfo($file);
        if (
            isset( $extList[ strtolower( $file_info['extension'] ) ] )
        ) {
            $fileList[] = $file;
        }
    }
    closedir($handle);

    if (count($fileList) > 0) {
        $imageNumber = time() % count($fileList);
        $img = $folder.$fileList[$imageNumber];
    }
}

if ($img!=null) {
    $imageInfo = pathinfo($img);
    $contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
    header ($contentType);
    readfile($img);
} else {
    if ( function_exists('imagecreate') ) {
        header ("Content-type: image/png");
        $im = @imagecreate (100, 100)
            or die ("Cannot initialize new GD image stream");
        $background_color = imagecolorallocate ($im, 255, 255, 255);
        $text_color = imagecolorallocate ($im, 0,0,0);
        imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
        imagepng ($im);
        imagedestroy($im);
    }
}

?>

3. In eurer CSS-Datei, welche z. B. unter /tl_files/css/style.css zu finden ist, könnte ihr nun das Zufallsbild wie folgt ansprechen:

HTML-Code:

body {
background: #FFF url(../img/bg/rotate.php) 0 0 no-repeat;
}

4. Fertig. Viel Spaß damit!

**svr** · 24.09.2011, 00:24

Hallo minstyle

Vielen Dank für Deinen Beitrag, leider funktioniert dies bei mir nicht. Habe es so eingebunden und auch das PHP um die Bildextensions erweitert .JPG, etc.

Siehst Du allenfalls, woran dies liegt, dass meine Bilder im Hintergrund nicht angezeigt werden ?

Vielen Dank und Grüsse
Michi

**svr** · 24.09.2011, 22:58

Hallo zusammen

Leider bringe ich es nicht zum Laufen. Ich habe es genau so aufgebaut wie im obigen Beitrag von minstyle beschrieben. Habe sogar die selbe Ordnerstruktur genommen, doch es klappt nicht. Der Hintergrund wird nicht angezeigt:

https://www.loeffler-jost.ch/neu

Siehe auch beiligende Attachments.

Wäre sehr dankbar wenn mir hier jemand helfen könnte, denn ich würde dieses Feature sehr gerne einbauen.

Danke und Grüsse
Michi

Angehängte Dateien

**Xamanoth** · 25.09.2011, 01:21

Wenn ich die rotate.php direkt aufrufe, stürzt mir der Firefox ab, Chrome und Opera laden zwar eine Seite, allerdings mit sehr sehr sehr vielen unlesbaren Zeichen (wird wohl das Bild sein), im HTML-Code find ich aber folgenden Hinweis:

: Cannot modify header information - headers already sent by (output started at E:\www\vhosts\loeffler-jost.ch\httpdocs\neu\tl_files\img\bg\rotate.php:1) in E:\www\vhosts\loeffler-jost.ch\httpdocs\neu\tl_files\img\bg\rotate.php on line 59

Evtl. liegts daran. Schau doch mal durch ob in deiner PHP-Datei noch irgendwo ein unsichtbares Zeichen vor dem Start-Tag hängt oder Ähnliches.

Ist aber eben nur eine Vermutung, obs wirklich daran liegt kann ich dir nicht sagen.

**minstyle** · 25.09.2011, 14:11

Zitat von svr Beitrag anzeigen

Hallo minstyle

Vielen Dank für Deinen Beitrag, leider funktioniert dies bei mir nicht. Habe es so eingebunden und auch das PHP um die Bildextensions erweitert .JPG, etc.

Siehst Du allenfalls, woran dies liegt, dass meine Bilder im Hintergrund nicht angezeigt werden ?

Xamanoths Fehler kann ich auch nachvollziehen.

Du brauchst die PHP-Datei auch nicht erweitern:

RICHTIG:

PHP-Code:

/* Welche Dateitypen sollen unterstützt werden? */ 

    $extList = array(); 
    $extList['gif'] = 'image/gif'; 
    $extList['jpg'] = 'image/jpeg'; 
    $extList['jpeg'] = 'image/jpeg'; 
    $extList['png'] = 'image/png';

AKTUELL (Deine Modifikation):

PHP-Code:

/* Welche Dateitypen sollen unterstützt werden? */ 

    $extList = array(); 
    $extList['gif'] = 'image/gif'; 
    $extList['jpg'] = 'image/jpg'; 
    $extList['jpeg'] = 'image/jpeg'; 
    $extList['png'] = 'image/png';

Übernimm meinen PHP-Code 1:1 und es sollte dann eigentlich funktionieren, vorallem da du derzeit auch png-Dateien verwenden möchtest.

**svr** · 25.09.2011, 14:50

Hallo minstyle

Habe nun Deinen Code 1:1 übernommen und nochmals raufgeladen. Der Fehler scheint immer noch vorhanden zu sein:

http://www.loeffler-jost.ch/neu/tl_files/img/bg/rotate.php

Woran kann dies den noch liegen?

Anbei auch noch mein php doku.

Vielen Dank und Grüsse
michi

Angehängte Dateien

Rotate.zip (895 Bytes, 6x aufgerufen)

**svr** · 25.09.2011, 20:51

Oder muss ich dies zusätzlich noch im Seitenlayout irgendwo im Header einbauen ? Ich frage dies nur wegen der Fehlermeldung beim Direktaufruf, da dort was mit der Zeile 59 im php steht.

Wenn ja, wie und wo muss ich dies zusätzlich noch einbinden ?

Danke und Grüsse
Michi

**svr** · 26.09.2011, 00:30

Hallo zusammen

Wollte nur informieren, dass es unterdessen klappt. Es war wohl was mit den Bildern. Versuche dies nun noch als GIF laufen zu lassen, da die Bilder doch recht lange brauchen bis sie geladen sind, da sie doch recht grosse KB haben.

Grüsse
Michi

**bastlwastl** · 17.09.2012, 16:31

Zitat von minstyle Beitrag anzeigen

Ein zufälliges Hintergrundbild kann natürlich auch mit Contao, mit dem Modul "Zufallsbild" realisiert werden.

Hallo,
das mit der rotate.php funktioniert wunderbar. Mich würde nur mal interessieren wie man das selbe Ergebniss mit dem Modul "Zufallsbild" hinbekommt.
Mit dem Modul kann ich ein Zufallsbild ausgeben aber was muss ich machen damit das Bild als Hintergrundgrafik für z.B. den Header ausgegeben wird?

Gruß
Bastian

**moka** · 18.09.2012, 16:26

Bei mir funktioniert's nur wenn ich rotate.php aufrufe

Irgendwie scheint es etwas mit dem Header in sich zu haben. Obwohl ich den Cache ausgeschaltet habe, ruft der Browser (Safari, Firefox) für jede Session 1 Bild und dann bleibt es für alle Seiten das gleiche. Wenn ich den Browser schliesse und dann wieder öffne: gleiche Situation, aber mit einem anderen Bild ...

Ich möchte jedoch, dass das Bild bei jedem Aufruf neu berechnet wird.

Zufallsbilder als Hintergrund

Zufallsbilder als Hintergrund

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar