• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage Ajax-Content mit Featherlight.js laden

xSTVNx

Mitglied
Mir ist das ja schon fast peinlich, weil die Antwort bestimmt mal wieder kinderleicht ist, allerdings bin ich schon am Verzweifeln... Ich bekomme es einfach nicht hin, mit featherlight.js Content via Ajax zu laden.

In der Doc wird der Syntax wie folgt angegeben:

HTML:
<a href="myhtml.html .selector" data-featherlight="ajax">Open ajax content in lightbox</a>
<a href="#" data-featherlight-ajax="myhtml.html .selector">Open ajax content in lightbox</a>
<a href="#" data-featherlight="myhtml.html .selector" data-featherlight-type="ajax">Open ajax content in lightbox</a>

Was mir aber irgendwie unklar ist: Worauf bezieht sich denn .selector?

Muss ich noch ein zusätzliches leeres Div mit der class 'selector' erstellen? (Hab ich schon versucht.) Oder ist das dann die class des Containers, in dem das Plugin den geladenen Content anzeigt? (Was ja garnicht passiert.) Ich kapier's nicht. bzw. stehe wohl auf dem Schlauch?! oO
 
Werbung:
Was meinst du damit genau ?
Hast du da schon was versucht , bzw kannst du mal dein Code dazu zeigen

Naja, bspw.:

PHP:
<a href="#" data-featherlight-ajax="ajax/editSource.php .selector">edit</a>

Die editSource.php enthält aktuell nur ein hello, weil ich nichtmal das angezeigt bekomme.

Also es passiert halt garnix beim Klicken. Und die Konsole zeigt auch nix an.
 
Werbung:
Ok. ist eigentlich ganz einfach .
Zb . erstelle eine Datei test.php
Schreibe das rein, und nur das ( um es einfach zu halten ).
Code:
<p id="test">das kommt weil du die id gerufen hast</p>
<p class="classtest">das kommt  weil du den selector .classtext eingegeben hast</p>
Dann erstelle eine neue Datei , zb index.html
Da muss das Script so aussehen
Code:
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Featherlight – The ultra slim jQuery lightbox.</title>

        <link rel="stylesheet" href="src/featherlight.css" />
        <link rel="stylesheet" href="src/featherlight.gallery.css" />
        <style>
           a{
                 font-size:60px;
           }
        </style>
    </head>
    <body class="fl-page">
        <div class="container">
            <div class="row">
                 <a href="test.php #test" data-featherlight="ajax">hole text mit id</a><br>
                 <a href="test.php .classtest" data-featherlight="ajax">hole text mit class</a>
            </div>
        </div>
        <script src="assets/javascripts/jquery-1.7.0.min.js"></script>
        <script src="src/featherlight.js" charset="utf-8"></script>
        <script src="src/featherlight.gallery.js" charset="utf-8"></script>
    </body>
</html>

Das wahr es schon. So sollte es auch ersichtbar sein was mit den .selector gemeint ist.

So kannst du es auch mit Bildern und iframes und co machen , wenn ich es richtig verstanden habe
 
Zurück
Oben