Image Float mit Lightbox und Marquee

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

Unten eine eigene Bildergalerie, die ich hier beschreibe.
Den Fullscreen-Hintergrund beschreibe ich hier.

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="http://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" erststellt.

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.


Bemerkung zum Fullscreen Hintergrundbild

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',


Image Lightbox mit Mobirise Block

Mobirise Original Bild

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.

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:


@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;