1 Topic by computerwizard

(1 replies, posted in Juicebox-Pro Support)

Hi, I am trying to improve the performance of my website page that contains our Juicebox slideshow. The Chrome audit function tells me it is being held up by "blocking scripts" and points at juicebox.js as the culprit.   I tried putting "async" on the load of my juicebox.js script and the result was just that the slideshow would not display at all.  Are you aware of any way to work around the fairly long load time involved with starting up Juicebox?

Thanks,

Richard

Go to forum: Juicebox-Pro Support

2 Reply by computerwizard

(7 replies, posted in Juicebox-Pro Support)

Thank you for your help - I did fix the problem and those were not it. The problem was that in the sample program, the code sets the "height" attribute of the enclosing element using the Jquery "height()" method. Unfortunately, the enclosing element of the Juicebox container was a div, and in HTML5 that attribute is deprecated on the <div> element, is not allowed, and the browser ignores it when rendering. Instead it is necessary to set the height in the CSS style attribute, using the jQuery "css()" method.  Problem fixed, sizing now perfect at all calculated heights, and life is wonderful.  Thank you for your suggestions.

Go to forum: Juicebox-Pro Support

3 Reply by computerwizard

(7 replies, posted in Juicebox-Pro Support)

Hi, I am having trouble making the sample program work properly. I integrated it into my app, tweaked it a bit to set the containing <div>'s dimensions the way I wanted (in particular its height) and now it does in fact resize dynamically as I resize the window in and out, pretty much the way I was hoping it would. It has an unfortunate quirk that I can't get rid of, unfortunately.

What seems to be happening is that the gallery does not obey the calculated dimensions properly on the initial display of the page.  Something very peculiar is happening because I can breakpoint the call to SetGallerySize in the Javascript, and I can observe in the Chrome debugger that there is an attribute of "height" on the containing <div> which is correct and exactly what the Javascript calculated. Then when the screen updates, it uses the viewport height as the height of the gallery, DESPITE the fact that even after the page updates, it is still possible to view the containing <div>'s element attributes and see the proper value still there.  The debugger itself reports a displayed height of the container div that is different from same debugger's displayed value of the element's "height" attribute, which is correct.

I'm mystified!  Any thoughts? The startup code appears bound and determined to use the viewport height as the initial display height no matter what my carefully crafted Javascript puts in the div's "height" attribute.  But the calls to setGallerySize (from the sample's doLayout method) seem to address that when I resize the window.

Thank you for any help you can offer.

Go to forum: Juicebox-Pro Support

4 Reply by computerwizard

(7 replies, posted in Juicebox-Pro Support)

That sounds like just the ticket. Thank you for your prompt and knowledgeable response.

Go to forum: Juicebox-Pro Support

5 Topic by computerwizard

(7 replies, posted in Juicebox-Pro Support)

Hi, Juicebox is a great product, thank you! but I am having one issue at the moment.  I have a slideshow which I would like to exhibit smooth and sensible sizing and proportioning as the user might arbitrarily size his browser window. Setting GalleryWidth and GalleryHeight to 100% works nicely for this purpose. Sadly it has a fatal flaw. When the page initially displays, the text and pictures following the slideshow on the page, briefly and very distractingly flash up on the screen, then Juicebox refreshes its display area and poof! The pictures appear where they belong and everything looks beautiful. But that flash is an embarassing and unacceptable issue.  So I enclosed the gallery in a DIV and made the height of the div a fixed constant and that worked, yay.  Now the only problem is that the best fixed constant is different depending on the size of the screen, so I decided to put in a bunch of @media clauses into my CSS that would set the constant to various different values depending on screen width. This SHOULD have worked... but no. It almost worked. The problem is that while my @media statements worked perfectly, JuiceBox was unaware that its viewport area had change size and it did not refresh the display, resulting in the bottom of the gallery pictures getting cut off as you shrink the overall window width.  Hitting F5 solves the problem and JB displays the gallery perfectly in the height assigned.

So yeah, my question is this: How can I encourage/command/beat into submission JuiceBox so it will update its display when the user is sizing the browser window and the gallery height changes thanks to an @media clause being invoked?

Thanks for any advice some out there might have for this situation....

Richard

Go to forum: Juicebox-Pro Support