Müsste dann im Browser auftauchen.. oben rechts der käfer.. einmal draufklicken -> (unten links) konsole
php Fotogalerie
-
-
hab ich
-
Bitte tu mal kleine Bilder hochladen und keine So riesen Großen, die sind viel zu groß fürs Internet!!!
Müsste dann so aussehen (wenn die Konsole offen ist) nur halt nicht so viele
-
jo sofort mache ich
ok ist
du hast dann unten wo html un css steht auf konsole gedrückt
also wie du die bilder so aufgelistet das habe ich nicht -
Müsstest du aber haben.. mach doch bitte einen screenshot...
-
das dauert immer so lange eh was geschrieben kommt musst du auch solange warten weil ich schreibe immer sofort an was kann das liegen
-
Nein muss ich nicht, aber ich habe auchnicht nur für dich zeit.. ich arbeite ja selber..
Aber probier mal das hier :HTML
Alles anzeigen<?php //ALLE Fehler anzeigen lassen - error_reporting(0); für keine Fehler anzeigen lassen error_reporting(E_ALL); // Wir definieren den Pfad zu den bildern, von dieser Datei ausgehend $pfad = "uploads/"; //dann lesen wir alle dateinamen aus dem ordner aus $alleBilder = scandir($pfad); $i = 0; //für jeden wert im array (array ist eine Liste von strings[ein string ist eine Zeichenkette]) foreach ($alleBilder as $schlüssel => $wert) { $schlüssel = $i;// den schlüssel ERSETZEN wir hier ... if (strlen($wert) > 2) {//wenn $wert länger als 2 ist $echteBilder[$schlüssel] = $wert; //Ein neues Array erstellen $i++;//i +1 zählen } } ?> <!doctype html> <html> <head> <script> //Willkommen in JavaScript //Einer Variable sagen das sie ein Array ist var bilder = new Array(); //Dieses Array jetztt mit dem aus PHP füllen <?php foreach($echteBilder as $key => $value){ echo('bilder['. $key .'] = \''. $value .'\';'); } echo "\nvar pfad ='".$pfad."';"; ?> //Weiter im JS //Das Array zur überprüfung in die Konsole schreiben console.log(bilder); //Nach dem vollständigen Laden der Seite window.onload = function(){ //console.log("loadet"); //Sich alle Elemente mit dem tag body holen var body = document.getElementsByTagName('body'); //Und dem 1. (0) einen hintergrund geben... die url setzt sich aus pfad und dem 1. bild im array zusammen body[0].style.background = 'url("'+pfad+bilder[0]+'") repeat fixed 0 0 / 100% auto #1E1E1E'; } </script> <style> *{ margin: 0; padding: 0; } body{ color: #FFF; background-color: rgba(50,50,50, 1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px; } img{ border: 7px solid white; height: 100px; margin-right: 20px; margin-bottom: 20px; vertical-align: top; box-shadow: 5px 5px 10px black; } </style> </head> <body> <?php //Für jeden Wert im Array echteBilder foreach ($echteBilder as $schlüssel => $wert) { //Ein Bild ausgeben echo "<img src='".$pfad.$wert."'>"; } ?> </body> </html>
-
sorry das war ja auch keine kritik an dich sondern nur eine frage weil du vorhin geschrieben hast das ich gleich immer antworten soll.
jo das geht. da habe ich unten die bilder stehen. warum war oder ist das bedeutend -
Oh, das hast du falsch verstanden.. das war im Sinne von - wenn ich eine antwort geschriben habe sollst du auch eine neue schreiben und die alte net editieren..
Okay gut
Jetzt weist du das die Bilder als Array in deinem Javascript ankommen -
ah ok das ist praktisch für euch programierer eine bestätigung das alles korrekt ist
wieso ist da jetzt javascript wichtig oder mit im spiel -
Wenns weiter gehen kann...
WIr brauchen also jetzt eine Lösung, die dafür sorgt, dass der Hintergrund nach so und so viel sec geändert wird, die auchnoch im Array Arbeitet.
-> Dafür wäre es Toll wenn du noch 4 weitere halbwegs kleine Bilder hochladen könntest -
ok ich lade noch 4 weitere bilder hoch
-
Versuche du mal eine function zu schreiben, die den Hintergrund wechselt..
JavaScript
Alles anzeigen/* eine neue funct. definieren.. An diese Funct. wird der parameter newBackgImg übergeben und kann dann dort verwendet werden * Beim Aufrufen der function soll der Hintergrund von elememnt geändert werden */ function changeBG(newBackgImg, element){ alert(newBackgImg); // etwas mit element machen: //element.macheEtwas = ; console.log("background Changed"); } //Die Funktion aufrufen und den Parameter übergeben changeBG("pfad/welle.jpg",body[0]);
-
-
Nicht ganz... -
Hier nochmal der komplette CodeHTML
Alles anzeigen<?php //Element ID was den Hintergrund bekommt $cBG['objId'] = 'backGall'; // Zeit in Sec bis zum ändern $cBG['chgTime'] = 6; // Was noc zum Background style gehört $cBG['bgStyles'] = "repeat #1E1E1E"; // Wiederholung an/aus $cBG['repeat'] = true; // true/false // Wir definieren den Pfad zu den bildern, von dieser Datei ausgehend $cBG['path'] = "uploads/"; ?> <?php //ALLE Fehler anzeigen lassen - error_reporting(0); für keine Fehler anzeigen lassen error_reporting(E_ALL); //dann lesen wir alle dateinamen aus dem ordner aus $alleBilder = scandir($cBG['path']); $i = 0; //für jeden wert im array (array ist eine Liste von strings[ein string ist eine Zeichenkette]) foreach ($alleBilder as $schlüssel => $wert) { $schlüssel = $i;// den schlüssel ERSETZEN wir hier ... if (strlen($wert) > 4) {//wenn $wert länger als 4 ist $cBG['images'][$schlüssel] = $wert; //Ein neues Array erstellen $i++;//i +1 zählen } } ?> <!doctype html> <html> <head> <script> // DEFINITIONEN //Einer Variable sagen das sie ein Array ist var cBG = new Array(); cBG['images'] = new Array(); // BILDER ARRAY //Dieses Array jetztt mit dem aus PHP füllen <?php foreach($cBG['images'] as $key => $value){ echo "cBG['images']['". $key ."'] = '". $value ."';"; } ?> //Weiter im JS //Das Array zur überprüfung in die Konsole schreiben console.log(cBG['images']); //Nach dem vollständigen Laden der Seite window.onload = function(){ console.log("Seite geladen"); //Sich alle Elemente mit dem tag body holen var element = //CONFIGURATION <?php foreach ($cBG as $key => $value) { if ($key != "images") { echo "cBG['".$key."']='".$value."';"; }; } ?> cBG['element'] = document.getElementById(cBG['objId']); //START //Gleich fürs 1. Bild ausführen changeBG(cBG['images'][0]); //den auto changer starten autoChangeBG(); } // FUNKTIONEN // i ist 1 da 0 ja schon beim Laden verwendet wird var i = 1; function autoChangeBG(){ //Wenn i nicht höher als das array if (i <= cBG['images'].length) { console.log("Background-image is: "+cBG['images'][i]+" ("+i+")"); //nach x sec die funct cgBG aufrufen mit dem neuen i setTimeout("changeBG('"+cBG['images'][i]+"')", cBG['chgTime']*1000); //Wenn schleife nicht an ist UND i kleiner als das array lang ist if (!cBG['repeat'] && i < cBG['images'].length-1) { //Die funct. neu ausführen setTimeout("autoChangeBG()", cBG['chgTime']*1000); } //Wenn Schleife an ist if (cBG['repeat']) { //Die funct neu ausführen setTimeout("autoChangeBG()", cBG['chgTime']*1000); // Wenn das Array zu ende ist, von vorne anfangen if (i == cBG['images'].length-1) { i = -1; } } //i hochzählen i++; } } function changeBG(newBackgImg){ console.log("Hintergrund wird geändert"); // dem Element neues Hintergrundbild zuweisen cBG['element'].style.background = 'url("'+cBG['path']+newBackgImg+'")'+cBG['bgStyles']; } </script> <style> *{ margin: 0; padding: 0; } body{ color: #FFF; background-color: rgba(50,50,50, 1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px; } #backGall{ width: 800px; height: 600px; } </style> </head> <body> <article id="backGall"></article> </body> </html>
Jetzt mitmachen!
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!