Problem mit Selektor/Bildergalerie mit Colorbox

[webeditor]

Hallo,

ich stecke gerade fest: Ich verwende Hugo und im Template wird der Seiteninhalt so ausgegeben (Auszug):

<h1>{{ .Title }}</h1>
<div class="bildershow">
    {{ .Content }}
</div>

<div class="nav-link">
<p><a href="/"> <<< zum Inhaltsverzeichnis </a></p>
</div>

Für die Bildergalerien, im Inhaltstext eingebettet, möchte ich Colorbox verwenden. Im Head wird - neben den Verweisen auf die erforderlichen Scriptdateien und CSS - folgendes definiert:

<script type="text/javascript">
<!-- colorbox -->
    jQuery(document).ready(function () {
        $("--hier muß ein Selektor hin--").colorbox({rel:'bildershow', maxwidth:"95%", maxheight:"95%"});
    });
<!-- /colorbox -->
</script>

Nun möchte ich, daß Text-Links im {{ .Content }} als normale Links behandelt werden, wenn der Link aber ein Bild (Vorschaubild) umschließt, dann soll die Colorbox das große Bild anzeigen.

Weil der Inhalt in Markdown geschrieben ist, kann ich dort eher nicht mit HTML-Attributen arbeiten.

Ich scheitere daran, einen Selektor einzutragen (im JS-Schnipsel oben), der

• nur Links innerhalb des "bildershow"-divs erkennt
• innerhalb dieses divs nur die Bilder umschließenden Links akzeptiert
• alle anderen Links einfach normale Links sein läßt.

Geht das überhaupt mit den genannten Rahmenbedingungen?

[Matthias Apsel]

Hallo webeditor,

• nur Links innerhalb des "bildershow"-divs erkennt
• innerhalb dieses divs nur die Bilder umschließenden Links akzeptiert
• alle anderen Links einfach normale Links sein läßt.

Geht das überhaupt mit den genannten Rahmenbedingungen?

Nein. Du möchtest Elemente entstprechend ihrer Kinder selektieren. Das kann CSS nicht. Einfachste Lösung wäre, den Links mit Bildern eine Klasse zu geben.

.bildershow a vs. .bildershow a.graphic

Falls du HTML5 schreibst, was ich empfehlen würde, kann das type-Attribut des script-Elements weg.

Bis demnächst
Matthias

[webeditor]

Hallo Matthias,

Falls du HTML5 schreibst, was ich empfehlen würde, kann das type-Attribut des script-Elements weg.

Du meinst in <script type="text/javascript">? Danke für den Hinweis.

Einfachste Lösung wäre, den Links mit Bildern eine Klasse zu geben.

Bis .bildershow a bin ich auch gekommen, dann war Ende. So, wie Du mir das erklärt hast, läuft es wohl drauf raus, innerhalb des Markdown-Contents doch HTML für die Bilder einbauen zu müssen wegen der Zuweisung der Klasse - zwar unschön, aber machbar.

Du möchtest Elemente entstprechend ihrer Kinder selektieren. Das kann CSS nicht.

Ich hatte gehofft, evtl. mit Kombinatoren was machen zu können ...

Grüße -Bernhard-

[Matthias Apsel]

Hallo webeditor,

Du meinst in <script type="text/javascript">?

Ja.

Einfachste Lösung wäre, den Links mit Bildern eine Klasse zu geben.

Bis .bildershow a bin ich auch gekommen, dann war Ende. So, wie Du mir das erklärt hast, läuft es wohl drauf raus, innerhalb des Markdown-Contents doch HTML für die Bilder einbauen zu müssen wegen der Zuweisung der Klasse - zwar unschön, aber machbar.

Nicht für die Bilder, für die Links.

Du möchtest Elemente entstprechend ihrer Kinder selektieren. Das kann CSS nicht.

Ich hatte gehofft, evtl. mit Kombinatoren was machen zu können ...

Demnächst vielleicht in Ihrem Browser:
a:contains(img) oder a:has(img)

Aber da du ohnehin JS am Start hast und auch JQuery: :has

Beachte:

„Because :has() is a jQuery extension and not part of the CSS specification, queries using :has() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $( "your-pure-css-selector" ).has( selector/DOMElement ) instead.“

Bis demnächst
Matthias