Hallo Bildermacher,

vllt. habe ich mich missverständlich ausgedrückt...

Das Verhalten der Popup-Ebene ist mir schon bekannt. Die beschriebene Ebene mit dem Slider wird durch einen Link eingeblendet. Das funktioniert.

Ich sehe auch, dass der Slider da ist (hat oben links eine Werbeeinblendung "Amazing Slider Free Version") und mit dem zufällig entdeckten Kniff wird er auch angezeigt. Er ist also da und geladen - nur wird er initial nicht korrekt angezeigt.

Ich poste unten mal den Code, den ich für den Slider in Head und Body des Platzhalters eingefügt habe.

Viele Grüße
Michael

<!-- 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:510px;margin:0px auto 0px;">
        <div id="amazingslider-1" style="display:block;position:relative;margin:0 auto;">
            <ul class="amazingslider-slides" style="display:none;">
                <li><a href="images/IMG_4671-lightbox.JPG" class="html5lightbox"><img src="images/IMG_4671.png" data-duration="8000" /></a>
                </li>
                <li><a href="images/IMG_4672-lightbox.JPG" class="html5lightbox"><img src="images/IMG_4672.png" alt="IMG_4672"  title="IMG_4672" /></a>
                </li>
                <li><a href="images/IMG_4673-lightbox.JPG" class="html5lightbox"><img src="images/IMG_4673.png" alt="IMG_4673"  title="IMG_4673" /></a>
                </li>
                <li><a href="images/IMG_4675-lightbox.JPG" class="html5lightbox"><img src="images/IMG_4675.png" alt="IMG_4675"  title="IMG_4675" /></a>
                </li>
                <li><a href="images/IMG_4676-lightbox.JPG" class="html5lightbox"><img src="images/IMG_4676.png" alt="IMG_4676"  title="IMG_4676" /></a>
                </li>
                <li><a href="images/IMG_4681-lightbox.JPG" class="html5lightbox"><img src="images/IMG_4681.png" alt="IMG_4681"  title="IMG_4681" /></a>
                </li>
                <li><a href="images/IMG_4683-lightbox.JPG" class="html5lightbox"><img src="images/IMG_4683.png" alt="IMG_4683"  title="IMG_4683" /></a>
                </li>
                <li><a href="images/IMG_4684-lightbox.JPG" class="html5lightbox"><img src="images/IMG_4684.png" alt="IMG_4684"  title="IMG_4684" /></a>
                </li>
                <li><a href="images/IMG_4685-lightbox.JPG" class="html5lightbox"><img src="images/IMG_4685.png" alt="IMG_4685"  title="IMG_4685" /></a>
                </li>
                <li><a href="images/IMG_4687-lightbox.JPG" class="html5lightbox"><img src="images/IMG_4687.png" alt="IMG_4687"  title="IMG_4687" /></a>
                </li>
            </ul>
            <ul class="amazingslider-thumbnails" style="display:none;">
                <li><img src="images/IMG_4671-tn.png" /></li>
                <li><img src="images/IMG_4672-tn.png" alt="IMG_4672" title="IMG_4672" /></li>
                <li><img src="images/IMG_4673-tn.png" alt="IMG_4673" title="IMG_4673" /></li>
                <li><img src="images/IMG_4675-tn.png" alt="IMG_4675" title="IMG_4675" /></li>
                <li><img src="images/IMG_4676-tn.png" alt="IMG_4676" title="IMG_4676" /></li>
                <li><img src="images/IMG_4681-tn.png" alt="IMG_4681" title="IMG_4681" /></li>
                <li><img src="images/IMG_4683-tn.png" alt="IMG_4683" title="IMG_4683" /></li>
                <li><img src="images/IMG_4684-tn.png" alt="IMG_4684" title="IMG_4684" /></li>
                <li><img src="images/IMG_4685-tn.png" alt="IMG_4685" title="IMG_4685" /></li>
                <li><img src="images/IMG_4687-tn.png" alt="IMG_4687" title="IMG_4687" /></li>
            </ul>
        <div class="amazingslider-engine"><a href="http://amazingslider.com" title="jQuery Slider">jQuery Slider</a></div>
        </div>
    </div>
    <!-- End of body section HTML codes -->

