Die Verwendung von Grafiken

In diesem Beitrag geht es um die Verwendung von Grafiken. In den Template-Dateien wird das jQuery-Plugin easybox eingebunden. Hier ist zu klären, wie man es nutzen kann.

Wichtig

Ich habe die ursprünglich von einem CDN abgerufenen Dateien

  • jquery.fancybox.pack.js
  • jquery.fancybox.css

direkt im Templateverzeichnis gespeichert. In diesem Zusammenhang ist es wichtig, dass man auch die Dateien

  • fancybox_overlay.png
  • fancybox_sprite.png

im CSS-Verzeichnis des Templates speichert

Einbindung

Die einfache Einbindung eines Bildes mit dem MarkDownsyntax

![Murmeltier]( /assets/img/4920-pyrenaeen-murmeltier.jpg "Murmeltier in den Pyrenäen")

ergibt einfach nur ein Bild

Murmeltier

Zunächst probiere ich es einfach mal mit direktem HTML-Code

<img class="fancybox" src="/assets/img/4920-pyrenaeen-murmeltier.jpg" alt="Murmeltier" />

Das Bild lässt sich zwar anklicken und wird auch vergrößert, aber es verschwindet aus der normalen Ansicht der Seite.

Murmeltier

Auf der Fancybox-Webseite http://fancybox.net/howto wird der folgende Code angegeben:

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

Diesen Code habe ich jetzt so modifiziert:

<a id="single_image" href="/assets/img/4920-pyrenaeen-murmeltier.jpg"><img src="/assets/img/4920-pyrenaeen-murmeltier.jpg" alt=""/></a>

Nun wird automatisch class="fancybox" hinzugefügt.

Das klappt auch mit einem Textlink Bild ansehen in dieser Form:

<a class="fancybox" href="/assets/img/4920-pyrenaeen-murmeltier.jpg">Bild ansehen</a>

Nun noch einmal ein Versuch mit dem folgenden Markdown-Code

[![Alternativer Text Murmeltier]( /assets/img/4920-pyrenaeen-murmeltier.jpg "Optionaler Titel Murmeltier")](/assets/img/4920-pyrenaeen-murmeltier.jpg "Title Murmeltier")

Alternativer Text Murmeltier

Überprüfung in der responsiven Ansicht

Die Bilder werden auch in der responsiven Ansicht korrekt angezeigt, einzige Ausnahme das Bild, das mit mit Code

<img class="fancybox" src="/assets/img/4920-pyrenaeen-murmeltier.jpg" alt="Murmeltier" />

Hier wird das Bild in der responsiven Ansicht verzerrt angezeigt.

Tags dieses Beitrags: bpgs grafiken assets