Frage von Horizonttaenzer, 26

Bitte um HTML/Javascript-Hilfe: Dateinamen bei Gallery einblenden?

Hallo

Bei dieser Gallerie: http://html-tuts.com/html-photo-gallery-simple-javascript/ (ganz unten die Demo) würde ich gerne bei jedem Bild unter dem Bild den Dateinamen einblenden. Wie kriege ich das hin?

Frage 2: ich möchte, statt nur 5, ca. 300 Bilder einfügen. Muss ich das einzeln machen oder könnte ich das irgendwie auf einen Schlag machen, wenn die Bilder 1-300.JPG heissen?

Im Voraus vielen Dank!

Antwort
von G0lD3Nc0Ld, 14

Du könntest die ID darunter anzeigen und die Bilder kannst du in einer Schleife einlesen. Dabei musst du nur die Anzahl im Dokument festlegen.

Kommentar von Horizonttaenzer ,

Hallo und danke. Wie meinst du "die Bilder in der Schleife einlesen"? 

Kommentar von G0lD3Nc0Ld ,

wenn du ein Array voll bildern machst könntest du irgendwie while (idx < bilderanzahl) array[idx] = ("./" + idx + ".jpg") machen um das Array mit allen Bildern zu füllen

Antwort
von KimWebi, 10

DU könntest ein p tag unter dem großen Bild positionieren und dem eine Id verpassen wie z.B. "imgTitle" das mouseover attr muss dann noch einen anderen Inhalt bekommen, dieser sollte Vl. ungefär so aussehen:

"function(){getElementById('preview').src=getElementById('img1').src;

getElementById('imgTitle').innerHtml=getElementById('img1').alt}"

so würde man den Alternativtext für das Bild anzeigen den man vorher natürlich definieren muss!!

Das dynamische erzeugen von html ist in diesem fall recht umständlich ohne php aber leider auch mit

mfg kim

Kommentar von Horizonttaenzer ,

Hallo und vielen Dank, Kim! 

"Das dynamische erzeugen von html ist in diesem fall recht umständlich ohne php aber leider auch mit" Betrifft dies das einfügen der Bilder in die HTML-Datei, oder?? Sorry, bin nicht extrem fachkundig, deshalb frage ich. .. :-) 

Kommentar von KimWebi ,

Tut mir leid das ich das so sagen muss

aber du solltest dich vllt ein bisschen einlesen in html php javascript und ein wenig css damit du machen auf dem "level" machen kannst.

nutzt du einen webserver oder schreibst du alles in eine html datei?

Kommentar von Horizonttaenzer ,

ich habe index.html & die Bilder liegen in images/1.JPG, 2.JPG etc.... Alles auf meinem webspace per ftp upload

Kommentar von Horizonttaenzer ,

PS: Und ja, du hast schon recht. Ich wünschte ich könnte das (schon) alles.... Und eben, ich habe 300 Bilder und in de index.html schreibe ich es so (hoffe es wendet es nun nicht an): 

*Kleinerals* img onmouseover="preview.src=img18.src" name="img1" src="images/18.JPG" alt=""/ *Grösserals* 

Muss ich da manuell bis auf 300 durchnummerieren...?

Kommentar von KimWebi ,

uff pass mal auf:

<script type="text/javascript">

for(var a = 1;a<=300;a++){

      var img = document.createElement("img");

      img.src = "images/"+a".jpg";

      img.name = "img"+a;

      img.alt = "Fehler";

      img.addEventListener('mouseover', function(){getElementById('preview').src=getElementById('img1').src;
getElementById('imgTitle').innerHtml=getElementById('img1').name;});

document.getElementsByClassName("thumbnails")[0]

.append(img

);

}

</script>

so einmal ausprobieren, kann sein das du statt des pfades images/ den link zu dem Ordner das hin packen musst

mfg

Kommentar von Horizonttaenzer ,

WOOOOW vielen Dank schonmal!! Du kannst ja zaubern! :-) 

also .jpg habe ich mal durch .JPG ersetzt... images/ sollte ja aber eigentlich stimmen - oder nicht? Denn die Bilder sind ja in dem Ordner.. 

Jedoch funktioniert es bis jetzt leider noch nicht. 

Gehe ich richtig, dass ich das Script da hin packe wo ich normalerweise die lange Liste mit den Bildern 1-300 habe oder kommt es in den Head Bereich? Zweiteres probiere ich sicherheitshalber grad nochmals aus... 

Normalerweise hab ich die Liste 1-300 unterhalb dieses Codes: 

*body oncontextmenu="return false“*

*div class="gallery" align=„center"*

*div class=„thumbnails"*

Stern steht für die Eckklammer...

LG

Kommentar von KimWebi ,

script bitte in dem head

und einmal bitte mit link an stelle der Ordner Referenz versuchen javaskript ist client basiert(wird in deinem browser ausgeführt )

gibt es Fehlermeldungen in der js Konsole?

Kommentar von Horizonttaenzer ,

Diese Fehler unter dem Link/images/: https://s31.postimg.org/5p3u84ykb/Bildschirmfoto_2016_07_12_um_11_41_59.png

von der obersten Linie hat es mehrere. Auf der index.html keine Fehler, wenn ich es richtig sehe. 

Kommentar von Horizonttaenzer ,

Ah, doch, sorry, auf index.html habe ich noch "SyntaxError: Unexpected string ".JPG" 

Kommentar von KimWebi ,

jo mein Fehler, statt

img.src = "images/"+a".jpg";

muss das

img.src = "images/"+a+".jpg";

heißen

Kommentar von Horizonttaenzer ,

Also nur ein "Plus" dazu? Habe ich gemacht... Also entweder bin ich doof, oder es funktioniert noch immer nicht... Eventuell fehlt noch an einer anderen Stelle in "Plus"? 

Keine passende Antwort gefunden?

Fragen Sie die Community