Beiträge von Sempervivum

Ja, ein iFrame muss nicht unbedingt optimal sein. Ich habe ihn nur vorgeschlagen, weil es die einfachste Möglichkeit ist, eine externe HTML-Seite einzubetten.

Zitat

Die CSV-Datei, bzw. xls Datei welche ich vom Lieferanten bekommen habe beinhaltet alle Produktdaten. Lediglich die Bilder und die Artikelbeschreibung liegen bei denen auf dem Server.

Das mit der CSV-Datei verstehe ich immer noch nicht. Erwartest Du, dass Du diese vom Lieferanten laden kannst? Wie gesagt, wenn ich die URL aufrufe, bekomme ich eine HTML-Seite mit einer lesbaren, strukturierten Beschreibung und keine CSV-Datei.

Verstehe ich das richtig? Der erste Link (Rohrbohrmaschine) gibt an, wie die Seite ohne Artikelbeschreibung aussieht? Und der zweite (Magnetkernbohrmaschine) den Sollzustand, wie es eigentlich aussehen soll?

Du schreibst zwar von CSV, aber wenn ich den Link im Browser aufrufe, kommt eine HTML-Datei, die ganz normal im Browser angezeigt wird. Ein einfaches Verfahren, diese anzuzeigen, ist ein iFrame:

http://wiki.selfhtml.org/wiki/…rschiedene_Frametechniken

Ich wollte ein Demo bei jsfiddle machen, aber es funktioniert nicht, weil die URL keine gesicherte Verbindung hat. In einer Testdatei mit http funktioniert es jedoch.

<iframe src="http://web1.stuermer3.stuermer-maschinen.de/index.php?id=4194&tx_produktkatalog_pi1[tx_productkatalog]=59577">
</iframe>

Wenn dein Shop eine sichere Verbindung hat, müsste man weiter sehen, ob es mit Ajax funktioniert.

Den Aufwand, es zu verstehen und sich einzuarbeiten, investiert man besser nicht in ein Layout mit float sondern etwas, das klar, verständlich, geradlinig und der neueste Stand der Technik ist: Flexbox.

Das liegt am float: Wenn Du ein Element floatest, wird im Eltern-Container kein Platz mehr dafür reserviert. Daher liegt in deinem Fall das gefloatete Element außerhalb seines Beitragscontainers und überdeckt den folgenden Beitragscontainer. Das ist eine sehr unangenehme Eigenschaft des floating und ein Grund, warum ich und andere auch davon abraten.

Float deaktiviert:

Stimmt, das im Anhang sieht nicht gut aus.

BTW: Wenn ich dieses:

#element {
Float: Left;
}

dem Validator vorlege (https://jigsaw.w3.org/css-validator/#validate_by_input) bekomme ich als Ergebnis:

Zitat

Gratuliere! Keine Fehler gefunden.

Dieses Dokument wurde als CSS level 3 + SVG validiert!

Zitat

bist du da schon bei Sempervivum

Nein, ich wollte es erst Mal bei meiner allgemeinen Empfehlung belassen und nichts ausarbeiten.

Wahrscheinlich wirst Du hier mit den Segnungen eines Layouts mit float konfrontiert. Bei deinem Layout, wo alles einfach untereinander aufgeführt ist, brauchst Du das nicht, vermutlich nicht einmal Flexbox.

Möglicher Weise beherrscht der IE11 diese Kurzschreibweise nicht. Versuche dies:

}).then(function(result) {

Es geht problemlos auch lokal, wenn Du den Code aus meinem Posting #24 verwendest.

Zitat

Die Frage ist eigentlich nur wie und ob man mit Css den Inhalt eines Containers auslesen kann,so das

...

Ich schaffes bis jetzt ja auch nicht

Ich glaube, das würde ich auch nicht schaffen und ich bezweifle, dass es möglich ist.

Die Methode 1 funktioniert deshalb nicht, weil Du dich zwei Mal auf das load-Event beziehst. Wenn Du mit body.addEventListener('load', function(){den Listener registriert, hat dieses Event schon gefeuert und feuert nicht wieder.

Also entweder so:

https://jsfiddle.net/Sempervivum/7xzavaLw/1/

oder so:

https://jsfiddle.net/Sempervivum/8p1g6kx9/5/

Gleiches Problem im Fiddle: Lässt man Loadtype auf onLoad funktioniert es ebenfalls nicht.

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

Versuche dies:

    <script src="https://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>

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.

Scrollbar ist bei mir auch nicht. Die Seite ist responsiv und passt sich an die Fensterbreite an. Und die Seite frisst wirklich sehr viel Rechenzeit: CPU-Auslastung wenn sie offen ist über 60%, ohne um 5%.

Animationen brauchen im allg. viel Rechenzeit und die Uhr bewegt sich ja ständig. Deaktiviere doch die Ani. mal probeweise, dann siehst Du, ob es daran liegt.

Bei mir das gleiche.

Zitat

Wie reagiert die Bibiliothek wenn man nicht wie hier 9 Bilder sondern zb 150 Bilder hat?

Da erwarte ich keine Probleme. Die Elemente der Lightbox sind ja nur einmal vorhanden und werden nicht für jedes Bild extra angelegt.

Habe aber selber keine Erfahrung mit Fancybox weil ich selber iLightbox benutze.

Zitat

Schade das die Fancybox kein weiter button hat um die Bilder zu Blättern ,damit man nicht immer auf und zu machen muß um alle Bilder zu sehen.

Das geht selbstverständlich auch, indem man für data-fancybox einen Namen definiert:

        $("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});
        })

Versuch mal mit der Maus horizontal zu wischen oder auf dem Handy mit dem Finger ...

PS: Bastis Galerie ist vom HTML her ja schon sehr gut. Ich habe mal das CSS auf Flex umgestellt, damit sie responsiv wird und Fancybox3 hinzu gefügt:

<!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": "", "data-caption": caption});
        })
    </script>
</body>

</html>