Full Width Slider

Allgemeine Fragen
Benutzeravatar
bucklewhee
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 19
Registriert: Fr 18. Dez 2020, 08:57
Wohnort: Rosenheim
Kontaktdaten:

Full Width Slider

Ungelesener Beitrag von bucklewhee »

Hallo liebes Forum,

da mich der Popup-Builder nicht so recht überzeugt (oder ich ihn nicht verstehe), würde ich gerne den ganz normalen Full-Width-Slider als Popup-Gallery nutzen. Daher meine Frage: Kann man den Full-Width-Slider mit dem Bild aus einem Standard-Block auslösen? Ich habe praktisch den Block "Image with description" eingesetzt - und wenn man auf das Image klickt, soll der Full-Width-Slider geöffnet werden und eine Galerie zeigen. Genau wie Lightbox unter NOF.

Viele Grüße und Danke für die Hilfe
Stefan
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Full Width Slider

Ungelesener Beitrag von Tommy Herrmann »

Hallo Stefan,

so ganz habe ich das noch nicht verstanden.

Ein "Full-Width-Slider" zeigt ja eben schon die größtmögliche Größe des Bildes - hier ein Beispiel:

https://www.mobirise-tutorials.com/Slider.html

... oder hier:

https://www.mobirise-tutorials.com/Test ... lider.html




... dann bietet Mobirise auch noch den "WOW Slider" an (der aber immer mal wieder einige Macken hat):

https://www.mobirise-tutorials.com/WOW-Slider/



... die in NOF verwendete "Image Lightbox" kannst Du ebenso auch in Mobirise verwenden, wie erkläre ich auch auf dieser Seite von mir:

https://www.mobirise-tutorials.com/Lawy ... float.html



Vielleicht solltest Du Dir die Bildergalerie "Fotoalbum" von unserem "Werner-Zenk.de" - mit Onlineverwaltung der Bilder - auch vom Handy aus - mal ansehen:

https://www.mobirise-tutorials.com/Fotouploadalbum.php

Die Skripte dazu kann man hier beim Werner herunterladen:

https://werner-zenk.de/archiv/fotoalbum.php
Benutzeravatar
bucklewhee
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 19
Registriert: Fr 18. Dez 2020, 08:57
Wohnort: Rosenheim
Kontaktdaten:

Re: Full Width Slider

Ungelesener Beitrag von bucklewhee »

Hi Tommy,

tja, was soll ich sagen? Genau das hier habe ich gesucht. Werde ich gleich einbauen - oder zumindest versuche ich es :D

Viele Grüße
Stefan
Dateianhänge
Slider.jpg
Benutzeravatar
bucklewhee
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 19
Registriert: Fr 18. Dez 2020, 08:57
Wohnort: Rosenheim
Kontaktdaten:

Re: Full Width Slider

Ungelesener Beitrag von bucklewhee »

Ups, und natürlich: Vielen Dank
Stefan
Benutzeravatar
bucklewhee
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 19
Registriert: Fr 18. Dez 2020, 08:57
Wohnort: Rosenheim
Kontaktdaten:

Re: Full Width Slider

Ungelesener Beitrag von bucklewhee »

Sorry Tommy,
das habe ich nicht geschafft. Kannst Du mir bitte ein Kurz-Tutorial vermitteln, wie Du diese Anwendung erstellt hast. Ich bekomme das einfach nicht hin. Ich benötige keine Buttons - nur die Lightbox-Verlinkung.

Vielen Dank und Grüße
Stefan
Dateianhänge
Slider.jpg
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Full Width Slider

Ungelesener Beitrag von Tommy Herrmann »

mit welcher Mobirise-Version bist Du gerade dabei?

Ich hatte das nur in "Mobirise 4" eingebaut und muss jetzt zunächst mal den Einbau auch in "Mobireise 5" testen, bevor ich meine Anleitungen dazu geben kann.
Benutzeravatar
bucklewhee
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 19
Registriert: Fr 18. Dez 2020, 08:57
Wohnort: Rosenheim
Kontaktdaten:

Re: Full Width Slider

Ungelesener Beitrag von bucklewhee »

