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
 
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.

<!-- 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 -->

 

 

News

  

Templats Download für
CMSimple_XH  
 
links_icon.png
 
Webseiten Tipp: Fitness-Studio in Steffisburg.
www.silvergym.ch
 
Ich bin vom 26.10.18 bis 25.11.18 in den Ferien!

Templates Demo

 

 Besuchen Sie meine
Templates Demo Seite.
 
Templates Demo richu153.jpg
 
 
 
 

Neustes Template

richu183_de

Eine neue kostenlose Vorlage für CMSimple_XH ist verfügbar.

Mit Animated Gradient Background
Free Templates richu183_de

 

Windows Tipp

Neue Rubrik Windows Tipp!

 Erster Tipp, Anleitung, Windows 10, Herunterfahren, Neustart.

ausfuehren.jpg