Link auf Gallerie in Lightbox setzen

[limeee]

Hallo,

ich versuche einen Link auf eine Gallerie zu setzen, sodass beim Öffnen des Links sofort das erste Bild in der Lightbox geöffnet wird und man sich dann durch die weiteren Bilder durchklicken kann.

Bislang habe ich dazu eine Seite mit leerem Layout erstellt und dort einen Artikel mit einer Galerie eingefügt. Dann habe ich auf einen Hyperlink auf diese Seite platziert und das rel-Attribut "lightbox" eingetragen. Wenn ich den Link öffne wird aber die gesamte Galerie in einer Lightbox angezeigt. Ich würde es gerne so hinbekommen, dass sofort das erste Bild in Großansicht erscheint. Wie kann ich das erreichen?

Vielen Dank im Voraus,

Marcel

[Andreas]

Ein rel-Attribut mit dem Wert "lightbox" ist nicht erlaubt (ich gehe von einer HTML-Ausgabe aus). Die Colorbox, Mediabox, Slimbox suchen nach Link-Elementen mit dem Attribut "data-lightbox". Der Wert dieses Attributes ist egal.

<a data-lightbox="myAlbum" ...

Was du möchtest ist, du öffnest eine Seite auf welcher sich oben besagte Link-Elemente befinden. Auf den ersten dieser Links soll ein Click-Event getriggert werden, bzw. die Lightbox soll angewiesen werden den ersten Link zu öffnen. Normalerweise sucht man dann in den Docs der Lightbox, wie man einen Link automatisch öffnet.
http://www.jacklmoore.com/colorbox/

Du kannst mal das hier probieren.

<script>
(function($) {
  $(document).ready(function() {

    $('.cboxElement').eq(0).click();

  });
})(jQuery);
</script>

Edit: Das Linkelement, welches diese Seite öffnet hat damit erstmal nichts zu tun.

[Andreas]

Wenn du nur einen Link anbieten möchtest, sodass sich dann Bilder einer Galerie in der Lightbox zum Blättern anbieten, brauchst du keine extra Seite. Du brauchst dann nur eine versteckte Aufzählung von Links, welche über einen gleichen data-lightbox Wert zu einem Album verbunden sind und den ersten Link sichtbar zu gestalten. Dabei brauchst du auch keine Vorschaubilder zu laden. Beispiel:

<div class="gallery">
  <a href="bild-1.jpg" data-lightbox="myAlbum">Galerie</a>
  <a href="bild-2.jpg" data-lightbox="myAlbum" class="invisible">Bild 2</a>
  <a href="bild-3.jpg" data-lightbox="myAlbum" class="invisible">Bild 3</a>
  ...
</div>

<a href="big-img.jpg" data-lightbox="notMyAlbum">Big IMG</a>

[aitana]

Hallo zusammen

Ich möchte mich dieser Frage gerne anschliessen.
Das direkte öffnen des Popups kriege ich hin.
Wäre es auch möglich, das Pupup abhängig von href oder data-lightbox zu öffnen?

Die Lösung sollte dynamisch sein. Also ohne fixen Wert im script.

Das Manual habe ich angeschaut aber ich kam leider nicht zur Lösung.

[Andreas]

Beschreibe bitte einmal genauer, was du machen möchtest. Am besten mit einer Beispielseite. Ja, man kann individuell auf jeden Link reagieren.
Beispiel mit Contao 4.13 j_colorbox Template:

...
jQuery(function($) {
  $('a[data-lightbox]').map(function() {
    $(this).colorbox({
      // Put custom options here

      inline: $(this).hasClass('inline'), // wird zu true, wenn der Link die Klasse inline besitzt, ansonsten false

      loop: false,
      rel: $(this).attr('data-lightbox'),
      maxWidth: '95%',
      maxHeight: '95%'
    });
  });
});
... 

Soll HTML-Element|e aus der aktuellen Seite anzeigen anstatt Bilder, wenn ein a[data-lightbox] die Klasse inline hat (ungetestet).

[aitana]

Vielen Dank für deine Antwort, Andreas.
Bei mir erscheinen Bilder und Text auch ohne der inline Angabe.

Es sollte keine fixe Klasse sein.
Es sind verschiedene Aktionen, welche mit offener Lightbox und der entsprechender URL aufgerufen werden sollen.
Beispiel:

<a href="aktion-1" class="hyperlink_txt cboxElement" title="" data-lightbox="aktion-1">

Das Popup sollte dann mit folgender URL offen sein:
Domainname.ch?data-lightbox=aktion-1
oder
Domainname.ch?href=aktion-1

Hättest du vielleicht eine Idee, wie das machbar ist?
Ich habe alle möglichen Varianten, welche ich gefunden habe ausprobiert. Aber leider funktioniert es einfach nicht.

[Andreas]

Also wenn https://example.org?myGetVar=aktion-1 aufgerufen werden soll, dann sollte das auch in deinem HREF stehen. (Geht auch ohne, macht es aber etwas komplizierter.)

<a href="https://example.org?myGetVar=aktion-1" class="hyperlink_txt cboxElement" title="" data-lightbox="aktion-1">

Was wird dort geöffnet oder soll damit geöffnet werden, eine HTML-Seite, ein HTML-Element von der Seite oder irgendeine andere Datei? Wenn HTML, dann solltest du zwingend inline iframe:true verwenden, auch wenn du in der Lightbox bereits etwas siehst.

Beispiel für:

<a href="https://example.org?myGetVar=aktion-1" data-lightbox="myGetVar">

...
      // Put custom options here
      iframe: $(this).attr('data-lightbox') == 'myGetVar', // wird zu true, wenn data-lightbox den String myGetVar enthält, ansonsten false
... 

Eine Beispielseite wäre gut. Melde dich, ich brauche nicht immer so lange für eine Antwort, sorry.

[aitana]

Hallo Andreas

Herzlichen Dank für deine Antwort!
Das Template habe ich angepasst.
Für den Absende-Button benutze ich Custom Elements von Rock Solid.

Dort steht nun folgendes:

<a href="{{env::url}}?myGetVar=<?php echo $link->url ?>" class="hyperlink_txt cboxElement" title="" data-lightbox="myGetVar">

Leider kommt bei mir dann folgende URL im Frontend raus und es gibt eine Weiterleitung zur Startseite:
domainname.ch/?myGetVar=aktionen-popup/articles/aktion-1


Hast du vielleicht eine Ahnung, woran das liegen könnte?



(Edit: Was auch sehr seltsam ist:
Wenn ich iframe:true angebe, erscheint der Inhalt nicht im Popup.

Edit 2:
Mit der Angabe innerWidth:Zahl, innerHeight:Zahl, erscheint der Inhalt.)

[Andreas]

Ich schau mir mal deine privaten Nachrichten an. Vorab schonmal: Was im HREF steht muss natürlich im Browser auch angezeigt werden können. Also

domainname.ch/?myGetVar=aktionen-popup/articles/aktion-1

einfach mal in die Adresszeile des Browsers eingeben.

Edit: Ist erledigt