Zusätzlicher Hinweis:

Der Slider funktioniert außerhalb der Ebene selbstverständlich einwandfrei, das habe ich ausprobiert.

Dein Beispielcode ist zum Testen leider nicht verwendbar, weil Du direkte Links verwendest.

Aber schau Dir mal diesen Thread an, da findest Du geeignete Infos die Dir wahrscheinlich helfen, Dein Problem zu lösen.

Ich kann mir gut vorstellen, dass Dein Code auf einer popup Ebene funktioniert, wenn Du mit einem Platzhalter für den HTML Code im Body arbeitest und den HTML Code für den Head Bereich direkt auf der Seite ablegst...

Probier's mal.

Viel Erfolg

Hallo BeRo,

herzlichen Dank für den Tipp! Ich habe den Head-Code direkt in der Seite angelegt (das war auch dummerhaftig von mir, das im Platzhalter zu machen...).

Leider ist das Verhalten aber identisch .

Ich habe exakt den selben Code auf einer Seite ohne Popup-Ebene getestet und es läuft einwandfrei.
Und auch auf der Ebene wird der Slider ja geladen, nur sehe ich ihn nicht - bis ich wenn ich im Firefox / IE mit der rechten Maustaste auf den Slider klicke und "Element untersuchen" auswähle. Dann läuft der Slider problemlos...

Der Beispielcode ist der von Amazing Slider generierte, ich bin da auch nach der Anleitung vorgegangen.

Bleibt also die Frage: warum braucht der Slider auf der Ebene einen zusätzlichen Anschubser...?

Kann ich hier noch irgendetwas einstellen, was zur Wahrheitsfindung beitragen könnte? Ich könnte die Seite ja versteckt auf meiner Homepage einbauen.

Viele Grüße
Michael

Hallo BeRo,

ich habe nun noch etwas recherchiert und das hier gefunden.

Wenn ich das alles richtig verstanden habe, muss die Initialisierung des Sliders an eine andere Stelle verschoben werden, und zwar zum Link, der die Popup-Ebene aufruft.

Der dafür zu betreibende Aufwand scheint mir nicht angemessen und zudem höchst fehleranfällig - da werde mich mir wohl mit einer handgeschnitzten Bildergalerie helfen müssen...

Wäre trotzdem schön, wenn Du mit Deinem Expertenauge noch mal draufschauen könntest.

Vielen Dank im Voraus und beste Grüße
Michael

[...] werde mich mir wohl mit einer handgeschnitzten Bildergalerie helfen müssen. [...]

Sicher nicht...

Wenn Du Dir den Export des Amaizing Sliders anschaust, den er nach einem Klick auf den "Veröffentlichen" Button erzeugt, dann siehst Du ein Äquivalent zu dem, was auch der WD bei einem Export anlegt. Das ist eine HTML Datei und hier 2 Verzeichnisse, die den Seiteninhalt enthalten. Der WD legt ja im Vergleich dazu nur 1 Verzeichnis an.

Du musst also keinerlei Codeschnipsel irgendwo hin kopieren, wenn Du stattdessen die exportierte HTML Datei mit einem iframe Code einbindest.

In Deinem Fall...

• legst Du einen ausreichend groß dimensionierten Platzhalter in einer popup Ebene an.
• legst im Platzhalter im HTML Body einen geeigneten iframe Code an
• verlinkst von der Hauptseite auf die popup Ebene
• freust Dich, dass es so einfach war...

So kann das im Editor aussehen:

Der für das Beispiel verwendete iframe Code sieht so aus:

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

So sieht es im Editor aus:

Der o. a. Code basiert auf der Annahme, dass die beiden Verzeichnisse ("images" und "sliderengine")- und die Startdatei "slider.html"  die der Amaizing Slider beim Veröffentlichen erzeugt hat, im Verzeichnis "index_htm_files" liegen, das der WD beim Export einer Projektdatei angelegt hat.
Legst Du die Dateien an anderer Stelle ab (was nicht empfehlenswert ist!), muss der iframe Code entsprechend angepasst werden.

