• 1. Das Javascript aus Posting #17 ist auf das HTML aus Posting #15 zugeschnitten.

    2. Da die JS- und CSS-Datei von einem CDN geladen wird, benötigt man eine Internetverbindung. Ist das nicht gewünscht, muss man sie herunter laden und selber hosten.

    Beide Varianten haben bei mir funktioniert. Wenn sie es bei dir nicht tun, dass poste mal den Code oder die URL der Seite.

  • Hallo Sempervivum danke für das Script. Leider funktioniert der Code bei mir nicht. Die Fotos werden bei Anklicken nicht größer! :wacko:

    Verscuh es mal mit Jquery einzubinden ,dann sollte es auch gehen

    Code
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

    Dem Html zufügen



    EDIT sorry irgendwie kam der Post zu spät

  • 1. Das Javascript aus Posting #17 ist auf das HTML aus Posting #15 zugeschnitten.

    2. Da die JS- und CSS-Datei von einem CDN geladen wird, benötigt man eine Internetverbindung. Ist das nicht gewünscht, muss man sie herunter laden und selber hosten.

    Beide Varianten haben bei mir funktioniert. Wenn sie es bei dir nicht tun, dass poste mal den Code oder die URL der Seite.

    Ich habe es bei aktiver Internetverbindung lokal getestet. Das Script aus #15 habe ich mit #17 ersetzt.


    Hier kommt was ich auf dem Rechner habe:


    <!doctype html>

    <html lang="en">


    <head>

    <meta charset="UTF-8">

    <title>Test</title>

    </head>


    <body>

    <style>

    #wrapper {

    max-width: 600px;

    width: 100%;

    display: flex;

    flex-wrap: wrap;

    margin: auto;

    }

    figure {

    margin: 0.5em;

    flex-basis: calc(33% - 1em);

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    }

    figure img {

    width: 100%;

    height: auto;

    min-height: 1px;

    }

    figure a {

    min-height: 1px;

    }

    figure figcaption {

    text-align: center;

    }

    </style>


    <div id="wrapper">

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (1).jpg" alt="bild2" />

    <figcaption>

    Text Bild 1

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (2).jpg" alt="bild2" />

    <figcaption>

    Text Bild 2

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (3).jpg" alt="bild1" />

    <figcaption>

    Text Bild 3

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (4).jpg" alt="bild1" />

    <figcaption>

    Text Bild 4

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (5).jpg" alt="bild1" />

    <figcaption>

    Text Bild 5

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (7).jpg" alt="bild1" />

    <figcaption>

    Text Bild 6

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (8).jpg" alt="bild1" />

    <figcaption>

    Text Bild 7

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (9).jpg" alt="bild1" />

    <figcaption>

    Text Bild 8

    </figcaption>

    </figure>

    <figure>

    <img class="bild" src="http://lupus.bplaced.net/fotos/t (10).jpg" alt="bild1" />

    <figcaption>

    Text Bild 9

    </figcaption>

    </figure>

    </div>

    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>


    <script>

    $("figure img").each(function(idx, item) {

    var url = $(this).attr("src");

    var caption = $(this).next("figcaption").text();

    $(this).wrap('<a></a>');

    var atag = $(this).parent();

    var caption = atag.next("figcaption").text();

    atag.attr({href: url, "data-fancybox": "gallery", "data-caption": caption});

    })

    </script>

    </body>


    </html>

  • Wenn man die Seite ohne Webserver lädt, funktioniert der Einzug nicht, wenn man das Protokoll weg lässt.

    Versuche dies:

  • Lupus_III ich wahr mal so frei und habe dein Code ins Fiddle kopiert https://jsfiddle.net/basti1012/hvhujc7u/52/ und wie du siehst es geht .

    Wie Sempervivum schon sagte must du wohl die bibiliothek runterladen wenn du kein Internet nutzen kannst. Aber da du ja jetzt online bist siehst du ja das es geht .


    Du kannst auch denn ganzen code aus den scripten kopieren und mit ins html mit rein kopieren,aber ist nicht die beste lösung weil es etwas zu gross wird.


    Also wenn kein internet musst du es wohl extern einbinden

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!