Lösung eines Programmierproblems

[botto]

Die Bildergalerie funktioniert! Die Programmierung des ersten Bildes sieht folgendermaßen aus:

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

Das Problem: Wenn das Thumb-Bild angeklickt wird, erscheint die vergrößerte Red-Version. Das soll auch so sein. Nun besteht der Wunsch, den dunklen Hintergrund dieser Seite aufzuhellen. Nur, niemand weiß, wo /wie die Änderung vorzunehmen ist. Mit welchem Programm im Hintergrund wird diese Seite mit der vergrößerten Darstellung des angeklickten Bildes vorgenommen? (Ich arbeite mit dem Editor "MS Expression Web 4") Kann jemand einen Hinweis geben? Mit besten Grüßen Botto

Edit Rolf B: ~~~ eingesetzt für HTML Formatierung

[beatovich]

hallo

Die Bildergalerie funktioniert! Die Programmierung des ersten Bildes sieht folgendermaßen aus:

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

Das Problem: Wenn das Thumb-Bild angeklickt wird, erscheint die vergrößerte Red-Version. Das soll auch so sein. Nun besteht der Wunsch, den dunklen Hintergrund dieser Seite aufzuhellen. Nur, niemand weiß, wo /wie die Änderung vorzunehmen ist. Mit welchem Programm im Hintergrund wird diese Seite mit der vergrößerten Darstellung des angeklickten Bildes vorgenommen? (Ich arbeite mit dem Editor "MS Expression Web 4") Kann jemand einen Hinweis geben? Mit besten Grüßen Botto

hi

Die Funktion Grafik anzeigen (welche dein Linkeffektiv aufruft) führt dazu, dass (z.B. in Firefox) das Bild in einen Browser-Context eingebunden wird, den man untersuchen kann (Element untersuchen), und der sich als HTML herausstellt, NUR dass in dem Fall das Html von Browser-eigenen Ressourcen besteht, die man bestenfalls mittels einem User-CSS beeinflussen kann.

Wenn du auch die Umgebung des Bildes als CSS Autor beinflussen willst, musst du schon eine HTML-Seite verlinken, nicht bloss eine Grafik.

Nebenbei, erforsche das <figure> Element. Ich denke, dein Code lässt sich verbessern. Und alt Attribute sollten in deinem Fall nicht leer bleiben, sondern den Inhalt beschreiben.

[botto]

Hallo beatovich! Vielen Dank für die prompte Antwort. Leider habe ich nicht die von Dir vorausgesetzten vertieften Programmierkenntnisse und kann Deine Empfehlung nicht realisieren. Deshalb noch ein paar Infos zu unserer Homepage: Unsere Homepage hat prinzipiell folgende Gliederung:

396-neu	->	styles.css
        ->	galerie3.html
        ->	….
        ->	img	->	red      -> red-Bilder
                ->  thumbs   -> thumb-Bilder

Unbekannt ist uns, was gemeint ist mit: „in dem Fall das Html von Browser-eigenen Ressourcen besteht, die man mittels einem User-CSS beeinflussen kann.“ Den Hintergrund des verlinkten größeren Bildes (a href="img/red/C05A0176-red.jpg“) wollen wir verändern. Dazu sollen wir eine HTML-Seite verlinken, aber wie? Kannst Du uns den Hinweis in Deiner Antwortmail noch ein wenig verdeutlichen? Den Tipps am Ende Deiner Mail gehe ich getrennt nach. Vielen Dank aber schon mal. Gruß Botto

[beatovich]

hallo

Dazu sollen wir eine HTML-Seite verlinken, aber wie? Kannst Du uns den Hinweis in Deiner Antwortmail noch ein wenig verdeutlichen? Den Tipps am Ende Deiner Mail gehe ich getrennt nach. Vielen Dank aber schon mal. Gruß Botto

Statt Bild X zu verlinken, schreibt ihr eine HTML Seite X.html, welche Bild X als Ressource enthält. Ihr könnt dann alles an dieser Seite so gestalten, wie ihr es wollt.

Unter anderem kann eine solche Seite dann auch Text (also Bildlegenden etc) enthalten.

Zum figure Element ein Anwendungsbeispiel:

<figure>
  <img src="some/path/image.jpg" alt="Kurzbeschreibung des Bildinhalts">
  <figcaption>
    <p>ein Absatz</p>
    <p>Noch mehr Text</p>
  </figcaption>
</figure>

[Rolf B]

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

[beatovich]

hallo

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:

Oder ganz einfach mein showtime.js aufboren.

https://beat-stoecklin.ch/pub/showtime.html

Alles was es braucht, ist, dass die src von den Vorschaubildern auf die Hochauflösenden umgeschrieben wird.

Vielleicht werde ich diese Option demnächst noch implementieren.

Zu bedenken ist allerdings, dass solcherart immer mehr Browserspeicher benutzt wird, was aber immer noch besser ist, als den ganzen Haufen sofort zu laden.

[botto]

Zuerst: Ganz herzlichen Dank an Beatovich und Rolf für ihre Mühewaltung! Bisher war ich mit dieser Problematik und js noch nicht in Berührung. Da unsere Frage nur ein ganz enges Problem berührt, dessen Lösung aber doch viel Programmarbeit und Zeit erfordert, haben wir uns zu einem Verzicht durchgerungen - zumindest vorläufig. Vielleicht setze ich mich später noch einmal mit dem Problem auseinander. Dann melde ich mich ggfls. auch wieder. Soweit nochmals vielen Dank für die Darstellung des Problemumfangs. Nichts für ungut! Euer Botto