ZWEI responsive Seiten mit EINEM Script zu einer Slideshow

Christian-Stumm schrieb am 06.03.2019 um 20:18 Uhr

Hallo liebe Leute,

ich bin neu hier, habe wenig Erfahrung und habe ein Problem, welches ich einfach nicht gelöst bekomme... ich hoffe, jemand kann helfen!!

Ich möchte auf einer responsiven Seite folgendes Script ausführen:

Im CODE EINES PLATZHALTERS habe ich im HEAD eingetragen:

<script>

var i = 1;             // Start Point
var images = [];    // Images Array
var time = 3000;    // Time Between Switch
     
// Image List
images[1] = "index_htm_files/PB1.png";
images[2] = "index_htm_files/PB2.png";
images[3] = "index_htm_files/PB3.png";

// Change Image
function changeImg(){
    document.slide.src = images[i];

    // Check If Index Is Under Max
    if(i < images.length - 1){
      // Add 1 to Index
      i++; 
    } else { 
        // Reset Back To O
        i = 1;
    }

    // Run function every x seconds
    setTimeout("changeImg()", time);
}

// Run function when page loads
window.onload=changeImg;
</script>

Im CODES DES PLATZHALTERS in BODY:

<img name="slide" width="960" height="100" />

Auf der 960 px breiten Seite funktioniert die kleine Slideshow einwandfrei!

Nun möchte ich aber auf einer 480 px breiten Seitenversion die gleiche Slideshow, nur zum Beispiel mit einer Auflösung von 480 x 50 px (den HTML-Platzhalter habe ich in der Breite und im Body den Code entsprechend angepasst!) anzeigen lassen... und genau das funktioniert dann einfach nicht! Nach der in 480 px neu erstellten Variante funktioniert die Slideshow dann nicht!! Und auch nicht mehr auf der 960'er Seite! Ich erhalte nur jeweils zwei unterschiedlich große "leere" Kästchen auf den beiden Varianten... Was mache ich falsch? Welche Lösung gibt es hier??

Vielen Dank vorab für Eure Hilfe!!!

Christian

Kommentare

marboe schrieb am 06.03.2019 um 20:58 Uhr

Hier müssen gesonderte IDs vergeben werden, sonst ist unklar welche Slideshow jeweils angezeigt werden soll. Hintergrund ist, dass der webdesigner beim Erstellen der htm- Seite alle Varianten in eine Datei packt.

Gruß marboe

Christian-Stumm schrieb am 07.03.2019 um 07:54 Uhr

Vielen Dank marboe! Nur weiß ich absolut nicht, wie bzw. wo ich IDs vergeben soll... ist es möglich, dies an meinem kurzen Code zu erklären?

marboe schrieb am 07.03.2019 um 08:12 Uhr

Da du hier einen Fremdcode nutzt (warum eigentlich? Der WD hat doch Slideshows im Content-Katalog), kann ich dir das leider nicht sagen. Gruß Marboe

Christian-Stumm schrieb am 07.03.2019 um 09:40 Uhr

Die Slideshows im WD finde ich ehrlich gesagt nicht sehr schön gelöst und ich finde dort keine passende Vorlage, um drei einfach Bilder sliden zu lassen - ohne unschöne "Anfasser", Texte oder Grafiken unterhalb der Slideshows. Es sollen einfach nur drei Bilder abwechselnd nach einer gewissen Zeitspanne wechseln - ohne Links oder sonstigen "Schnickschnack". Alternativ wäre es natürlich auch klasse, wenn ich eine einfache Lösung finden würden, drei verschiedene TEXTE abwechselnd in einer Schleife anzeigen zu lassen!! Vielleicht hast Du ja einen guten Vorschlag vor eine Vorlage vom WD! Danke schon mal vorab!!

marboe schrieb am 07.03.2019 um 11:10 Uhr

Hier im Forum wird immer gern der http://wowslider.com empfohlen.

Wenn du Hilfe suchst zur ID-Vergabe, dann gib mal hier im Forum ins Suchfeld "ID vergeben" ein; da findest du Beiträge jede Menge.

 

Zum Text, würde ich vorschlagen jeweils ein Bild davon zu machen. Schon wäre dein Problem gelöst 😬
Viele Grüße, Marboe

BeRo schrieb am 07.03.2019 um 23:03 Uhr

Wenn Du den Vorschlag von @marboe (WOW Slider) nicht umsetzen willst, dann kannst Du auch mit einem angepassten Script dein Ziel erreichen. Allerdings nicht ohne ein paar "Klimmzüge", mit denen Du die Ids und die Variablen Namen anpassen musst... 😋

Ich habe hier ein paar Scriptlets vorbereitet, die zusätzlich zur Umschaltung von einem Bild zum nächsten noch dafür sorgen, dass die Bilder weich eingeblendet werden. Die online Demo zeigt Dir den Effekt.

Für die Desktop Variante kopierst Du den folgenden Scriptcode in den HTML Body des Platzhalters:

