Mobirise-Böcke-Webdesign-Homepage erstellen, agentur28 in Bremen Mobirise-Böcke-Webdesign-Homepage erstellen, agentur28 in Bremen
Webdesign Homepage erstellen, Bremen

agentur 28 
No Codingblöcke von Mobirise

Veränderte und neu erstellte Standardblöcke von Mobirise,
die keinen Eingriff in HTML/CSS erfordern

Demo: VIDEOGALERIE MIT POPUP - SORTIERBAR




1. Bis zu 30 Karten mit Bildern können Sie hinzufügen. Bevorzugte Bildgröße Breite sollte mindestens 400px oder je nach Anzahl der verwendeten Spalten sein. Versuchen Sie, eine geringe Dateigröße zu verwenden, z. B. 20kb oder maximal 50kb, um die Belastung der Seite zu reduzieren. Eine Überladung der Seite mit großen Dateien kann zu einer Verlangsamung oder einem Hänger führen.

2. Wenn Sie die Funktion "Objekt einpassen" nicht verwenden, benutzen Sie bitte ein Thumbnail mit den gleichen Proportionen.

3. 3. Um jeder Karte eine Kategorie zuzuordnen, wählen Sie die Kategorie entsprechend aus, damit die Sortierfunktion korrekt gemäß der Schaltflächen-ID funktioniert.

4. Die Farbänderung für ALLE Schaltflächen wird beim Veröffentlichen korrekt funktionieren.

5. Installieren Sie die neueste Version des Themas Dentaura M4 von der Website m.dentaura.co.in, um die erforderlichen Dateien zur Ausführung der Funktionen im Block zu erhalten.

6. Der Videoblock funktioniert in Kombination mit einem Popup-Block. Speichern Sie in den Benutzerblöcken und ziehen Sie so viele Popups wie nötig und verlinken Sie sie.

7. Der Bildwechsel und die Verknüpfung mit dem Popup-Block kann durch Anklicken des jeweiligen Kartenbildes erfolgen.

8. Sie sollten eine aktive Lizenz von Mobirise haben, damit das Popup funktioniert.

9. Wenn die Sortierfunktion verwendet wird. Bitte fügen Sie nicht mehr als einen Block auf derselben Seite hinzu, um Konflikte zwischen den Sortierfunktionen zu vermeiden. Entweder Youtube & Vimeo oder selbst gehostete Videos sollten in einem Block verwendet werden. Youtube & vimeo Videos können zusammen in einem Block verwendet werden.

10. Wenn ein selbst gehostetes Video verwendet wird, muss ein entsprechendes Javascript im Abschnitt "End of code" in den Seiteneinstellungen hinzugefügt werden, je nachdem, ob Autoplay verwendet wird oder nicht. Separate Javascripts zum Hinzufügen werden zur Verfügung gestellt. In einem Block sollten alle selbst gehosteten Videos entweder Autoplay "on" oder "off" sein, wobei einheitliche Einstellungen beibehalten werden.

11. Wenn youtube- oder vimeo-Videos verwendet werden, ist es zwingend erforderlich, das entsprechende Javascript im Abschnitt "Ende des Codes" in den Seiteneinstellungen hinzuzufügen, je nachdem, ob Autoplay verwendet wird oder nicht. Separate Javascripts zum Hinzufügen werden zur Verfügung gestellt. In einem Block sollten alle youtube- oder vimeo-Videos unter Beibehaltung einheitlicher Einstellungen entweder autoplay "on" oder "off" sein.
12. 12. Speichern Sie den bereitgestellten Beispiel-Popup-Block in Benutzerblöcken und fügen Sie sie der Seite je nach Anzahl der benötigten Popups hinzu. Klicken Sie auf das Thumbnail-Bild im Galerie-Block, um das Thumbnail-Bild und den Link zum jeweiligen Popup-Block zu ändern.


Scriptverwendung



Im Abschnitt "Ende des <body> Codes" in den Seiteneinstellungen muss folgendes Javascript hinzugefügt werden
Wenn selbst gehostetes Video verwendet wird und alle Videos Autoplay aktiviert haben. Verwenden Sie folgendes Javascript
-----------------------------------------------------------------------------------------------------------------------------------------------------
<script>
  $('.modal').on('show.bs.modal', function(e) {
    var $v = $(e.delegateTarget).find('video');
    $v[0].play(); // [0] verwenden, da jQuery eine Liste zurückgibt
  });
  $('.modal').on('hide.bs.modal', function(e) {
    var $v = $(e.delegateTarget).find('video');
    $v[0].pause(); // [0] verwenden, da jQuery eine Liste zurückgibt
  });
</script>
-----------------------------------------------------------------------------------------------------------------------------------------------------

Wenn ein selbst gehostetes Video verwendet wird und das Autoplay für alle Videos nicht aktiviert ist. Verwenden Sie folgendes Javascript
<script>
  $('.modal').on('hide.bs.modal', function(e) {
    var $v = $(e.delegateTarget).find('video');
    $v[0].pause(); // [0] verwenden, da jQuery eine Liste zurückgibt
  });
</script>
-----------------------------------------------------------------------------------------------------------------------------------------------------

Wenn ein youtube/vimeo-Video im Block verwendet wird und das Autoplay für alle Videos nicht aktiviert ist. Verwenden Sie folgendes javascript
<script>
    $(function(){
        $('.modal, .close').click(function(){
            $("iframe").each(function() {
                var src= $(this).attr('src');
                $(this).attr('src',src);
            });
        });
    });
</script>
-----------------------------------------------------------------------------------------------------------------------------------------------------

Wenn ein youtube/vimeo-Video im Block verwendet wird und alle Videos Autoplay aktiviert haben. Verwenden Sie folgendes Javascript
<script>
$(function(){
  $('.modal').on('shown.bs.modal', function (e) {
    $iframe = $(this).find("iframe");
    $iframe.attr("src", $iframe.attr("src"));
  });
  $('.modal').on('hidden.bs.modal', function (e) {
    $iframe = $(this).find("iframe");
    $iframe.attr("src", $iframe.attr("src"));
  });
});
  </script>
-----------------------------------------------------------------------------------------------------------------------------------------------------

V0rbereitungen

Sie müssen das Video auf Ihren Server kopieren. Erstellen Sie dazu ein Verzeichnis mit dem Namen video. Öffnen Sie die Datei und speichern Sie Ihr Video dann in diesem Verzeichnis. Dann kopieren Sie den kompletten Pfad und fügen diesen in Video Types & Url ein
----------------------------------

Verfahren Sie gleichermaßen für Ihr Videovorschaubild
(Poster/Thumnail Url. ) Das Bild, das gezeigt werden soll, muss im MBR-Ordner assets/images vorhanden sein.
Laden Sie dieses Bild vorher hoch (einfach lokal publizieren).
Der Pfad sieht dann z.B  so aus:
 /dtp-mobirise/assets/images/saal-593x395.jpg


EINSTELLBARE  ZAHNRADFUNKTIONEN

Verantwortlich für die Idee und Umsetzung:

Idee/Beauftragung
agentur28
Claus Juntke
agentur28@online.de ⇲
www.agentur28.de ⇲

Programmierung:
DENTAURA.COM
12/262-A, Kerala
Indien - 689614
dentaura@gmail.com
https://www.dentaura.com

Sie können diesen Block kaufen



Adresse
  • Birkenweg 25
  • 28865 Lilienthal
  • 04298 - 69 70 42
  • 0152 295 60 563
  • agentur28@online.de

  • © 2004 - 2021  |  C. Juntke