Visual Lightbox

Hier als Beispiel die alte Visual Lightbox Version 5.4 und Version 6.1 in Mobirise eingebaut

Die Diashow läuft entweder automatisch
oder auch bei Mausüber manuell an den Symbolen

Demo

Hier noch ein Beispiel, das mit der Visual Lightbox 6.1 erstellt wurde

Die Galerie oben mit Textlink starten

Klicke hier zur Galerie oben

Einbau der Visual Lightbox

Siehe zum besseren Verständnis mein altes

Tutorial zur Visual Lightbox

Dort findet Ihr Links zum Download der Anwendung und viele Tipps.

Hier beschreibe ich nur die erste Galerie "Afrika" mit den 5 Thumbnails.
Für das einzelne Thumbnail siehe auch mein Video unten an.

Video
Hier die generierte "Head Section" der Visual Lightbox, die in den Bereich "Inside <head> code" der Seiteneinstellungen gehört.
Ich habe hier den Inhalt der ersten CSS-Datei "vlightbox1.css" direkt in den "Code Editor" in den Bereich "CSS Editor" von Mobirise kopiert und diesen Link im Head entfernt, damit die Anzeige meiner Thumbnails auch in der Arbeitsseite von Mobirise bereits korrekt dargestellt wird.
Setzt bei Bedarf den z-index der ID-Definition "#vlb1lightbox" in der zweiten CSS-Datei "visuallightbox.css" der Galerie von 200 auf 2000, damit die Box nicht hinter der Mobirise-Navi verschwindet.
Unten alle nötigen Dateien, 1. und 2. CSS-Projektdatei und auch die alte jQuery-Datei, vom <head> Bereich:
<!-- Start VisualLightBox.com Head section -->
<link rel="stylesheet" href="index_files/vlb_files1/vlightbox1.css" type="text/css">
<link rel="stylesheet" href="index_files/vlb_files1/visuallightbox.css" type="text/css" media="screen">
<script src="index_files/vlb_engine/jquery.min.js" type="text/javascript"></script>
<!-- Ende VisualLightBox.com Head section -->
Diese drei JavaScript-Dateien gehören in den Bereich "End of <body> code" der Seiteneinstellungen, wobei die beiden oberen Dateien bei der Visual-Lightbox in der "VisualLightBox.com BODY section" stehen. Dort dürfen sie aber bei Mobirise nicht stehen, da JavaScript nicht im Code Editor erlaubt ist und beim Generieren der Seite von Mobirise gelöscht wird:
<script src="index_files/vlb_engine/thumbscript1.js" type="text/javascript"></script>
<script src="index_files/vlb_engine/vlbdata1.js" type="text/javascript"></script>
<script src="index_files/vlb_engine/visuallightbox.js" type="text/javascript"></script>
Hier meine Anzeige der "VisualLightBox.com BODY section", die Ihr in einen beliebigen Block, anstelle des Beispieltextes, in den Code Editor kopiert. Bitte verwendet absolute Pfade zu den Bildern am Server, denn Mobirise kennt diese Fotos ja nicht und würde sonst eine Fehlermeldung erstellen. Passt das <div> mit der ID noch auf eine maximale Breite von 100% an, damit die Visual Lightbox responsive wird:
<!-- Start VisualLightBox.com BODY section id=1 -->
<div align="center">
    <div style="max-width: 100%;" id="vlightbox1">
        <a class="vlightbox1" href="http://www.mobirise-tutorials.com/BusinessM4/index_files/vlb_images1/afrika001.jpg" title="Elefant"><img src="http://www.mobirise-tutorials.com/BusinessM4/index_files/vlb_thumbnails1/afrika001.jpg" alt="Elefant">Elefant</a>
        <a class="vlightbox1" href="http://www.mobirise-tutorials.com/BusinessM4/index_files/vlb_images1/afrika002.jpg" title="Gazellen"><img src="http://www.mobirise-tutorials.com/BusinessM4/index_files/vlb_thumbnails1/afrika002.jpg" alt="Gazellen">Gazellen</a>
        <a class="vlightbox1" href="http://www.mobirise-tutorials.com/BusinessM4/index_files/vlb_images1/afrika003.jpg" title="Löwen"><img src="http://www.mobirise-tutorials.com/BusinessM4/index_files/vlb_thumbnails1/afrika003.jpg" alt="Löwen">Löwen</a>
        <a class="vlightbox1" href="http://www.mobirise-tutorials.com/BusinessM4/index_files/vlb_images1/afrika004.jpg" title="Löwe"><img src="http://www.mobirise-tutorials.com/BusinessM4/index_files/vlb_thumbnails1/afrika004.jpg" alt="Löwe">Löwe</a>
        <a class="vlightbox1" href="http://www.mobirise-tutorials.com/BusinessM4/index_files/vlb_images1/afrika005.jpg" title="Vogel"><img src="http://www.mobirise-tutorials.com/BusinessM4/index_files/vlb_thumbnails1/afrika005.jpg" alt="Vogel">Vogel</a>
        <a class="vlb" href="http://visuallightbox.com">jquery lightbox html content by VisualLightBox.com v5.4</a>
    </div>
</div>
<!-- End VisualLightBox.com BODY section -->

Video zum Einbau der Visual Lightbox

Dieses Video wurde zum Einbau in die Software "NetObjects Fusion" von mir erstellt, es zeigt aber ebenso alle wichtigen Funktionen der Lightbox für die Verwendung in Mobirise.

Google Translate

Adresse

Schöne Strasse 1, Berlin

Deutschland

Links