Teammitglieder online
Support-Box
Neue Beiträge seit dem letzten Besuch.
Textbausteine des MODERATIONSTOOL
AB > PFAD > GENERATOR
FORUM > PFAD > GENERATOR
Unterstützung Lösungs-Probleme
Auffällige
User
Der Runde
Tisch
HÄUFIG GESTELLTE FRAGEN
Regeln und nützliche Hinweise
Neueste Themen
»  Missbrauchsmeldung "Sexueller Inhalt" war (wieder) Werbung/Spam/Scam
von Joost Gestern um 18:02

» Forum löschen, Probleme mit Gründeraccount
von Igazus Gestern um 17:57

» Zugangsdaten vergessen/verloren
von Joost Sa 16 März 2024 - 21:07

» PN's werden nicht mehr rot eingefärbt
von Ray Sa 16 März 2024 - 16:41

» Schwierigkeiten mit BBCode
von Skouliki Fr 15 März 2024 - 11:51

» Entdeckt die neue Option Servimg Premium
von Joost Mi 6 März 2024 - 19:50

» Neues YAMAHA XT660-Forum
von gnadenlos Fr 1 März 2024 - 7:33

» Forum nur noch für Eingeloggte sichtbar?
von Skouliki Di 27 Feb 2024 - 7:53

» [phpBB3] Eine Frage zum Forum selbst.
von Skouliki Di 27 Feb 2024 - 7:52

» Beiträge verschwinden
von Skouliki Do 22 Feb 2024 - 7:47

» [Tutorial - alle Versionen] (De)aktiviert die Anzeige von Signaturen aus Eurem Profil
von Eto Do 15 Feb 2024 - 22:17

» Datenback-Dump?
von Skouliki Mo 12 Feb 2024 - 22:02

» Einloggen nicht mehr möglich [erbitte schnelle Rückmeldung!]
von Skouliki Mo 12 Feb 2024 - 8:15

» Neuer User kann sich anmelden.
von Joost So 11 Feb 2024 - 18:06

» [phpBB3] Suchfunktion ohne Funktion
von Joost Sa 10 Feb 2024 - 19:38

» Die Sturmkriger (WaCa) mit Punktesystem
von Rama Di 6 Feb 2024 - 18:49

» Style funktioniert nicht
von Joost So 4 Feb 2024 - 16:50

» Vergabe von Auszeichnungen
von Eto Sa 3 Feb 2024 - 20:13

Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Joost in Entdeckt die neue Option Servimg Premium
( 2 )


» Beitrag von Skouliki in Beiträge verschwinden
( 1 )


» Beitrag von Skouliki in Beiträge verschwinden
( 1 )


» Beitrag von Skouliki in Beiträge verschwinden
( 1 )


» Beitrag von Skouliki in Forum nur noch für Eingeloggte sichtbar?
( 1 )


[Tutorial] Forenbanner in eine Diaschau verwandeln

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Tutorial [Tutorial] Forenbanner in eine Diaschau verwandeln

Beitrag von inde So 28 Mai 2017 - 16:24

Forenbanner in eine Diaschau verwandeln
[Alle Versionen]
TUTORIAL

Dieses Tutorial verwandelt das Forenbanner in eine Diaschau, sodass mehrere Banner angezeigt werden können.
[Tutorial] Forenbanner in eine Diaschau verwandeln Banner10
Das verwendete Script sowie deren Anleitung gilt für alle Versionen von Forumieren, inklusive ModernBB.


Hinweise und Tipps

Erstellt zuerst alle Grafiken und achtet darauf dass diese alle die selbe Größe bzw. Abmaße haben. Dies ist besonders wichtig da ansonsten nach dem Einsetzen des Scripts die Höhe des Headers variieren würde und dadurch der Lesefluss im Forum gestört wäre.


Eintrag des ersten Banners vornehmen

Setze die erste Grafik/das erste Banner in der Bilderverwaltung ein.
Administration-Bereich > Anzeige > Bilder und Farben > Bilderverwaltung > Fortgeschr. Methode Fortgeschrittener Modus > Allgemein / Navigation > Logo des Forums
Kontrolliert nach dem Absenden eure Startseite ob das Banner angezeigt wird.


