1 (edited by fwells11 2019-09-01 17:55:38)

Topic: Bootstrap tabs\pills refresh problem

Hi there.  Before I spring for the Pro version I need to make sure I can get it to behave the way I want it to.  I have the Lite version running on a Drupal test site which uses the Bootstrap 3 theme.  Juicebox is in a Bootstrap tab\pill but the page does not display correctly.  If I resize the browser it fixes it, so it looks like a problem with tabs/pills not refreshing the page when clicked.

I searched the forum but I have not found the solution to fix it.  I'm sure you guys have come across this problem many times and I would appreciate you showing me how to fix it please.

The attached image shows how it looks ont the page before and after the page resize.

Keep up the great work.

Post's attachments

juicebox-refresh-prob.JPG 52.27 kb, file has never been downloaded. 

You don't have the permssions to download the attachments of this post.

Re: Bootstrap tabs\pills refresh problem

It sounds like, when the Juicebox gallery is loaded into the gallery container, the gallery container may exist on the web page but with no dimensions (being that it is not visible until the 'Gallery' tab is clicked). If the gallery has a galleryWidth of '100%' but the gallery container has no dimensions, then the gallery's actual width will be 100% of zero.

One possible solution would be to put the Juicebox embedding code into a JavaScript function and then call the function when the 'Gallery' tab is clicked (after the gallery container has been assigned dimensions).

Another possible solution might be to give your gallery a fixed pixel galleryWidth (for example '800px'), although this will prevent the gallery from being responsive in the horizontal dimension (which may or may not be a problem depending on the design and layout of your web page).

I hope this points you in the right direction.

Re: Bootstrap tabs\pills refresh problem

Thanks for the quick follow up.  Using fixed size in pixels does indeed fix the loading problem at the cost of responsiveness, but that's too much of a price to pay unfortunately.

Regarding this suggestion, can you provide any more guidance please?  I know little-to-nothing about Javascript.

One possible solution would be to put the Juicebox embedding code into a JavaScript function and then call the function when the 'Gallery' tab is clicked (after the gallery container has been assigned dimensions).

Re: Bootstrap tabs\pills refresh problem

Using fixed size in pixels does indeed fix the loading problem at the cost of responsiveness, but that's too much of a price to pay unfortunately.

It sounds like we're on the right track.

Regarding this suggestion, can you provide any more guidance please?

Sure!

Usually, your embedding could would look something like this:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "600px",
        backgroundColor: "#222222"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Put the JavaScript section into a function and add an event listener (a click handler) to call the function (to load the gallery) when your 'Gallery' tab is clicked.
If, for example, your 'Gallery' tab has an id="gallery_tab", then your embedding code would look something like this:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "600px",
            backgroundColor: "#222222"
        });
    }
    $(document).ready(function() {
        $('#gallery_tab').click(function() {
            loadGallery();
        });
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I hope this helps.
However, if you continue to experience difficulties, then please post the URL to your gallery's web page so that I can take a look at your gallery's environment live on your web server and hopefully help further.
Thank you.

Re: Bootstrap tabs\pills refresh problem

Thanks again.  I don't really know where to apply the code so I tried appliing it to a Views Global Text Area.  When hitting the Gallery tab it completely hid the gallery so I'm at least doing it a way that seems to be able to interact.

Here's a link that should take you to a page called Chatsworth.

http://72.197.39.57:6666/location/chatsworth-0#

Re: Bootstrap tabs\pills refresh problem

Unfortunately, the URL you provided does not work so I cannot see your gallery's web page.

I don't really know where to apply the code...

If, for example, you are following the regular embedding instructions here, then you would just use the embedding code I provided (changing the gallery dimensions and background color as necessary) instead of the embedding code provided on the 'Publish' tab of JuiceboxBuilder. (It would just be a simple swap of code.)

Without being able to see your gallery's web page, I do not know how you are currently embedding your gallery.
If you are using the baseUrl method (which you might be using if you are following the Embedding in a Drupal Site instructions), then just amend the path to your 'juicebox.js' file and add the baseUrl entry (pointing towards the gallery folder) to the modified embedding code, for example:

<!--START JUICEBOX EMBED-->
<script src="/galleries/gallery1/jbcore/juicebox.js"></script>
<script>
    function loadGallery() {
        new juicebox({
            baseUrl: "/galleries/gallery1/",
            containerId: "juicebox-container",
            galleryWidth: "100%",
            galleryHeight: "600px",
            backgroundColor: "#222222"
        });
    }
    $(document).ready(function() {
        $('#gallery_tab').click(function() {
            loadGallery();
        });
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

However, if you are using the Juicebox Module for Drupal, then putting the embedding code into a JavaScript function and adding custom code to call the function when an element on your web page is clicked is not going to be easy. The module automatically embeds the gallery into your web page and you'd need to modify the module's source code to achieve this.

There are a couple of reasons why this may not be feasible, though.
(1) The Juicebox Module for Drupal was not written by ourselves and, as such, I am not overly familiar with the module's source code (and do not know how easy or difficult such a modification would be). Support for the module would be better directed towards the Drupal forum where the author of the module (Ryan Jacobs) might be able to help further.
(2) The Juicebox Module for Drupal uses a non-standard embedding method (it does not just drop the regular embedding code into the web page) so swapping the module's embedding code for my modified embedding code above is not going to be possible.

If you really need to get this working with your tabs, then I'd recommend following the Embedding in a Drupal Site instructions and using the modified baseUrl code that I posted above. Just make sure that both paths in the code (the path to the 'juicebox.js' file and the baseUrl entry, pointing towards the gallery folder) are correct.

Re: Bootstrap tabs\pills refresh problem

My apologies, the test site is on my PC and I put it into sleep when I go to bed.  That URL should be working again for the next 15 hours or so.

I am using the Juicebox module. 

Just reading the embedded instructions seems like it may not achieve my ultimate objective.  I am using Views to dynamically populate Juicebox with different sets of images based on the node I am displaying.  I don't want to have to create a different gallery for each node.   

I'll see if I can get some help from Ryan Jacobs.  I had hoped he was part of your team.

Re: Bootstrap tabs\pills refresh problem

My apologies, the test site is on my PC and I put it into sleep when I go to bed.  That URL should be working again for the next 15 hours or so.

Still no joy with the URL I'm afraid...

I hope that Ryan (or another Drupal Juicebox Module user) can help you out over in the Drupal forum but I suspect that trying to integrate my solution into the module will not be an easy task.

Maybe there's a different solution that a user of the bootstrap tab system that you use can recommend (perhaps they have experienced a similar issue with other HTML elements embedded into the tabs ).

Being that the problem resolves itself when the browser is resized, you could perhaps manually trigger a resize when your tab is clicked. (Such a solution would be independent of Juicebox and the module's code.)
Try adding the following code to your web page:

<script>
    $(document).ready(function() {
        $('#gallery_tab').click(function() {
            $(window).trigger('resize');
        });
    });
</script>

Again, this assumes that your 'Gallery' tab has an id="gallery_tab". (If not, then just change #gallery_tab in the code above to the correct 'id' for your 'Gallery' tab.)
It also assumes that jQuery is loaded into your web page. (Juicebox comes bundled with its own version of jQuery so as long as the code is run after the 'juicebox.js' file is loaded into your web page, then all should be fine.)
Please note that this proposed solution has not been tested so I do not know whether it will work or not, but it should be a fairly quick and easy thing to try (as long as you can get the JavaScript code into your web page).

Re: Bootstrap tabs\pills refresh problem

The tabs don't get a unique id.  I guess it's how the Juicebox module works.  I have made it work in a tab using the Quicktabs module but I don't get the Boostrap Pills styling I'm after. That's a battle for somone else.

BTW, now that I beleive I can get Juicebox working how I want it to, I have a few questions about the pro version please.

Are there any known problems getting the Pro version to work with the Juicebox module?
Can I create a gallery with the thumbnail tool on the right side with the Juicebox module?
Can I remove the large whitespace above a gallery?
Can I remove the juicebox logo on the mobile display?
I am working on an intranet site that may not allow the server to have Internet access.  Does it call home (require internet connection etc) for any reason and will it not work if it cannot call home etc?
I am constantly creating and deleting test environments.  Is my Pro version tied to a specific site?  I don't want to have to deal with relicensing it every time I build a new test site.

Thanks a lot.

Re: Bootstrap tabs\pills refresh problem

Are there any known problems getting the Pro version to work with the Juicebox module?

There are no problems using Juicebox-Pro with the Juicebox Module for Drupal. Just follow the 'Installation Instructions' here.
When you reach Step #3, be sure to use the files inside the 'jbcore' folder from the Juicebox-Pro v1.5.1 zip package ('juicebox_pro_1.5.1/web/jbcore/').

Please note that upgrading the module to Juicebox-Pro will not change the module's interface.
There will be no additional interface options for setting Pro configuration options (like JuiceboxBuilder-Pro or the Lightroom Plugin).
However, you can configure your gallery as you like by entering individual Pro Options in the 'Juicebox Library - Pro / Manual Config' section of your Drupal Dashboard ('Home -> Administration -> Structure -> Content types -> Article -> Manage Display -> Juicebox settings').

Can I create a gallery with the thumbnail tool on the right side with the Juicebox module?

I am not familiar with the thumbnail tool you refer to so I guess this query is one for Ryan to field over in the Drupal forum.

Can I remove the large whitespace above a gallery?

First of all, please check with your browser's developer tools to see whether the whitespace you refer to is inside or outside the gallery.
If it is inside the gallery, then the space could be due to setting your gallery's height to 100%. If the gallery's parent container has no height specified via CSS, then the gallery's actual height could be 100% of the browser window height. The main images could already be scaled as large as possible within the gallery's image area (if they were scaled any larger, then cropping might occur), leaving space above and below the main images.
Try reducing your gallery's height. Try a fixed pixel value such as 600px to see if this helps.
The gallery will still be responsive in the horizontal dimension (dependent on your web page layout and the dimensions of all parent containers) but will have a fixed height.
However, this is not usually a problem for a web page which scrolls vertically.
Elements in a vertically scrolling web page usually have a fixed height (the height of elements does not usually change when scrolling down a page).
Please also see this FAQ:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

Can I remove the juicebox logo on the mobile display?

Yes. Just use Juicebox-Pro. All Juicebox-Lite galleries feature the Juicebox logo in the lower right corner. This branding is not present in any Juicebox-Pro galleries.

I am working on an intranet site that may not allow the server to have Internet access.  Does it call home (require internet connection etc) for any reason...

Juicebox-Lite contacts our web server only to fetch the logo (for the lower right corner of the galleries). Juicebox-Pro does not call home at all.

... and will it not work if it cannot call home etc?

Both Juicebox-Lite and Juicebox-Pro will both work without an internet connection. Please see the following FAQ regarding local viewing, though.
When I view my gallery locally, I see the message "Juicebox can not display locally in this browser". Why?

Also, please see this additional note for local viewing in Safari 11 and this additional note for local viewing in Firefox 68.

I am constantly creating and deleting test environments.  Is my Pro version tied to a specific site?

No. You do not actually need to inform us of the websites that you use Juicebox-Pro on.
We ask only that you abide by the Terms of Use and upload Pro galleries to only as many website domains as your license allows.
For example, if you have a 5-Site License, then you are free to change the website domains that you upload Pro galleries to at any time you like without notifying us and, as long as you have Pro galleries uploaded to no more than 5 different website domains at any one time, that is fine.

I don't want to have to deal with relicensing it every time I build a new test site.

Please see this FAQ:
How many websites can I use Juicebox-Pro on?

Licenses are only required for publicly accessible domains, so staging and testing domains do not require an additional license.

I hope my notes above help to clarify things.
Please let me know if you have any further queries.