<style>
    .slide {
        border: none;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        -webkit-transition: opacity 2s linear;
        -moz-transition: opacity 2s linear;
        -o-transition: opacity 2s linear;
        transition: opacity 2s linear;
    }
    .visible {
        opacity: 1;
    }
</style>

<div class="header">
    <img id="img0" class="slide visible" src="./index_htm_files/PB1.jpg">
    <img id="img1" class="slide" src="./index_htm_files/PB2.jpg">
    <img id="img2" class="slide" src="./index_htm_files/PB3.jpg">
</div>

Jetzt noch den folgenden Scriptcode in den HTML Head des Platzhalters:

<script>
    var actual = 0;
    var total = 3;    function addClass(elem, name) {
        elem.className = elem.className + " " + name;
    }    
function deleteClass(elem, name) {
        var c = elem.className;
        elem.className = c.replace(name, "").replace(/   /g, " ").replace(/^ | $/g, "");
    }   
function nextImg() {
        var e;        e = document.getElementById("img" + actual);
        deleteClass(e, "visible");        actual++;
        if (actual > total - 1) actual = 0;        e = document.getElementById("img" + actual);
        addClass(e, "visible");
    }    
var slider = setInterval(nextImg, 4000);
</script>

Und schon läuft der Slider in der Variante 😊

Für die Smartphone Variante musst Du noch ein paar kleine Änderungen an den IDs der Bilder und an den Namen der verwendeten Variablen vornehmen.

Im HTML Head des Pltzhalters sieht das jetzt so aus:

<div class="header">
    <img id="imgm0" class="slide visible" src="./index_htm_files/PB1.jpg">
    <img id="imgm1" class="slide" src="./index_htm_files/PB2.jpg">
    <img id="imgm2" class="slide" src="./index_htm_files/PB3.jpg">
</div>

<style>
    .slide {
        border: none;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        -webkit-transition: opacity 2s linear;
        -moz-transition: opacity 2s linear;
        -o-transition: opacity 2s linear;
        transition: opacity 2s linear;
    }
    .visible {
        opacity: 1;
    }
</style>

Der CSS Teil ist unverändert, er muss aber trotzdem in den HTML Body eingetragen werden, damit die automatische Anpassung an die Größe des von Dir angelegten Platzhalters funktioniert.
Im HTML Teil haben die IDs der Bilder einen neuen Namen bekommen (ein angehängtes "m" für "mobil").

Das JScript für den HTML Head des Smartphone Platzhalters hat bei den (meisten) Variablen auch eine Erweiterung um den Buchstaben "m" bekommen und es referenziert zusätzlich die oben schon geänderten IDs der Bilder:

<script>
    var actualm = 0;
    var total = 3;    function addClass(elem, name) {
        elem.className = elem.className + " " + name;
    }    
function deleteClass(elem, name) {
        var c = elem.className;
        elem.className = c.replace(name, "").replace(/   /g, " ").replace(/^ | $/g, "");
    }    
function nextImg() {
        var e;        e = document.getElementById("imgm" + actualm);
        deleteClass(e, "visible");        actualm++;
        if (actualm > total - 1) actualm = 0;        e = document.getElementById("imgm" + actualm);
        addClass(e, "visible");
    }    
var slider = setInterval(nextImg, 4000);
</script>

In der letzten Zeile des JScripts findest Du die Intervallzeit bis zum Bilderwechsel (hier 4 Sekunden = 4000 Millisekunden).

Im HTML Code steht die Quellenangabe für die Bilder, z. B. "./index_htm_files/PB1.jpg".
Die musst Du ggf. noch auf Dein Projekt anpassen, Das gilt vor allen Dingen dann, wenn Du die Bilder nicht über das Hilfsverzeichnis automatisch vom WD in das Objektverzeichnis "index_htm_files" kopieren lassen willst.

Die Projektdatei, mit der ich die Demo erstellt habe, kannst Du hier herunterladen.

Na dann: Auf ein gutes Gelingen. 👍

----------------------------------------
Edit 23:29 h

Deine Frage:

[...] Alternativ wäre es natürlich auch klasse, wenn ich eine einfache Lösung finden würden, drei verschiedene TEXTE abwechselnd in einer Schleife anzeigen zu lassen!! [...]

hätte ich fast übersehen 😜

Die Lösung dazu könnte auch für die von Dir geplante Slideshow passen. Schau' Dir mal die online Demo an.
Da siehst Du, dass mit der Methode nahezu alles machbar ist, was mit periodischen Anzeigen zu tun hat.

Wenn Du mehr wissen möchtest, lies Dir mal meinen Kommentar- und die Anleitung dazu durch, die ich vor ca. 4 Jahren verfasst habe. Das Verfahren harmoniert auch bestens mit dem aktuellen WD...

Zuletzt geändert von BeRo am 07.03.2019, 23:29, insgesamt 1-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

Christian-Stumm schrieb am 08.03.2019 um 07:46 Uhr

Hallo BeRo! DAS hört sich doch prima an und die Demo sieht auch super aus!! Auch Dein Vorschlag mit dem Text-Slider sind genial!! Ich werde Deine Vorschläge die Tage mal testen!!

Noch gestern habe ich es auch selbst geschafft, eine Slideshow, wie von Dir beschrieben, umzusetzen - zwar mit anderem Code, aber Hauptsache geschafft. Nur bin ich mit meinem Code nicht zufrieden, weshalb ich wahrscheinlich auch Deine Variante nehmen werde!!

Gruß, Christian

Christian-Stumm schrieb am 08.03.2019 um 08:05 Uhr

BeRo: WO finde ich Deine/Deinen Anleitung/Kommentar von vor fast 4 Jahren??

BilderMacher schrieb am 08.03.2019 um 08:10 Uhr

@Christian-Stumm, rufe das Profil von BeRo auf und klicke seine Kommentare durch.

Gruß, B a lderm I cher

(Ich bin KEIN MAGIX Mitarbeiter, ich bin NICHT beim MAGIX-Support!)

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

Mein System: Windows 10 Home 64Bit Build 1809 | Intel(R) Core(TM) i5-5200U CPU @ 2.20GHz | NVIDIA GeForce 840M, 4GB RAM | Vdl 2016/2019 Premium; Video Pro X7, X10, X11; Photostory Deluxe 2019 + TRAVEL Maps | MAGIX Photo & Graphic Designer 16; XARA Designer Pro X 16, Web Designer 11/16 | MAGIX Music Maker MX Premium, Music Maker 2016 Live, MAGIX Samplitude Music Studio 2017 | Samplitude Pro X4 Suite | MAGIX Audio & Music Lab 2016 Premium | Panasonic HDC-SD66 | Velbon CX-586 | Delamax Capa Videoschiene 60cm mit Velbon PH-358 Stativkopf | ZOOM H2n | Panasonic Lumix DMC-FZ300 | Focusrite Scarlett 2i2 2ndGen | Mikro: Neewer NW800

BeRo schrieb am 08.03.2019 um 08:32 Uhr

[...] WO finde ich Deine/Deinen Anleitung/Kommentar [...]

Hier kannst Du die online Demo des alten Beitrags sehen und hier findest Du den kompletten Kommentar. 😊

Gerne viel Erfolg beim Umsetzen. 👍

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

Christian-Stumm schrieb am 08.03.2019 um 19:53 Uhr

BeRo: Top Unterstützung Deinerseits!! Deinen ersten Script habe ich bereits eingebunden!! Wie kann ich beim "SliderJS" denn die Übergänge "etwas fließender" gestalten bzw. die einzelnen "Bilder" nicht so weit ineinander übergehen lassen?? Also mir wäre lieber, die Bilder weich auszublenden und die neuen weich einzublenden ohne direkte Übergänge ineinander? Experimente am Code haben wir dabei nicht geholfen... wie gesagt, bin da eher unwissend ;-)

BeRo schrieb am 09.03.2019 um 00:08 Uhr

[...] mir wäre lieber, die Bilder weich auszublenden und die neuen weich einzublenden ohne direkte Übergänge ineinander. [...]

Der CSS Transition Effekt lässt das nicht zu. Du kannst aber die Überblendzeit soweit verkürzen, dass ein weicher Übergang bestehen bleibt, ohne dass die Bilder erkennbar vermischt werden.
Das geht z. B. mit einer Überblendzeit von 0.2 Sekunden "opacity .2s linear".

<style>
    .slide {
        border: none;
        opacity: 0;
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        -webkit-transition: opacity .2s linear;
        -moz-transition: opacity .2s linear;
        -o-transition: opacity .2s linear;
        transition: opacity .2s linear;
    }
    .visible {
        opacity: 1;
    }
</style>

Mit anderen Zeiten müsstest Du experimentieren...

Wenn Dir die Code Experimente zu umständlich sind, bietet sich nach wie vor der Einsatz eines professionellen Sliders an. Für Dein Vorhaben ist neben dem schon genannten WOW Slider wohl der Amaizing Slider noch besser geeignet, weil er über eine sehr umfangreiche, konfigurierbare Überblend Bibliothek verfügt.

Schau Dir mal diese Demo an, die ich mit dem Slider gemacht habe, da wird der von Dir präferierte Effekt genutzt.

Zuletzt geändert von BeRo am 09.03.2019, 00:18, insgesamt 1-mal geändert.

Ein Klick auf den "Danke" Button (hier rechts), wäre nett. Perfekt wäre ein zusätzliches Posting mit Deiner Erfahrung zu dem/den erhaltenen Tipp(s).
Alle Forenbesucher , die mit vergleichbaren Problemen ihrer Anwendung zu kämpfen haben  und die ebenfalls auf der Suche nach einer Lösung sind, können dann besser entscheiden, ob die angebotene Lösung für das eigene Problem verwertbar ist.
Klar, dass auch der Tippgeber sich freut, wenn seine Hilfestellung mit einem Feedback belohnt wird und nicht kommentarlos ins Leere geht.

Christian-Stumm schrieb am 09.03.2019 um 08:34 Uhr

Genau so wie Deine Demo meinte ich das!! Vielen Dank!!!