Frage Ajax-Content mit Featherlight.js laden

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

Werbung

Jetzt auf elektrisches Fahren umstellen, Umwelt schonen und 1.500km kostenlosen Strom von Tesla bekommen. https://ts.la/carsten15473.

xSTVNx

Mitglied
23 September 2012
83
0
6
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
 

xSTVNx

Mitglied
23 September 2012
83
0
6
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.
 

basti1012

Aktives Mitglied
26 November 2017
970
102
43
38
Minden
sebastian1012.bplaced.net
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
 
Reactions: xSTVNx
Werbung: