Juicebox Pro in CMSimple_XH Seite einfügen

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