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 */

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

Juicebox Download auf: www.juicebox.net

Juicebox-Pro Einzellizenz für eine Web Domain kostet $ 45.

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.

<p> </p>
<div class="juicebox-container-100"><iframe src="http://ihrewebseit.ch/userfiles/images/test/" width="300" height="150"></iframe></div>
<p> </p>

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

<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 Pro in CMSimple_XH Seite einfügen

Iframe Code einfüge

Verwendeter Einbettungscode

News

Templates Demo

Neustes Template

Windows Tipp