Öffnen in Colorbox?

[tblumrich]

Hallo! Ich hab nichts dazu gefunden, aber ist es so gedacht, das sich angeklickte POIs in der Colorbox öffnen (JS, CSS nutzen ist angehakt)? Aufgrund der angegebenen Quelle dachte ich das wird so wie bei https://codyhouse.co/gem/points-of-interest/ und die Öffnungen erfolgen in einem eigenen Modal. Ich habe dabei das Problem, das der eingestellte Text (nur Text als Textelement) viel breiter als der Viewport wird und ich nirgends (scheinbar) Einfluss nehmen kann (ausser CSS natürlich) Alternativ eingestellte Lightboxen (z.b. Glightbox) werden garnicht verarbeitet.

Muss ich noch irgendwo etwas einstellen? Ist ein aktuelles Contao 4.13 unter PHP 8.0.26 und die Extension ist 2.2.1

Danke vorab, Thomas :)

[bytehead]

Die POIs müssten sich eigentlich schon in der Colorbox öffnen lassen (sofern kein Link hinterlegt) - das sagt jedenfalls der Code.

https://github.com/1up-lab/contao-points-of-interest/blob/f7e0a89d0fc5279f97fe0e7ee9f58f120b4adf9f/src/Resources/public/js/poi.js#L18-L21

Hast du einen Link zur Seite mit dem Problem? Oder wie sieht der generierte Sourcecode der POIs aus?

[tblumrich]

Danke für die Rückmeldung. Ja, die Colorbox öffnet sich - inzwischen durch CSS auch erträglich vom Design.

Das heißt die Extension funktioniert ausschließlich mit der Colorbox? Wenn ich eine alternative Extension js oder j (z.B. https://packagist.org/packages/inspiredminds/contao-glightbox) welche die Colorbox ersetzen soll z.B. für Galerien usw. installiere funktioniert die Öffnung der POIs nicht.

Des weiteren hatte ich eigentlich erwartet, das die Erweiterung eine eigene Modalfunktionalität mitbringt, wie hier: https://codyhouse.co/demo/points-of-interest/index.html Ist ja etwas eleganter, da sich das Modal direkt am POI öffnet. Die Colorbox öffnet das ja immer einfach über der POI Grafik als mittiges Overlay und verdeckt dann in der Regel die POIs. Beispiel

Müsste man sich wohl selbst programmieren bzw. programmieren lassen?

[bytehead]

Es ist mir unmöglich, die Extension mit allem möglichen an sonstigen Extensions kompatibel zu machen. Insofern steht dir offen, das CSS und JS auf deinen Anwendungsbereich zuzuschneiden und auf die entsprechend eingesetzten Libraries anzupassen (das HTML-Markup lässt sich über die Templates anpassen).

[tblumrich]

Hallo nochmal. Danke, das verstehe ich natürlich. Ich habs jetzt auch für mich gelöst... indem ich das JS von codyhous-poi genommen habe und im Template Link und Modal so angepasst habe, das die Colorbox garnicht angesprochen wird. Dazu CSS und gut. Ich weiß nicht ob das so okay (dein JS wird ja trotzdem geladen) ist, aber vielleicht hilft jemandem das angepasste Template:

<div class="poi-container row">
    <div class="poi-wrapper">
        <?php if ($this->src): ?>
            <img src="<?= $this->src ?>" />
            <ul>
                <?php foreach($this->pointOfInterest as $poi): ?>
                    <li class="single-point" style="top: <?= $poi['position']['pY'] ?>%; left: <?= $poi['position']['pX'] ?>%;">
                        <a <?php if (false === (bool) $poi['addLink']): ?>class="img-replace poi" href="javascript:;"<?php else: ?>href="<?= $poi['url'] ?>" class="poilink" title="<?=$poi['url'] ?>" target="_blank"<?php endif; ?>>More</a>
                        <?php if (false === (bool) $poi['addLink']): ?>
                                <div class="more-info">
                                <?= implode('', $poi['content']) ?>
                                </div>
                        <?php endif; ?>
                    </li>
                <?php endforeach; ?>
            </ul>
        <?php endif; ?>
    </div>
</div>

Was ich mich dabei allerdings frage, wozu die Infos in deinem Original überhaupt in die Colorbox geladen werden? Die POI Inhalte befinden sich ja eh schon im Markup und man kann sie so doch direkt ein und ausblenden via CSS, eben so wie es beim codyhouse-script passiert. So werden die Infos auch schön an dem jeweiligen POI geöffnet. Oder gibts da irgendeinen Vorteil mit der Colorbox, den ich nicht sehe?

[lennier83]

Da die colorbox zu contao gehört, is es natürlich logisch das mit Contao onBoard zu verknüpfen denke ich. Also alles out-of-box zu machen. Tatsächlich ist die Erweiterung mächtiger als man denken könnte mit wenig Anpassungen. Ob Ajax inhalte oder mit https://popper.js.org/ .... alles machbar :-) Empfehle popper damit man die tooltip-popups wie in der Demo nicht manuell anpassen muss wie sie fließen. Einfach poi mit dem script ergänzen und Redakteure freuen sich.

[bytehead]

Die Extension könnte auch zwei Varianten anbieten - je nach Geschmack und Menge des Contents - Colourbox oder Popper.js. :)