Beispiel des Scripts für ein zweites und drittes Banner

Hier ein Beispielcode für ein Script, welches dann z.B. einen zweiten und dritten Banner beinhalten würde.
Code:
(function() {
          var BannerRotator = {
            images : [
              'https://i58.servimg.com/u/f58/18/46/78/72/foren-10.png',
              'https://i58.servimg.com/u/f58/18/46/78/72/foren-11.png'
            ],
       
            start_delay : 5000,
            duration : 5000,
            height : 'auto',
       
            fade_image : true,
            fade_speed : 1200,
         
            keep_initial : true,
            remember_position : true,
            preload : true,
       
            // Technische Daten für die Darstellung
            index : -1,
            logo : null,
         
            // Einbinden der Grafik nach Verzögerung
            next : function(ms) {
              if (ms === undefined) ms = FA.BannerRotator.duration;
       
              window.setTimeout(function() {
                if (++FA.BannerRotator.index >= FA.BannerRotator.images.length) FA.BannerRotator.index = 0; // Zurücksetzen, wenn die Länge der angezeigten Grafiken überschritten wird
                if (FA.BannerRotator.remember_position) my_setcookie('fa_banner_index', FA.BannerRotator.index); // Erinnerung an das letzte Banner
             
                // Ein- und Ausblenden der Grafiken
                if (FA.BannerRotator.fade_image) {
                  $(FA.BannerRotator.logo).fadeOut(FA.BannerRotator.fade_speed, function() {
                    FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index]; // Einsetzen der nächsten Grafik
                    $(this).fadeIn(FA.BannerRotator.fade_speed, FA.BannerRotator.next); // Verblassen beim Ein- und Ausblenden
                  });
                }
       
                // Zufällige Darstellung
                else {
                  FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index];
                  FA.BannerRotator.next();
                }
              }, ms);
            },
         
            // Erste Inbetriebnahme und einige andere Einstellungen
            init : function() {
              var logo = document.getElementById('i_logo') || document.getElementById('logo') || document.getElementById('pun-logo'),
                  index = my_getcookie('fa_banner_index');
               
              if (logo) {
                FA.BannerRotator.logo = logo.tagName == 'IMG' ? logo : logo.firstChild;
                FA.BannerRotator.logo.style.height = FA.BannerRotator.height;
             
                if (FA.BannerRotator.keep_initial) FA.BannerRotator.images[FA.BannerRotator.images.length] = FA.BannerRotator.logo.src;
                if (FA.BannerRotator.remember_position && index) {
                  FA.BannerRotator.index = +index;
                  FA.BannerRotator.logo.src = FA.BannerRotator.images[FA.BannerRotator.index] || FA.BannerRotator.images[0];
                }
             
                FA.BannerRotator.next(FA.BannerRotator.start_delay);
              } else if (window.console && window.console.warn) {
                console.warn('Die Foren-Version ist für dieses Plugin nicht optimiert.');
              }
            }
          };
       
          if (!window.FA) FA = {};
          if (!FA.BannerRotator) {
            FA.BannerRotator = BannerRotator;
         
            if (FA.BannerRotator.preload) {
              for (var i = 0, j = FA.BannerRotator.images.length, img; i < j; i++) {
                img = document.createElement('IMG');
                img.src = FA.BannerRotator.images[i];
              }
            }
         
            $(FA.BannerRotator.init);
          }
        }());


Anpassung des Scripts für euer Forum

Am Anfang des Scripts befinden sich einige Möglichkeiten noch individuelle Einstellungen vorzunehmen.

