• Registered: 2018-11-12
  • Posts: 1

Topic: Juicebox appears not responsive

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="[&quot;twitter&quot;,&quot;facebook&quot;,&quot;googleplus&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;xing&quot;,&quot;whatsapp&quot;,&quot;tumblr&quot;,&quot;mail&quot;,&quot;info&quot;]" 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&amp;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&amp;media=&amp;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&amp;summary=&amp;title=Rhabarber-Marzipan-Tarte%20%7C%20Homemeals&amp;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&amp;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&nbsp;</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

  • Registered: 2012-04-24
  • Posts: 5,924

Re: Juicebox appears not responsive

There are essentially two ways to make a Juicebox gallery responsive (with its dimensions dynamically changing with the size of the user's browser window).

Scenario #1:
A Juicebox gallery will be responsive (and will dynamically scale with the size of the user's browser window) if the gallery's own dimensions and the dimensions of all parent containers are expressed as percentages. If there is a fixed value anywhere up the chain, then the gallery's size will become fixed (e.g. 100% x 100% x 800px = 800px).
Please note that when using percentage heights, you may need to implement the suggestion noted here.

Scenario #2:
You could use JavaScript to listen for a change in the size of the user's browser window and assign new dimensions to the Juicebox gallery if and when this happens.
An example of this can be found in the resizable galleries support section here.
Take a look at the source of this sample gallery in your browser to see how this might be achieved.

Both scenarios above apply equally to Juicebox-Lite and Juicebox-Pro.

With this in mind, it can be difficult to ensure that a Drupal web page conforms to Scenario #1 and also difficult to implement Scenario #2 within a Drupal environment.

The code you provided includes the following line:

<div class="juicebox-parent " style="width: 540px; height: 450px;">

It looks like your gallery's parent container has fixed pixel dimensions and, therefore, your gallery will ultimately have a fixed size, too (even if it has dimensions expressed as percentages).

I'm not sure where the dimensions for your 'juicebox-parent' container are coming from (the module or your Drupal theme).
(Please note that the module is an unofficial plugin which we did not write ourselves.)
If these values are coming from you current gallery dimensions, then try setting your galleryWidth to be 100% (and set your galleryHeight to be a fixed pixel value (such as '600px') as your Drupal page will likely support vertical scrolling in which case the gallery would not benefit from being responsive in the vertical dimension).
Otherwise, you might like to try a different Drupal theme which does not use containers of fixed dimensions (which will constrain your gallery).