Colorbox aufrufen?

Hi,

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

LG
& Danke

Der Link bräuchte das data-lightbox Attribut.

Zitat:

---

Zitat von xchs

Der Link bräuchte das data-lightbox Attribut.

---

Also so?

Code:

---

<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?

Zitat:

---

Zitat von fr3d83

Also so?

---

Ja.

Zitat:

---

Zitat von fr3d83

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.

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/

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.

HTML-Code:

---

data-lightbox="myAlbum1"

---

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

HTML-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.

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:

Code:

---

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

---

Edit:

Zitat:

---

Zitat von fr3d83

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.