Hi,
I use the Pro License of the Juicebox and implemented it on a Drupal website with the Juicebox module, but saddenly the box didn't resize with the advice or resize by resizing the Browser.
Here is my generatet HTML code:
<div class="col-sm-12">
<div class="field field-name-field-bild field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><div class="juicebox-parent " style="width: 540px; height: 450px;">
<div id="field--node--4095--field-bild--full" class="juicebox-container" oncontextmenu="return false;" style="height: 100%; width: 100%;"><div id="jb-glry-id-0" tabindex="0" class="juicebox-gallery jb-flag-large-screen-mode" style="width: 540px; height: 450px;"><div class="jcbx-glry-classic" style="display: none; width: 100%; height: 100%; background-color: rgb(0, 0, 0); user-select: none;"><div class="jb-panel-index jb-classifier-thumb-area" data-layer="300" style="display: none; z-index: 300; position: absolute !important; width: 540px; height: 450px; top: 0px; left: 0px; user-select: none;"><div class="jb-idx-thumbnail-container" style="margin: 0px; padding: 0px; position: relative; height: 100% !important; width: 100% !important; user-select: none;"><div class="jb-idx-show-area" style="overflow: hidden; margin: 0px; padding: 0px; position: absolute; user-select: none;"></div></div><div class="jb-navigation index-navigation jb-classifier-thumb-area" style="user-select: none;"><div class="jbn-nav-button jbn-left-button jbn-nav-button-icon jb-classifier-layer" data-layer="1000" style="z-index: 1000; display: none; font-size: 20px; height: 24px; width: 24px; padding-left: 2px; padding-right: 2px; padding-top: 4px; border-radius: 20px; color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.4); user-select: none; top: 33px; left: 42px;"></div><div class="jbn-nav-button jbn-right-button jbn-nav-button-icon jb-classifier-layer" data-layer="1000" style="z-index: 1000; display: none; font-size: 20px; height: 24px; width: 24px; padding-left: 2px; padding-right: 2px; padding-top: 4px; border-radius: 20px; color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.4); user-select: none; top: 33px; right: 42px;"></div></div><div class="jb-idx-thumbnail-show-more" style="left: 3px; bottom: 5px; height: 30px; width: 100%; position: absolute; display: none; user-select: none;"><a href="#" style="color: rgb(255, 255, 255); user-select: none;">more...</a></div></div><div class="jb-panel-detail jb-classifier-detail-area jb-classifier-layer" data-layer="50" style="position: absolute !important; width: 540px; height: 450px; top: 0px; left: 0px; opacity: 1; user-select: none;"><div class="jb-dt-main-frame jb-dt-main-image-0" style="height: 450px; width: 540px; left: 0px; z-index: 2; opacity: 1; user-select: none; display: block; transition: opacity 300ms ease-in;"><div class="jb-dt-main-image" style="position:absolute;top:0px;left:0px;height:450px;width:540px;padding:0;overflow:hidden;border:none;box-shadow: 0px 0px 10px rgba(0, 0, 0, .4);"><img style="display: inline; position: relative; top: 0px; left: -30px; height: 450px; width: auto; user-select: none;" src="http://test.homemeals.de/sites/default/files/styles/gallery_large_/public/a_rhabarbara.jpg?itok=lMDw8dbf" alt="http://test.homemeals.de/sites/default/files/styles/gallery_large_/public/a_rhabarbara.jpg?itok=lMDw8dbf"></div></div></div><div class="jb-classifier-link-wrapper jb-classifier-detail-area jb-classifier-layer jb-classifier-show-on-over" data-layer="3000" style="z-index: 3000; right: 0px; top: 10px; width: 92px; opacity: 1; display: block; user-select: none; transition: opacity 400ms ease-in;"><div class="jb-bb-bar" style="user-select: none;"><div class="jb-bb-button jb-bb-btn-de-show-list" title="Show Thumbnails" style="font-size: 20px; border-top: 10px solid transparent; height: 30px; width: 40px; user-select: none;"></div><div class="jb-bb-button jb-bb-btn-open-url" title="Open Image in New Window" style="font-size: 20px; border-top: 10px solid transparent; height: 30px; width: 40px; display: none; user-select: none;"></div><div class="jb-bb-button jb-bb-btn-full-screen" title="Expand Gallery" style="font-size: 20px; border-top: 10px solid transparent; height: 30px; width: 40px; user-select: none;"></div><div class="jb-bb-splitter jb-bb-splitter-1" style="height: 20px; margin: 9px 2px; display: none; user-select: none;"></div><div class="jb-bb-button jb-bb-btn-top-nav jb-bb-btn-top-nav-left" title="Previous Image" style="font-size: 20px; border-top: 10px solid transparent; height: 30px; width: 40px; display: none; user-select: none; opacity: 0.5;"></div><div class="jb-bb-button jb-bb-btn-auto-play" title="Start AutoPlay" style="font-size: 20px; border-top: 10px solid transparent; height: 30px; width: 40px; display: none; user-select: none;"></div><div class="jb-bb-button jb-bb-btn-top-nav jb-bb-btn-top-nav-right" title="Next Image" style="font-size: 20px; border-top: 10px solid transparent; height: 30px; width: 40px; display: none; user-select: none; opacity: 0.5;"></div><div class="jb-bb-splitter jb-bb-splitter-2" style="height: 20px; margin: 9px 2px; display: none; user-select: none;"></div><div class="jb-bb-button jb-bb-btn-show-info" title="Hide Information" style="font-size: 20px; border-top: 10px solid transparent; height: 30px; width: 40px; display: none; user-select: none;"></div><div class="jb-bb-button jb-bb-btn-audio" title="Play Audio" style="font-size: 20px; border-top: 10px solid transparent; height: 30px; width: 40px; display: none; user-select: none;"></div><div class="jb-bb-splitter jb-bb-splitter-3" style="height: 20px; margin: 9px 2px; display: none; user-select: none;"></div><div class="jb-bb-button jb-bb-btn-fotomoto" title="Buy this Image" style="font-size: 20px; border-top: 10px solid transparent; height: 30px; width: 40px; display: none; user-select: none;"></div></div></div><div class="jb-area-caption jb-classifier-layer jb-classifier-show-on-over" data-layer="200" style="overflow: hidden; bottom: 0px; z-index: 200; max-height: 120px; position: absolute; width: 540px; height: 100%; top: 330px; left: 0px; user-select: none;"><table class="jb-cap-frame caption_0" style="position: absolute; opacity: 1; width: 540px; height: 100%; padding: 0px; margin: 0px; left: 0px; transition: opacity 300ms ease-in;"><tbody style="user-select: none;"><tr style="user-select: none;"><td style="user-select: none;"><div data-layer="1000" class="jb-caption jb-classifier-layer" style="overflow: hidden; z-index: 1000; max-height: 96px; color: rgb(255, 255, 255); background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3)); user-select: none; display: block; padding: 12px 18px;"><div class="jbac-number jb-classifier-layer" data-layer="2000" style="z-index: 2000; color: rgb(255, 255, 255); user-select: none;">1 / 1</div></div></td></tr></tbody></table></div><div class="jb-navigation jb-classifier-detail-area jb-classifier-layer" data-layer="500" style="height: 450px; z-index: 500; top: 0px; left: 0px; width: 540px; opacity: 1; user-select: none;"><div class="jb-status-message" style="position: absolute; display: none; user-select: none;"></div><div class="jbn-nav-touch-area jbn-nav-left-touch-area dt-nav-disabled" style="user-select: none;"><div class="jbn-nav-button jb-classifier-layer" data-layer="1000" style="z-index: 1000; position: absolute; left: 20px; height: 28px; width: 28px; user-select: none; top: 213px;"><div class="jbn-left-button jbn-nav-button-icon" style="display: none; font-size: 20px; height: 24px; width: 24px; padding-left: 2px; padding-right: 2px; padding-top: 4px; border-radius: 20px; color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.4); user-select: none;"></div></div></div><div class="jbn-nav-touch-area jbn-nav-right-touch-area dt-nav-disabled" style="user-select: none;"><div class="jbn-nav-button jb-classifier-layer" data-layer="1000" style="z-index: 1000; position: absolute; right: 20px; height: 28px; width: 28px; user-select: none; top: 213px;"><div class="jbn-right-button jbn-nav-button-icon" style="display: none; font-size: 20px; height: 24px; width: 24px; padding-left: 2px; padding-right: 2px; padding-top: 4px; border-radius: 20px; color: rgb(255, 255, 255); background-color: rgba(0, 0, 0, 0.4); user-select: none;"></div></div></div></div></div></div></div></div>
</div></div></div> <h1 class="page-header">Rhabarber-Marzipan-Tarte</h1>
<div class="headerinfo">
<!--<span property="dc:date dc:created" content="2018-04-07T13:43:46+02:00" datatype="xsd:dateTime" rel="sioc:has_creator">Von <a href="/user/chefinmaria" title="Benutzerprofil anzeigen" class="username">chefinmaria</a> am 07. April 2018</span>--><span class="social-stats">334 Aufrufe</span><span class="likes"><a href="/user/login?destination=node/4095" title="Gefällt mir"><span class="glyphicon glyphicon-thumbs-up"></span> Gefällt mir <span class="count">2</span></a></span><span class="share"><a data-toggle="collapse" data-target=".shariff" title="Teilen"><span class="glyphicon glyphicon-share-alt"></span><span class="link-text"> Teilen</span></a></span><!-- <a href="#comments-anchor" title="Kommentar">Kommentare 1</a>-->
</div>
<div class="shariff" data-services="["twitter","facebook","googleplus","pinterest","linkedin","xing","whatsapp","tumblr","mail","info"]" data-theme="colored" data-orientation="horizontal" data-mail-url="mailto:" data-lang="de" data-button-style="icon"><ul class="theme-colored orientation-horizontal button-style-icon shariff-col-10"><li class="shariff-button twitter"><a href="https://twitter.com/intent/tweet?text=Rhabarber-Marzipan-Tarte%20%7C%20Homemeals&url=http%3A%2F%2Ftest.homemeals.de%2Frezept%2Frhabarber-marzipan-tarte" data-rel="popup" rel="nofollow" title="Bei Twitter teilen" role="button" aria-label="Bei Twitter teilen"><span class="fab fa-twitter"></span></a></li><li class="shariff-button facebook"><a href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Ftest.homemeals.de%2Frezept%2Frhabarber-marzipan-tarte" data-rel="popup" rel="nofollow" title="Bei Facebook teilen" role="button" aria-label="Bei Facebook teilen"><span class="fab fa-facebook-f"></span></a></li><li class="shariff-button googleplus"><a href="https://plus.google.com/share?url=http%3A%2F%2Ftest.homemeals.de%2Frezept%2Frhabarber-marzipan-tarte" data-rel="popup" rel="nofollow" title="Bei Google+ teilen" role="button" aria-label="Bei Google+ teilen"><span class="fab fa-google-plus-g"></span></a></li><li class="shariff-button pinterest"><a href="https://www.pinterest.com/pin/create/link/?url=http%3A%2F%2Ftest.homemeals.de%2Frezept%2Frhabarber-marzipan-tarte&media=&description=Rhabarber-Marzipan-Tarte%20%7C%20Homemeals" data-rel="popup" rel="nofollow" title="Bei Pinterest pinnen" role="button" aria-label="Bei Pinterest pinnen"><span class="fab fa-pinterest-p"></span></a></li><li class="shariff-button linkedin"><a href="https://www.linkedin.com/shareArticle?mini=true&summary=&title=Rhabarber-Marzipan-Tarte%20%7C%20Homemeals&url=http%3A%2F%2Ftest.homemeals.de%2Frezept%2Frhabarber-marzipan-tarte" data-rel="popup" rel="nofollow" title="Bei LinkedIn teilen" role="button" aria-label="Bei LinkedIn teilen"><span class="fab fa-linkedin-in"></span></a></li><li class="shariff-button xing"><a href="https://www.xing.com/social_plugins/share?url=http%3A%2F%2Ftest.homemeals.de%2Frezept%2Frhabarber-marzipan-tarte" data-rel="popup" rel="nofollow" title="Bei XING teilen" role="button" aria-label="Bei XING teilen"><span class="fab fa-xing"></span></a></li><li class="shariff-button whatsapp"><a href="whatsapp://send?text=Rhabarber-Marzipan-Tarte%20%7C%20Homemeals%20http%3A%2F%2Ftest.homemeals.de%2Frezept%2Frhabarber-marzipan-tarte" rel="nofollow" title="Bei Whatsapp teilen" role="button" aria-label="Bei Whatsapp teilen"><span class="fab fa-whatsapp"></span></a></li><li class="shariff-button tumblr"><a href="http://tumblr.com/widgets/share/tool?canonicalUrl=http%3A%2F%2Ftest.homemeals.de%2Frezept%2Frhabarber-marzipan-tarte" data-rel="popup" rel="nofollow" title="Bei tumblr teilen" role="button" aria-label="Bei tumblr teilen"><span class="fab fa-tumblr"></span></a></li><li class="shariff-button mail"><a href="mailto:?subject=Rhabarber-Marzipan-Tarte%20%7C%20Homemeals&body=http%3A%2F%2Ftest.homemeals.de%2Frezept%2Frhabarber-marzipan-tarte" rel="nofollow" title="Per E-Mail versenden" role="button" aria-label="Per E-Mail versenden"><span class="fas fa-envelope"></span></a></li><li class="shariff-button info"><a href="http://ct.de/-2467514" target="_blank" rel="noopener noreferrer" title="Weitere Informationen" role="button" aria-label="Weitere Informationen"><span class="fas fa-info"></span></a></li></ul></div> <!--<div id="button-bar">
·
<a href="#comments" title="Kommentar"><span class="glyphicon glyphicon-comment"></span> Kommentieren </a>
· <a href="/homemeals_relaunch/print/" class="print-page" rel="nofollow" onclick="window.open(this.href); return false" title="Drucken"><span class="glyphicon glyphicon-print"></span> Drucken</a>
</div>-->
<hr>
<div class="user_info marginTop row">
<div class="col-xs-12 col-md-9 nopadding">
<a href="/user/chefinmaria" title="Benutzerprofil anzeigen"><img src="http://test.homemeals.de/sites/default/files/styles/normal_profile_picture/public/20.jpg?itok=pv31bSwn" class="user_thumb_middle"></a> <div class="username_wrap"><a href="/user/chefinmaria" title="Benutzerprofil anzeigen" class="username">chefinmaria</a></div>
<div>
13 Abonnenten </div>
</div>
<div class="col-md-3 col-sm-4 col-xs-12 nopadding">
<a href="/user/login?destination=node/4095" class="flag flag-action btn btn-primary pull-right-sm" title="Abonnieren">Abonnieren</a> </div>
</div>
<hr>
<div class="col-xs-12 nopadding created marginBottom">
Erstellt am 07.04.2018 </div>
<div class="field field-name-field-zutaten field-type-field-collection field-label-above"><div class="field-label">Zutaten für 8 Portionen </div><div class="field-items"><div class="field-item even"><div class="table-responsive">
<table class="field-collection-table-view view-mode-full field-collection-view-final table table-hover table-striped">
<tbody>
<tr class="field-collection-item"><td class="field-zutaten-menge"><div class="field field-name-field-zutaten-menge field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">400</div></div></div></td><td class="field-zutaten-einheit"><div class="field field-name-field-zutaten-einheit field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">g</div></div></div></td><td class="field-zutaten-name"><div class="field field-name-field-zutaten-name field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">Rhabarber</div></div></div></td> </tr>
<tr class="field-collection-item"><td class="field-zutaten-menge"><div class="field field-name-field-zutaten-menge field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">4</div></div></div></td><td class="field-zutaten-einheit"><div class="field field-name-field-zutaten-einheit field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">EL</div></div></div></td><td class="field-zutaten-name"><div class="field field-name-field-zutaten-name field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">Zucker</div></div></div></td> </tr>
<tr class="field-collection-item"><td class="field-zutaten-menge"><div class="field field-name-field-zutaten-menge field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">1</div></div></div></td><td class="field-zutaten-einheit"><div class="field field-name-field-zutaten-einheit field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">Rolle</div></div></div></td><td class="field-zutaten-name"><div class="field field-name-field-zutaten-name field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">Blätterteig</div></div></div></td> </tr>
<tr class="field-collection-item"><td class="field-zutaten-menge"><div class="field field-name-field-zutaten-menge field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">200</div></div></div></td><td class="field-zutaten-einheit"><div class="field field-name-field-zutaten-einheit field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">g</div></div></div></td><td class="field-zutaten-name"><div class="field field-name-field-zutaten-name field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">Marzipanrohmasse</div></div></div></td> </tr>
<tr class="field-collection-item"><td class="field-zutaten-menge"><div class="field field-name-field-zutaten-menge field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">70</div></div></div></td><td class="field-zutaten-einheit"><div class="field field-name-field-zutaten-einheit field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">g</div></div></div></td><td class="field-zutaten-name"><div class="field field-name-field-zutaten-name field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">gehobelte Mandeln</div></div></div></td> </tr>
<tr class="field-collection-item"><td class="field-zutaten-menge"><div class="field field-name-field-zutaten-menge field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">30</div></div></div></td><td class="field-zutaten-einheit"><div class="field field-name-field-zutaten-einheit field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">g</div></div></div></td><td class="field-zutaten-name"><div class="field field-name-field-zutaten-name field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">Butter</div></div></div></td> </tr>
<tr class="field-collection-item"><td class="field-zutaten-menge"><div class="field field-name-field-zutaten-menge field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">1</div></div></div></td><td class="field-zutaten-einheit"><div class="field field-name-field-zutaten-einheit field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">Stk.</div></div></div></td><td class="field-zutaten-name"><div class="field field-name-field-zutaten-name field-type-text field-label-hidden"><div class="field-items"><div class="field-item even">Vanilleschote</div></div></div></td> </tr>
</tbody>
</table>
</div>
</div></div></div> </div>I hope, u can help me.
Thank u in advance.
greetings,
mickor