Die beste Lösung, um die Slider Dateien (und Verzeichnisse) automatisch in das Verzeichnis "index_htm_files" zu bringen ist die Benutzung eines Hilfsverzeichnisses für das jeweils aktuelle WD Projekt.

Ein Hilfsverzeichnis wird vom WD automatisch erstellt, wenn Du z. B. eine vorhandene Grafik (oder einen Platzhalter) durch eine extern liegende Grafik ersetzt.
Alternativ kannst Du das Hilfsverzeichnis manuell anlegen. Dazu erstellst Du in dem Verzeichnis, in dem die Projektdatei (z. B. "sitename.web") liegt, ein neues Verzeichnis. Das Verzeichnis muss den Namen des Projekts haben (hier "sitename"), erweitert um "_web_files".
Für unser Beispiel hat das Hilfsverzeichnis also den Namen "sitename_web_files".
Alle Dateien, die Du in dieses Verzeichnis kopierst, werden vom WD bei einem Export/Upload automatisch gelesen und in das Datei Verzeichnis "index_htm_files" kopiert.
Dort eventuell schon vorhandene Originaldateien werden dabei mit den Dateien aus dem Hilfsverzeichnis überschrieben!
Wenn Du die "Hilfsverzeichnis" Methode benutzt, musst Du dich also um die korrekte Organisation Deiner Scriptdateien nicht mehr kümmern, das macht dann der WD vollautomatisch.

Wenn Du den o. a. Tipp umsetzt, sollte Dein Problem schnell gelöst sein.

So kann es dann aussehen, wenn alles geklappt hat

Viel Erfolg

Hallo BeRo,

herzlichen Dank für Deine mal wieder perfekte Anleitung!
Ich hab mal wieder die Möglichkeiten des iFrames übersehen...

Ich bin noch nicht dazu gekommen, das auszuprobieren - werde das aber kurzfristig nachholen und mich dann noch einmal melden.

Herzliche Grüße
Michael

Hallo,

Wenn wir schon über den Amazing Slider sprechen dann hätte ich da auch ein Anliegen und zwar, wie bekomme ich das hin, dass der Slider als responsive funkt?

Im Amazing Slider Tool ist alles richtig eingestellt (Export als responsive Design etc.)

Ich habe hier eine leise Vermutung:

Damit der Slider erscheint, muss man ein Code in den Head und einen in den Body einfügen...kein Problem funk. alles bestens. Nur um diesen Code im WD 12 einzufügen, muss man einen Platzhalter erstellen. Nun der hat in meinem Fall die Breite der Seite 960 px und eine Höhe von 500px.

Wenn ich alles exportiere und die Seite im Netz anschaue dann ist der Slider alles andere als responsiv...er passt sich einfach nicht an, bleibt quasi statisch. Ob das was mit dem P. Halter und der festgelegten Breite von 960px was zu tun hat??? Für einen kleinen Denkanstoss wäre ich Euch sehr dankbar.

Gruß

Vik

@vikkiv

[...] Wenn ich alles exportiere und die Seite im Netz anschaue dann ist der Slider alles andere als responsiv [...]

Das wird auch nicht funktionieren, weil der Code in einem iframe und ggf. noch in einem Platzhalter abgelegt wird. Damit ist die Darstellung des Sliders von seinem "Elternelement" abhängig und das wird nun mal ohne responsive Funktionen vom WD erstellt und verwaltet.

Lies Dir zu dem Thema auch mal diesen Thread durch. Da findest Du Tipps zum Einrichten einer Testumgebung. Wenn Du die im Beispielcode verlinkte YT Adresse durch einen Link auf die Startdatei des Amazing Sliders ersetzt, siehst Du das Problem live...

Hier der angepasste iframe Code, den Du für Deine Zwecke benutzen kannst, wenn die Slider Verzeichnisse und die Startdatei "slider.html" im selben Verzeichnis liegen, in dem der WD seine Dateien exportiert hat.

--------------------------------
<iframe src="./slider.html" frameborder="0" allowfullscreen>
</iframe>
-------------------------------

Viel Erfolg