Amazing Slider in Website-Varianten

fuerteventura-2007 schrieb am 22.06.2019 um 22:16 Uhr

Hallo Forum,

ich nutze schon lange den Amazing Slider, aber zum ersten Mal in einer Website mit Varianten. Und stoße prompt auf Probleme. Ich weiß, das ist nicht wirklich Kernthema dieses Forums - aber wo, wenn nicht hier, kann ich auf Unterstützung hoffen?

Das Problem ist, dass der Slider in der mobilen Variante schlicht nicht angezeigt wird - und da bin ich mit meinem Latein am Ende.... Der Code zum Einbetten des Sliders in einen Platzhalter im WD-Projekt wird von Amazing Slider generiert. Dabei werden die Bilder des Sliders im Unterordner "images" und die Scripte im Unterordner "sliderengine" abgelegt. Anschließend wird der Slider wie folgt im Platzhalter eingebunden:

    <!-- Insert to your webpage before the </head> -->
    <script src="sliderengine/jquery.js"></script>
    <script src="sliderengine/amazingslider.js"></script>
    <link rel="stylesheet" type="text/css" href="sliderengine/amazingslider-1.css">
    <script src="sliderengine/initslider-1.js"></script>
    <!-- End of head section HTML codes -->

    <!-- Insert to your webpage where you want to display the slider -->
    <div id="amazingslider-wrapper-1" style="display:block;position:relative;max-width:1400px;margin:0px auto 0px;">
        <div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
            <ul class="amazingslider-slides" style="display:none;">
                <li><img src="images/slider01.png" alt="slider01"  title="slider01" />
                </li>
                <li><img src="images/slider02.png" alt="slider02"  title="slider02" />
                </li>
                <li><img src="images/slider03.png" alt="slider03"  title="slider03" />
                </li>
                <li><img src="images/slider04.png" alt="slider04"  title="slider04" />
                </li>
            </ul>
        </div>
    </div>
    <!-- End of body section HTML codes -->

Hier könnte ich also beliebig eingreifen - wenn ich wüsste, wie.

Ein kleines Beispiel-Projekt habe ich hier zum Download bereitgestellt.

Meine Anfrage an den Support des Amazing Slider hat folgendes Ergebnis gebracht:

The problem has nothing to do with the slider itself.
It's because one of the ancestor div of the slider is set to be hidden when the screen width is less than 879px.
There is also a problem with responsive. Because this div has been configured as a fixed size div.
Please view the attached screenshot for the errors.

Das Problem scheint also darin zu bestehen, dass der Slider mit einer festen Breite von 1400 Pixeln eingebunden und deshalb vom Web Designer bei der geringeren Auflösung der Smartphone-Variante nicht angezeigt wird.

Natürlich könnte ich nun jeden in der Website verbauten Slider für jede mobile Variante in der entsprechenden Auflösung nachbauen (schreckliche Vorstellung!) und dann hoffen, dass die Übergänge zwischen den Varianten funktionieren. Aber: vielleicht weiß einer der Code-Gandalfs oder eine der Code-Gandalfinen hier eine viel bessere weil einfachere Lösung. Ach, was würde ich mich freuen!

Viele Grüße und herzlichen Dank im Voraus
Michael

Kommentare

BeRo schrieb am 22.06.2019 um 23:58 Uhr

[...] Der Code zum Einbetten des Sliders in einen Platzhalter im WD-Projekt wird von Amazing Slider generiert. [...] Anschließend wird der Slider wie folgt im Platzhalter eingebunden: [...]

Das ist das Problem in dem schon die Lösung sichtbar wird. 😀

Wenn Du den Code, den der Amazing Slider generiert, da stehen lässt wo er generiert wurde, dann genügt das Einbinden per iframe (s. u.) und Du kannst beliebige Varianten mit einer lauffähigen Slideshow ausstatten.

Idealerweise verfrachtest Du die beiden Verzeichnisse "sliderengine" und "images" zusammen mit der Startdatei "slider.html" in das Hilfsverzeichnis Deines Projekts. Dann kannst Du den u. a. iframe Code 1:1 in Dein Projekt einbauen und ihn ohne Änderungen auch in die Varianten übernehmen

<iframe src="./index_htm_files/slider.html" width="100%" height="100%" frameborder="0" scrolling="no" name="xara_iframe" ><p>Your browser does not support iframes.</p></iframe>

So kann der "Einbau" ausssehen:

Da der Slider von Haus aus responsive Eigenschaften hat, ist er problemlos auch in den schmalen Platzhaltern der Smartphone Varianten lauffähig.
Die Aussage: "dass der Slider mit einer festen Breite von 1400 Pixeln eingebunden" werden muss ist also nicht ganz korrekt... 😎

Problem gelöst?

Viel Erfolg 👍

--------------------------

P.S.
Das Thema hatten wir aber auch schon vor ca. 3 Jahren mal "auf dem Tisch" (klick). Die heute vorgestellte Lösung müsstest Du also kennen... 😠

fuerteventura-2007 schrieb am 23.06.2019 um 11:56 Uhr

Hallo BeRo,

ganz herzlichen Dank für Deine Anleitung! In meinem Beispiel habe ich sie bereits erfolgreich umgesetzt, im echten Projekt kämpfe ich noch.

Dazu habe ich noch eine Frage:
Was ist der Vorteil, die Slider.html und die Unterverzeichnisse über das Hilfsverzeichnis in das Verzeichnis index_html_files kopieren zu lassen?
In meinem Beispielprojekt habe ich auf die Slider.html im gleichen Verzeichnis verwiesen und das hat funktioniert (<iframe src="./slider.html" ...). Im echten Projekt heißt es noch: "Not Found. The requested URL has no content." - und zwar bei beiden Methoden.

Ergänzung 12:33 Uhr:
Entwarnung. Nach dem Export wird der Slider in allen Varianten korrekt angezeigt!

Bleibt also nur die Frage:
Was ist der Grund, warum Du die Lösung, die Slider.html und die Unterverzeichnisse über das Hilfsverzeichnis in das Verzeichnis index_html_files kopieren zu lassen, favorisierst. Der BeRo macht sowas nicht aus einer Laune heraus.... 😆

Viele Grüße

Michael

PS:
Ja, wenn ich so ein fotografisches Gedächtnis hätte wie Du hätte ich mich sicher erinnert. Hab ich aber nicht.... 😳

BeRo schrieb am 23.06.2019 um 12:45 Uhr

[...] Was ist der Vorteil, die Slider.html und die Unterverzeichnisse über das Hilfsverzeichnis in das Verzeichnis index_html_files kopieren zu lassen? [...]

Mit der Hilfsverzeichnis Methode übernimmt der WD den Upload auf den Webserver automatisch, ohne dass Du manuell eingreifen müsstest. Aber lies Dir doch nochmal meinen Kommentar von vor drei Jahren durch (klick), den ich weiter oben ebenfalls verlinkt habe. Da findest Du alle Infos en détail... 😇

fuerteventura-2007 schrieb am 27.06.2019 um 14:36 Uhr

Hallo BeRo,

diesmal bin ich aber ganz unschuldig 😇 - selbstverständlich habe ich Deinen Kommentar aufmerksam gelesen! 🙂

In diesem Projekt habe ich es jetzt vorgezogen, die Slider-Dateien im Root-Verzeichnis abzulegen, weil ich damit auch die Slider-Unterverzeichnisse direkt im Blick habe. Der Upload auf den Webserver läuft immer über FileZilla.

Herzlichen Dank für Deine Unterstützung
Michael