Rolf B: Lösung eines Programmierproblems

Beitrag lesen

SELF-Forum

Lösung eines Programmierproblems

Rolf B
– Informationen zu den Bewertungsregeln

problematische Seite

Hallo beatovich,

das setzt allerdings eine von folgenden Maßnahmen voraus:

  • eine HTML Seite pro Galeriebild
  • eine serverseitige Programmierung, die die gewünschte HTML Seite erzeugt (z.B. mit PHP).
  • eine HTML Seite, die mit Parameter aufgerufen wird und in der ein JavaScript den src des Bildes aus der location ableitet.
  • ein JavaScript auf der Galerieseite, die das Bild nachlädt und in einem Overlay-Div anzeigt.

Angesichts der Selbsteinschätzung des OP, was die Programmierkenntnisse angeht, könnte es auf Lösung 1 hinauslaufen. VIEL Copy+Paste Arbeit.

Lösung 3 ist gar nicht so schwer. Ich bin ja eigentlich gegen Cargo Cult Programming, aber rudimentär könnte sie so aussehen:

Auf der Galerieseite:

<div class="box">
	<div class="gbild1"><a href="img/showImage.html?red/C05A0176-red.jpg" target="_blank">
      <img src="img/thumbs/C05A0176-thumb.jpg"  height="160" alt=""/></a>
  </div>
</div>

Die HTML-Datei showImage.html legt man in das img Verzeichnis. Man übergibt ihr hinter dem ? den Namen der anzuzeigen Datei; hier mit Ordnerangabe.

showImage.html enthält folgendes - und natürlich noch mehr, um ein vollständiges HTML Dokument daraus zu machen:

<body>
   <img id="theImage" src="" alt="">

   <script>
      var datei = window.location.search.substr(1);
      var img = document.getElementById("theImage");
      if (img) {
         img.src = datei;
         img.alt = "Anzeige der Bilddatei " + datei;
      }
   </script>
</body>

Das Script wird beim Seitenaufruf ausgeführt und kopiert den Parameter in das src-Attribut des img Elements. Getestet habe ich es nicht wirklich, nur die nötigen Basics in Chrome überprüft. Was der brennende Fuchs oder die Löwenbesichtigung draus machen, müssen andere gucken.

Das ist jetzt keine Edel-Lösung, aber immerhin gibt's dann ein alt-Attribut und man hat nun die Chance, mittels CSS für ein ordentliches Styling zu sorgen. Sicherlich muss noch was dazu um das Bild zu zentrieren oder so. Das ist aber keine Programmierung. Nur richtiger Einsatz von CSS und Flexbox.

Rolf

--
sumpsi - posui - clusi
Beitrag melden
–
Informationen zu den Bewertungsregeln