• Registered: 2014-11-24
  • Posts: 3

Topic: fullScreen customization [SOLVED]

Hi all,
it's my first post here, and I'm quite new to juicebox, so I beg your pardon in advance if I'm making a silly question and/or in the wrong place...

I just implemented juicebox in a Drupal instance, custom responsive template.
Everything went smooth so far, but due to the presence of an absolutely positioned element on the left (ca. 50% from top), there's some odd overlapping between full-screen images and this element, which is basically a get-back link not positionable elsewhere.

So the question is: is there an easy (i.e. via options) way to set the whole full-screen block, including image and image caption, so that it has ~90% viewport width, ~5% margin-left and right, and of course auto height to preserve image ratio?

I got lost in the css, having there lots of inline styles generated on the fly by javascript, and I don't think it's wise to start a battle of !important styles...

Thanks a lot in advance for any help!!!

Best,
Giovanni.

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

Re: fullScreen customization [SOLVED]

So the question is: is there an easy (i.e. via options) way to set the whole full-screen block, including image and image caption, so that it has ~90% viewport width, ~5% margin-left and right, and of course auto height to preserve image ratio?

As long as you are referring to the normal rather than fullscreen (expanded) gallery display, then you can set the gallery's width to be 90% in the embedding code and horizontally center the gallery's div in its parent container as follows:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
new juicebox({
    containerId: 'juicebox-container',
    galleryWidth: '90%'
});
</script>
<div id="parent">
    <div id="juicebox-container" style="margin: 0 auto;"></div>
</div>
<!--END JUICEBOX EMBED-->

No matter what the height of the gallery is, Juicebox will respect the aspect ratio of the main images as long as imageScaleMode is set to SCALE_DOWN or SCALE.

I hope this helps.

  • Registered: 2014-11-24
  • Posts: 3

Re: fullScreen customization [SOLVED]

Hi Steven, thanks a lot for your reply, which was very helpful!

I didn't actually implement the galleryWidth property, but you made me think about looking for more fitting ones, and I found "frameWidth": maybe I didn't make it clear (sorry) but I was actually referring to expanded fullscreen.

But then I realized that - somehow - the property also affected the normal view, and I tried to figure out another solution: I found out that the fullscreen container has a generated id #jb-glry-dlg, which remains the same regardless on which page the module instantiates the gallery  through the Drupal website, and regardles the number of the galleries rendered in the same page: in this second case, the div#jb-glry-dlg will contain the fullscreen view for all the galleries.

Upon this, I created some css rules with the restricted scope #jb-glry-dlg to adjust slightly the image size (the no need to fix the alignment), the caption width and the positioning of the slider triggers.

And... it seems to work now.

If I think that for mobile devices (not only lower resolutions) the page is already correctly rendered, without my changes to be rendered, maybe I found a good fallback.

I thought it was worth to share also for other users, but if you think that something sounds somehow "dirty" in this solution, please tell me, so I - and someone else eventually - can approach the issue even better.

Thanks a lot for the precious and rapid support!

Best,
Giovanni.

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

Re: fullScreen customization [SOLVED]

I was actually referring to expanded fullscreen

Thank you for clarifying.
As I'm sure you are aware, the Juicebox fullscreen gallery was designed to completely fill the browser window (or the entire screen if useFullscreenExpand="TRUE"). It was not designed with user modification in mind (for example to reduce its size).
Perhaps the following notes will be of interest.

Everything went smooth so far, but due to the presence of an absolutely positioned element on the left (ca. 50% from top), there's some odd overlapping between full-screen images and this element, which is basically a get-back link not positionable elsewhere.

Your original problem (with overlapping elements) may stem from a known bug whereby elements which have explicitly been assigned a CSS 'position' are not covered by the fullscreen gallery (they should be). This bug has already been addressed and will be fixed in the next version of Juicebox.
In the meantime, a workaround would be to set expandInNewPage="TRUE" so that, when the gallery is expanded, it will be displayed on a page of its own rather than on top of the embedding page.
With the expanded gallery no longer showing any elements from the embedding page, visitors to your web site could then use the Expand/Close Button within the gallery to close the expanded view (to return to the original embedding page) and you could also use the Back Button functionality to add a link within your gallery to whatever web page you like.
I hope this helps.

  • Registered: 2014-11-24
  • Posts: 3

Re: fullScreen customization [SOLVED]

Hi Steven,
thanks a lot again for your reply and sorry for my late one.
expandInNewPage is an option I've been definitely missing, otherwise I would've used it (silly me).
But I'll keep that in mind for future use, or just in case things won't get as they should the way I fixed the problem so far.
About the bug you mentioned, I'm glad it's being processed, solving it would make - an already great - jukebox even better!

I wish you a great day.
Giovanni.

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

Re: fullScreen customization [SOLVED]

This bug (whereby elements from the embedding web page may still be visible after a gallery has been expanded) has now been fixed in v1.4.3. Please see this blog entry for more information on the latest version.