Colorbox aufrufen?

[fr3d83]

Hi,

ich habe einen einfachen Button, was muss ich dem Link hinzufügen (z.b CSS Klasse) um eine Colorbox aufzurufen?

LG
& Danke

[xchs]

Der Link bräuchte das data-lightbox Attribut.

[fr3d83]

Der Link bräuchte das data-lightbox Attribut.

Also so?

<a data-lightbox href="kontakt" class="btn btn-continue btn-red" title="">Kontakt</a>

Muss es irgendwie ein Template geben bzw noch etwas aktiviert werden?

[xchs]

Also so?

Ja.

Muss es irgendwie ein Template geben bzw noch etwas aktiviert werden?

Das Skript muss natürlich geladen werden, z. B. im Seitenlayout das j_colorbox Template.

[tab]

Und je nachdem was da geladen werden soll, muss eventuell in diesem Template die Variable iframe auf true gesetzt werden. Siehe auch http://www.jacklmoore.com/colorbox/

[Andreas]

Wenn du mehrere Links hast und willst sie in der offenen Box durchblättern, dann müssen die zusammengehörigen noch einen Bezeichner bekommen. Z.B.

data-lightbox="myAlbum1"

[fr3d83]

Hallo noch einmal, ich möchte beim Seitenaufruf eine Colorbox aufrufen, dass mache ich mit folgendem Code:

<script>
        (function($){
            $(document).ready(function(){
                $.colorbox({
                    inline:true,
                    href:"#mb_popup",
                    loop: false,
                    maxWidth: '95%',
                    maxHeight: '95%',
                    close: "?",
                    opacity: 0.3
                });
            });
        })(jQuery);
    </script>

    <style>
        #mb_popup {
            max-width: 500px;
            padding:30px 30px;
            margin:20px 30px;
            
        }
        #cboxClose {
            display: block !important;
            background: none;
            font-size: 30px;
            line-height: 25px;
            width: 25px;
            cursor: pointer;
            text-align: center;
            text-transform: uppercase;
            font-weight: 600;
            border-radius: 0;
        }
    </style>
    <div id="mb_wrapper">
        <div id="mb_popup">{{iflng::de}}{{insert_article::5892}}{{iflng}}{{iflng::en}}{{insert_article::5893}}{{iflng}}</div>
    </div>

Wenn ich diese Colorbox schließe, verschwindet sie aber der Inhalt steht dann noch auf der Seite.

Füge ich der ID mb_popup ein "display:none" hinzu, sehe ich beim Aufruf den Inhalt nicht.

WWie kann ich das lösen?

VG & Danke

Edit: Habee es hinbekommen, habe eine Conatiner mit display:none herrum gelegt.

[fiedsch]

Wenn das die Colorbox ist (https://www.jacklmoore.com/colorbox/), dann stehr dort unter Event Hooks, daß Du wahrscheinlich 'cbox_closed' verwenden kannst, um die betreffenden Inhalte selbst zu entfernen. Ungetestet wohl etwa so:

// Garantiert ungetestet™?
$(document).bind('cbox_close', function(){
  $("#mb_popup").remove()
});

Edit:

Edit: Habee es hinbekommen, habe eine Conatiner mit display:none herrum gelegt.

Oder so. Dann wären die Inhalte noch da, falls Du sie später doch noch ein Mal brauchst/anzeigen willst.