Image Float mit Lightbox und Marquee

Bilder mit Image-Lightbox im Fließtext mit CSS "float" und eine Laufschrift darstellen
sowie eine einfache Slideshow

Unten eine eigene Bildergalerie, die ich hier beschreibe.


Alle Bilder aller Blocks auf dieser Seite werden durch Klick in einer Lightbox dargestellt, die lediglich durch ein kleines JavaScript hier aktiviert wurde.
Enten
Libelle
Luchs
Frucht
Fliege
Kiefernnadeln

Bild innerhalb eines Fließtextes mit 'float' darstellen, klicke auf das Bild für Lightbox.

Das Mobirise Programm kann Ihnen helfen, die Zeit für die Entwicklung Ihrer Website zu sparen, indem es einen flexiblen Website-Editor mit einem drag-and-drop Interface zur Verfügung stellt. Spatz auf Ast Mobirise Website-Baukasten lässt Sie responsive und Mobile-freundliche Websites mit ein paar Klicks erstellen. Mobirise ist eins der einfachsten Tools für die Website-Entwicklung, die es heute gibt . Es ermöglicht Ihnen auch so viele Websites zu erstellen, wie Sie möchten und das im Angesicht der Tatsache, dass es eine Desktop-App ist.Das Mobirise Programm kann Ihnen helfen, die Zeit für die Entwicklung Ihrer Website zu sparen, indem es einen flexiblen Website-Editor mit einem drag-and-drop Interface zur Verfügung stellt. Bild Mobirise Website-Baukasten lässt Sie responsive und Mobile-freundliche Websites mit ein paar Klicks erstellen.

Spatzen auf Ast


Die Bilder habe ich mit einem absoluten Link auf ein Bild dargestellt und mit seinem Tag an beliebiger Stelle in den Text eines einfachen Textblocks eingefügt. Die Bilder sind hier auf 50% der Section-Breite verkleinert und werden in der Lightbox dann in ihrer Originalgröße dargestellt, bzw. auf maximale Displaygröße.


Die Bilder können auch in der Lightbox rechts oder links angeklickt werden, um auf das nächste oder vorherige Bild zu kommen. Das hier verwendete Image-Tag ist:

<img src="https://www.mobirise-tutorials.com/LawyerM4-Tutorials/images/Spatz-Hinten.jpg" alt="Bildbeschreibung" title="Spatzen">

Achtung: das "alt" Tag 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=""

Die Größe der Bilder ist egal, das Skript wird die Bilder maximal auf die Displaygröße anzeigen. Hier ist z.B. das untere Bild mit den beiden Spatzen in einer Original-Größe von 1800 x 1200 Pixeln am Server.


Die CSS habe ich in den "CSS Editor" eingefügt:

img {
  float: right; 
  width: 50%;
  padding: 20px; 
}


Image Lightbox am Bild

Weiterhin habe ich die alte NOF "Image-Lightbox" für das Bild eingebaut (klicke auf das Bild mit dem Spatzen). Auf meiner NOF-Tutorialseite findet Ihr die CSS, die ich hier in den Bereich "Inside <head> code" der Seiteneinstellungen kopiert habe:

<!-- CSS Image Lightbox aus den NetObjects Fusion Skripten -->
<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>


Auf meiner NOF-Tutorialseite könnt Ihr Euch auch die beiden JS-Dateien downloaden

Die Links zu den JS-Dateien gehören in Mobirise in der Bereich "End of <body> code" der Seiteneinstellungen.

<script type="text/javascript" src="./lightbox/imagelightbox.js"></script>
<script type="text/javascript" src="./lightbox/nof-imagelightbox.js"></script> 

Kopiert diese beiden Dateien zunächst mit dem FTP-Programm auf Euren Server und auch in das Verzeichnis der lokalen Publizierung, um das schon lokal testen zu können. Ich habe hierfür, wie oben im Link zu erkennen, ein Verzeichnis "lightbox" erstellt.

Diese Skripte sind so aufgebaut, dass sie automatisch jedes dort angegeben Bildformat erkennen und diese Bilder dann alle über die Lightbox geöffnet werden und mehrere Bilder auch als Dia-Show angesehen werden können.

Weitere Infos auch auf der Seite vom Urheber osvaldas.info dieser Image-Lightbox.


Bemerkung zum Fullscreen Hintergrundbild - steht nicht mehr zur Verfügung

Damit das hier vom Fullscreen-Hintergrund Skript "backstretch.js" angegebene Bild nicht auch gefunden wird und es dadurch zu einem Fehler im Lightbox-Skript kommen würde, habe ich hier für den Hintergrund des Tropfen-Bildes das Format .png gewählt und dieses Format im Skript "imagelightbox.js" in Zeile 58 entfernt. So werden nur noch die Formate .jpg, .jpeg und .gif gefunden. Also die Zeile 58 entsprechend so geändert:

allowedTypes: 'jpg|jpeg|gif',

Die Option der Auswahl des Bild-Typs steht leider mit dem neueren Script der "Image Lightbox" aus dem Jahr 2018 nicht mehr zur Verfügung und das Script funktioniert daher auch nicht im Zusammenhang mir der "backstretch.js", insofern habe ich diesen Hintergrund auf dieser Seite entfernt.


Animierte Slideshow nach mediaevent.de

Hier habe ich 2 Bilder nebeneinander gestellt, die nicht umbrechen sondern in jeder Displaygröße nebeneinander stehen bleiben. Das linke Bild ist mittels CSS in einer Grauskala dargestellt. Bei Mausüber wird das Bild farbig und kann auch in der Lightbox geöffnet werden.

Den rechten Bildbereich habe ich mit einer einfachen Diashow von vier unterschiedlichen Bildern versehen, die hier alle 5 Sekunden wechseln.


Fliege

Tutorial zum animierten Slider


Hier mein JavaScript als Beispiel. Das Skript gehört in den "Seiteneinstellungen" in den Bereich "End of <body> code":

<!-- Simple SlideShow Script -->
<script> 
    var simpleSlides = function () { 
        var i; 
        var slides = document.querySelectorAll(".slides"); 
        for (i = 0; i < slides.length; i++) { 
          slides[i].setAttribute("style","display:none"); 
        } 
        count++; 
        if (count > slides.length) { count = 1; } 
        slides[count-1].setAttribute("style","display:block"); 
        setTimeout(simpleSlides, 5000); // Bildwechsel hier alle 5 Sekunden 
    } 

    var count = 0; 
    simpleSlides(); 
</script>


Hier meine CSS. Diese CSS könnt Ihr natürlich beliebig anpassen. Kopiert sie in den "Code Editor" in den Bereich "CSS Editor" desjenigen Blocks, in dem Ihr das einbaut. Ich habe hier einen ganz einfachen Textblock aus dem Bereich "Articles" verwendet. Die angegebene Breite (width) von 50% bezieht sich jeweils auf die Breite des Blocks. Ich habe also jedem Bild 50% der vorhandenen Breite gegeben, egal bei welcher Displaygröße.

.slides {
  display: none; 
  width: 50%; 

.animate-left { 
  position: relative; 
  animation: animateleft 1.2s; 

@keyframes animateleft { 
  from { 
    left: -50%; 
    opacity: 0; 
  } 
  to { 
    left: 0; 
    opacity: 1; 
  } 


// unten noch meine zusätzliche CSS für das Einzelbild 

img { 
  width: 50%; 
  padding: 5px; 


.bildlinks { 
  float: left; 
  cursor: pointer; 
  filter: grayscale(1); 
  -webkit-filter: grayscale(1); 

.bildlinks:hover { 
  filter: none; 
  -webkit-filter: grayscale(0); 
}


... und schließlich noch die Anzeige der Bilder, die ich hier mit einer absoluten URL versehen und bereits vorher auf meinen Server kopiert habe, da ja Mobirise von solchen händisch eingebauten Bildern nichts weiß würde es bei einem relativen Link zu einer Fehlermeldung beim Publizieren kommen. Diesen Bereich habe ich in diesen einfachen Textblock kopiert, dort wo sich der Beispieltext befand.

<div class="simpleSlides">
  <img class="bildlinks" src="http://www.mobirise-tutorials.com/LawyerM4-Tutorials/images/Fliege.jpg" alt="Fliege" title="Fliege (klick)"> 
  <img class="slides animate-left" src="http://www.mobirise-tutorials.com/LawyerM4-Tutorials/images/Libelle.jpg"> 
  <img class="slides animate-left" src="http://www.mobirise-tutorials.com/LawyerM4-Tutorials/images/Kiefer.jpg"> 
  <img class="slides animate-left" src="http://www.mobirise-tutorials.com/LawyerM4-Tutorials/images/Luchs.jpg"> 
  <img class="slides animate-left" src="http://www.mobirise-tutorials.com/LawyerM4-Tutorials/images/Spatz-Hinten.jpg"> 
</div> 

Image Lightbox mit Mobirise Block

Diese von mir hier zusätzlich eingebaute "Image-Lightbox" wirkt auch bei allen Mobirise-Blöcken und Galerien ohne zusätzliches Coding.

An diesem Bild wurde nichts zusätzlich kodiert, lediglich das "alt" Tag habe ich bearbeitet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi eaque quos, nulla maxime quaerat ab non maiores, temporibus earum adipisci expedita nesciunt similique sunt omnis quisquam odit voluptatem quis culpa.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla corrupti assumenda delectus blanditiis odio optio modi reprehenderit, sint excepturi, vero debitis non odit eaque deleniti, tempora nobis ut soluta inventore!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni repudiandae sequi placeat ea minus excepturi, minima quam. Quod enim sed nisi itaque error optio nostrum ducimus, sunt, illo, repellendus rerum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque quidem eaque autem quisquam et, modi in soluta debitis iste dicta ex ab consequuntur non quas placeat! Itaque a ad, eius.

Text linksbündig, Preise rechtsbündig mit "float: right;"

 Siehe auch dieses Beispiel mit vorangestellten Punkten.

<p>01. Insalata Mista -gemischte grüne Salate mit Tomaten, Gurken, Zwiebeln<span style="float: right;"><b>7,50 €</b></span></p>

01. Insalata Mista -gemischte grüne Salate mit Tomaten, Gurken, Zwiebeln7,50 €

02. Chicken Walnut Salat, verschiedene Blattsalate mit kalten Hähnchenbruststreifen, Walnüssen und Apfelspalten12,50 €

03. Ensalada de la Casa, riesige Tacoschale gefüllt mit Blattsalat, Mais, Tomaten, Gurken, Paprika, geriebenen Käse1,50 €

Laufschriften - CSS Ticker - Marquee

Kontinuierliche Laufschrift hier

Diese Laufschrift bewegt sich von rechts nach links und stoppt bei Mausüber. Marquee Laufschrift in NOF.


Dem <p> Tag habe ich die class="marquee" gegeben, die ich im Bereich "CSS Editor" eingetragen habe. Diese Laufschrift wird durch die CSS3 "animation" Eigenschaft bewegt:


@keyframes marquee {
  0% { 
    text-indent: 800px; 
  } 
  100% { 
    text-indent: -800px; 
  } 
}

.marquee { 
  width: 100%; 
  margin: auto; 
  padding: 2px; 
  overflow: hidden; 
  white-space: nowrap; 
  border: solid 1px #CCCCCC; 
  border-radius: 5px; 
  box-shadow: 2px 2px 3px #999999; 
  animation: marquee 20s linear infinite; 

.marquee:hover { 
  animation-play-state: paused; 
  cursor: wait;

Marquee Laufschrift - Block aus dem Thema "ArtM4"

Unten als Beispiel der fertige Block "Marquee" aus dem Mobirise Thema "ArtM4", den Ihr dort in der Rubrik "Article" findet. Hier habe ich die Farbe von Weiß (#ffffffzum Testen in Rot (#ff0000) und Blau (#0000ff) geändert. Das sollte man direkt im "Code Editor" im Bereich "CSS Editor" an der class="MARQUEE" tun:

MARQUEE {
  color: #ff0000;
}

Weiterhin habe ich hier noch diese JavaScript-Anweisung in das Tag <marquee> geschrieben, damit die Laufschrift bei Mausüber stoppt:

onmouseover="this.stop();" onmouseout="this.start();"


Beispiel zu einer kontinuierlichen Laufschrift mit CSS3 transform property   bei der kein leerer Zwischenraum entsteht.

Diese Laufschrift ist als fertiger Block unter der Rubrik 'Article' im Mobirise-Thema 'ArtM4' vorhanden. Hier habe ich noch eine JavaScript-Anweisung hinzugefügt, um bei Mausüber die Animation zu stoppen. Man kann auch hier im Code-Editor das Attribut 'direction' auf 'right' oder 'left' stellen, sodass sich die Laufschrift in unterschiedliche Richtungen bewegt. Natürlich kann man hier auch ganz normal einen Link setzen.
Diese Laufschrift ist als fertiger Block unter der Rubrik 'Article' im Mobirise-Thema 'ArtM4' vorhanden. Hier habe ich noch eine JavaScript-Anweisung hinzugefügt, um bei Mausüber die Animation zu stoppen. Man kann auch hier im Code-Editor das Attribut 'direction' auf 'right' oder 'left' stellen, sodass sich die Laufschrift in unterschiedliche Richtungen bewegt. Natürlich kann man hier auch ganz normal einen Link setzen.