images: Am Anfang des Skripts befindet sich ein Bereich mit Grafiken, die nach einer bestimmten Zeitspanne angezeigt werden. Ihr könnt an der Stelle noch mehr Grafiken hinzufügen, solange jede Bild-URL durch ein Komma getrennt ist. Nach der letzten URL entfällt das Komma
Derzeit sieht es so aus:
Code:
images : [
  'https://i58.servimg.com/u/f58/18/46/78/72/foren-10.png',
  'https://i58.servimg.com/u/f58/18/46/78/72/foren-11.png'
],
Wenn ihr weitere Banner der Diaschau hinzufügen möchtet, dann muss jeweils der Bild-URL ein Komma hinzufügt werden. Bei der letzten URL entfällt das Komma. Die Adressen werden jeweils zwischen den Apostrophen eingefügt.
Code:
images : [
  'https://i58.servimg.com/u/f58/18/46/78/72/foren-10.png',
  'https://i58.servimg.com/u/f58/18/46/78/72/foren-11.png',
  'DEINE BILD-URL-FÜR-EIN-WEITERES-VIERTES-BANNER'
],


Start_delay: Definiert die Startverzögerung in Millisekunden (ms), bevor das Standard-Banner gewechselt wird. Wenn auf 0 gesetzt, wird das nächste Banner in der Diaschau sofort angezeigt.
Beispiel: Wird 5000 eingesetzt, dann muss auch die Zeit dafür abgewartet werden bis das nächste Banner angezeigt wird.


Duration: Definiert die Dauer in Millisekunden, welches jedes Banner angezeigt wird. Standardmäßig wird jedes Banner für 5 Sekunden angezeigt.
Wert: 5000 Auch hier können Veränderungen an den Einstellungen vorgenommen werden, um die Banner für einen längeren oder kürzeren Zeitraum anzeigen zu lassen.


Height: Definiert eine Standardhöhe für alle Bilder in der Diaschau. Die verwendete Maße können px, em,%, etc. sein. Standardmäßig ist der Wert auf automatisch gesetzt. auto
Es empfiehlt sich Bilder von denselben Abmessungen zu verwenden, da Bilder von verschiedenen Größen zum Springen der Seiten führen würden. Verwendet diese Option, um eine Standardhöhe festzulegen, falls eure Grafiken doch eine abweichende Höhe haben.


Fade_image: Wenn auf true gesetzt, werden die Bilder Ein- und Ausgeblendet.
Einstellung der Option auf false deaktiviert den Fade-Effekt.


Fade_duration: Definiert wie schnell der Fade-Effekt in Millisekunden sein soll.
Beispiel: 1200 = 1,2 Sekunden Fading in und out. So ist die gesamte Fade-Dauer immer der Wert den ihr wählt, multipliziert mit 2.
Rechnung: 1200 * 2 = 2400 - Somit gleich 2,4 Sekunden.


Keep_initial: Wenn die Option true aktiviert ist, wird der Standard-Banner behalten und auch der Diaschau hinzugefügt.
Setzt die Option auf false, wenn ihr das Standard-Banner aus der Diaschau entfernen möchtet.


Remember_position: Wenn die Option true aktiviert ist, erinnert sich das Script (bzw. der Browsercache) an das letzte Banner beim Besuch einer Seite im Forum bzw. beim wechseln der Seiten.
Setzt ihr die Option auf false startet die Diaschau jedes Mal neu.


Preload: Wenn die Option true aktiviert ist, werden alle Bilder im Script auf der Seite vorgeladen. Dies kann dazu beitragen das Springen der Seite zu verhindern. Wenn ihr es nicht möchtet, dass die Bilder vorgeladen werden, dann schaltet diese Option durch den Eintrag false einfach aus.


Installieren des Scripts

Das Script wird installiert im...
Administrations-Bereich > Module > HTML und JAVASCRIPT > Javascript Codes Verwaltung

  1. Falls noch nicht geschehen, bitte noch "Die Javascript-Code Verwaltung aktivieren", durch einen Klick auf den Radiobutton "Ja" und danach auf "ABSENDEN". Absenden
  2. Nun klickt auf "EIN NEUES JAVASCRIPT ERSTELLEN".
  3. Titel: Banner-Rotator
  4. Platzierung: Auf allen Seiten
  5. Bei "Javascript Code" den bearbeiteten Code einsetzen.



Wir hoffen, euch gefällt dieses Tutorial! Smile

Euer Team von Forumieren king
avatar
inde
Admin a.D.
Admin a.D.

Männlich Beiträge : 5658
Anmeldedatum : 20.10.11
keine
Mozilla Firefox phpBB3

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben

- Ähnliche Themen

 
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten