Juicebox Pro in CMSimple_XH Seite einfügen

Anleitung ist für Juicebox Pro

Juicebox Pro ist Responsive. Die Anleitung solle auch mit der Juicebox-Lite FREE Version laufen, diese Versionen habe ich aber nicht getestet.

Sie dürfen den Code verwenden, kopieren und ändern, auch zu kommerziellen Zwecken. Namensnennung im Code bitte beibehalten.
/* Juicebox 100% responsive on page Start / by Richard Kircher (c)2018/ www.richukunst.ch */
<!-- Juicebox 100% responsive on page Start / by Richard Kircher (c)2018/ www.richukunst.ch -->

Sie dürfen den Code verwenden, kopieren und ändern, auch zu kommerziellen Zwecken. Juicebox ist eine anpassbare Bildergalerie. Juicebox erlaubt Ihnen Ihre Fotos auf eine intuitive Art und Weise auf Ihrer Webseite anzuzeigen. Für das Programm Juicebox benötigen Sie zunächst das Programm “Adobe AIR”. Falls Sie das noch nicht installiert haben, können Sie es hier downloaden und installieren. www.get.adobe.com/air/?loc=de

Erstellen Sie eine Bildergalerie mit Juicebox, speichern Sie diese Galerie z.B. in den Order mit dem Namen test auf Ihre Festplatte. Laden Sie die erstellte Galerie in Ihre CMSimple_XH Installation in den Ordner userfiles/images hoch.

Iframe Code einfüge

Mit dem TinyMCE 4 können Sie nun rechts open den Quelltext anklicken und den Code einfügen und Speichern. Die Galerie wird jetzt angezeigt.

<!-- Juicebox 100% responsive on page Start / by Richard Kircher (c)2018/ www.richukunst.ch -->
<p> </p>
<div class="juicebox-container-100"><iframe src="http://ihrewebseit.ch/userfiles/images/test/" width="300" height="150"></iframe></div>
<p> </p>
<!-- Juicebox 100% responsive on page End / by Richard Kircher (c)2018/ www.richukunst.ch -->

Responsive Webdesign

Ihre Juicebox Bildergalerie wird jetzt angezeigt ist aber noch nicht responsive. Passt sich noch nicht an Displays der verschiedenen Geräte wie z.B. PC, Tablets, Smartphones oder Laptops an. Fügen Sie den untenstehenden Code in Ihre Template Stylesheet Datei ein. Der Code wird nun die Bildergalerie auf Geräten wie z.B. PC, Tablets, Smartphones oder Laptops korrekt anzeigen.

/* Juicebox 100% responsive on page Start / by Richard Kircher (c)2018/ www.richukunst.ch */
.juicebox-container-100 {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 400px;
height: auto;
overflow: hidden;
box-shadow: 0px 13px 14px 0px rgba(50, 50, 50, 0.81)
}
.juicebox-container-100 iframe,
.juicebox-container-100 embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* Juicebox 100% responsive on page End / by Richard Kircher (c)2018/ www.richukunst.ch */

Verwendeter Einbettungscode

<!-- Juicebox 100% responsive on page Start / by Richard Kircher (c)2018/ www.richukunst.ch -->
<p> </p>
<p><span style="font-size: 12pt;"><code></code></span></p>
<div class="juicebox-container-100"><iframe src="http://richukunst.ch/userfiles/images/test/" width="300" height="150"></iframe></div>
<p> </p>
<!-- Juicebox 100% responsive on page End / by Richard Kircher (c)2018/ www.richukunst.ch -->