Hi Tommy,
ich habe die Version 5.4.1 im Einsatz. Es ist für mich aber gar kein Problem, auf eine niedrigere Version umzusteigen. Bisher ist hier auch noch nicht viel passiert.

Gruß
Stefan
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Full Width Slider

Ungelesener Beitrag von Tommy Herrmann »

Also - ich habe das gerade mal auch auf diese Testseite in v5.4.1 eingebaut (klicke auf die Schmetterlinge):

https://www.mobirise-tutorials.com/Test ... ite-Blank/

Warum mein Buchlogo als .png mit angezeigt wird, kann ich gerade nicht herausfinden. Das habe ich eigentlich in der Datei "imagelightbox.js" unterbunden :confused:


Wie Du ja vielleicht schon mitbekommen hast, gibt es ab v5.4.0 noch immer etliche Probleme, da mit "Bootstrap5" auch das "jQuery" Archiv entfällt.

Die jQuery-Datei "jquery.min.js" liegt aber immer noch im Verzeichnis der lokalen Publizierung (bei mir jedenfalls) - bitte prüfe das, denn die "Image Lightbox" (von NOF) benötigt "jQuery". Falls nicht, gib Bescheid und ich gebe Dir einen Link zum Download.

Das sollte in diesem Verzeichnis in der lokalen Publizierung und am Server liegen:

assets/web/assets/jquery/jquery.min.js

Wenn diese Datei noch verlinkt wird, dann ist der Rest genau wie in meinem Tutorial auf dieser Seite beschrieben:

https://www.mobirise-tutorials.com/Lawy ... float.html


... also dann so:

Diese CSS für die Lightbox (kannst Du natürlich beliebig anpassen) gehört bei Mobirise in die Seiteneinstellungen:

"Inside <head> code"

Code: Alles auswählen

  <!-- CSS Image Lightbox -->
  <style>
        #imagelightbox {
            position:fixed;
            z-index:9999;
            cursor:pointer;
            -ms-touch-action:none;
            touch-action:none;
        }

        #imagelightbox-overlay {
            background-color:rgba(0,0,0,.6);
            position:fixed;
            z-index:9998;
            top:0;
            right:0;
            bottom:0;
            left:0;
        }

        #imagelightbox-caption {
            text-align:center;
            color:#fff;
            background-color:#888;
            position:fixed;
            z-index:10001;
            cursor:pointer;
            left:0;
            right:0;
            bottom:0;
            padding:.625em;
            }
  </style>

Inside Head Code.JPG



Diese Verlinkungen (die erste zur jQuery-Datei) gehören in die Seiteneinstellungen:

"End of <body> code"

Code: Alles auswählen

  <!-- jquery.min.js -->
  <script src="assets/web/assets/jquery/jquery.min.js"></script>
  
  <!-- Image Lightbox -->
  <script type="text/javascript" src="./lightbox/imagelightbox.js"></script>
  <script type="text/javascript" src="./lightbox/nof-imagelightbox.js"></script>


End of Body Code.JPG



Natürlich musst Du vorher auch die beiden Dateien (kannst sie hier auch downloaden mit rechter Maustaste):

imagelightbox.js
nof-imagelightbox.js

in einem neu anzulegenden Verzeichnis "lightbox" (in der Root / Stammverzeichnis) auch mittels FTP-Programm auf den Server anlegen und im Verzeichnis Deiner lokalen Publizierung:


Verzeichnis lightbox.JPG



Achtung: das "alt" Tag eines jeden Bildes bildet im Text-Overlay den Untertitel, also z.B. alt="Bildbeschreibung" und darf bei Verwendung der Image-Lightbox nicht entfernt werden, da es sonst zu einem Lightbox-Fehler kommt (Bilder schließen nicht). Will man keinen Untertitel muss man dieses Tag leer setzen, also alt=""


und fertig.



Hinweis:

Diese "Image Lightbox" stammt übrigens nicht etwa von NOF, sondern von hier:

https://osvaldas.info/image-lightbox-re ... h-friendly
Benutzeravatar
bucklewhee
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 19
Registriert: Fr 18. Dez 2020, 08:57
Wohnort: Rosenheim
Kontaktdaten:

Re: Full Width Slider

Ungelesener Beitrag von bucklewhee »

... ich bin platt. Das funktioniert. Da wäre ich im leben nicht draufgekommen.

https://unkrautland.com/test/index.html

Jetzt müsste ich nur noch wissen, wo man einen Zielordner für die jeweiligen Galerien einbindet. Momentan gehen noch bei allen Icons die gleichen Bilder auf. Wenn Du mir das noch verraten würdest, können wir den Fall schließen.

Stefan
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Full Width Slider

Ungelesener Beitrag von Tommy Herrmann »

... jetzt habe ich Dich noch nicht verstanden. Welche Icons meinst Du und was für einen "Zielordner" :confused:

Die "Image Lightbox" zeigt ja nun (leider) sämtliche Bilder einer Seite. Wolltest Du welche aussparen, müssten die in einem anderen - nicht zugelassenen Format der Lightbox - eingebaut werden.

Die "Image Lightbox" startet immer mit dem geklickten Bild und stellt dann alle Bilder der Seite von oben nach unten dar. Man muss da also selbst eine gewisse Strategie entwickeln und vielleicht die Seite, auf der diese Lightbox angewendet werden soll, entsprechend gestalten.

Ich habe das jetzt auch mit der Lightbox nicht wirklich mehr im Kopf - das habe ich zuletzt ernsthaft in NOF eingebaut. Vielleicht wäre es auch richtiger die Lightbox-Dateien von der Autoren-Seite zu verwenden - vielleicht sind die neuer und aktualisiert. Ich verwende immer noch die ollen Dateien von NOF.
Benutzeravatar
bucklewhee
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 19
Registriert: Fr 18. Dez 2020, 08:57
Wohnort: Rosenheim
Kontaktdaten:

Re: Full Width Slider

Ungelesener Beitrag von bucklewhee »

Naja, ich wollte halt das hier machen:
https://cleon-studios.de/
Ist doch eigentlich nichts besonderes.

Stefan
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Full Width Slider

Ungelesener Beitrag von Tommy Herrmann »

Ja, das ist doch aber eine ganz andere Lightbox. Da gibt es ja Dutzende von Varianten zu.

Ich habe auch in Mobirise z.B. die ganz alte und originale "Lytebox" (noch von Markus F. Hay) eingebaut:

https://www.mobirise-tutorials.com/Lytebox.html

... oder auch die alte "Visual Lytebox" (von den Machern von Mobirise):

https://www.mobirise-tutorials.com/Busi ... htbox.html

Diese Skripte gibt es aber eigentlich nicht mehr, da sie Jahre alt sind. Da gibt man dann genau die Bilder an, die hinter einem angezeigten Bild als Slider-Show erscheinen sollen.

Die alte "Visual Lightbox" gibt es sogar noch (wieder) - eine ganze Zeit wurde diese Seite zu "Mobirise" umgeleitet:

http://visuallightbox.com/
Benutzeravatar
bucklewhee
Mitglied (Level 2)
Mitglied (Level 2)
Beiträge: 19
Registriert: Fr 18. Dez 2020, 08:57
Wohnort: Rosenheim
Kontaktdaten:

Re: Full Width Slider

Ungelesener Beitrag von bucklewhee »

Na, dann klärt sich das ja auf.
Ich sage auf jeden Fall wieder einmal herzlichen Dank für die Mühen. Hast Dich wirklich ins Zeug gelegt.

Viele Grüße und bis bald
Stefan
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 5744
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Full Width Slider

Ungelesener Beitrag von Tommy Herrmann »

... übrigens bin ich, durch diese Umleitung, erst auf Mobirise aufmerksam geworden.

Die Lightbox, die Mobirise jetzt in der Software verwendet, ist eigentlich die "Visual Lightbox".

... hier einige Beispiele - die Lightbox ist die Anwendung, bei der man die Thumbnails anklickt und dann die Slider-Galerie aufpoppt:

https://www.mobirise-tutorials.com/Test ... ware-Ende/


Lightbox.jpg
Antworten

Wer ist online?

Mitglieder in diesem Forum: Bing [Bot] und 27 Gäste