You are not logged in. Please login or register.
Juicebox Support Forum → Posts by erikarand
Pages 1
Can you optimize the loading gif for retina displays?
I've replaced the spinning Juicebox logo gif with my own loading gif. However, it's not optimized for retina displays, so it appears somewhat pixelated on a retina display. If there is a workaround for this currently, I'd love to hear about it, but it seems like it's likely a feature that would need to be added.
Thanks! That is very helpful.
I was clearing the cache while testing locally, but never got it to work until I uploaded it.
I uploaded the gallery and it's working now that it's online. I don't get why, but it's working. I'd recommend adding a note to the relevant documentation that this won't work when testing offline.
Just to be clear, I kept the jbcore folder intact and moved it up one directory. I'd like my master jbcore directory to be one level up from all the galleries.
Actually, it may be pointing to a different location for the .js file that's causing the problem. I'm having a lot of trouble tracking it down.
I figured out that I can have it point to a different URL than the default for theme.css. If I could get that to work, that would do the trick. I'd love for all my galleries to point to the same theme, same version of juicebox (so I can update easily), and same button icons (which I may change later). It seems like this should be achievable using a combination of the themeUrl config option, and this:
https://www.juicebox.net/support/embedd … ore-folder
However, when I point themeUrl to a different location (in my case it's this: "../jbcore/classic/theme.css"), the navigation arrows and social media buttons don't load.
I'm testing this locally on my machine using Firefox. Is there some reason that this in particular wouldn't work locally?
I have a number of changes that I make to every gallery that require editing theme.css. The thing is that after every time I edit a gallery using the builder (to add / remove an image, edit a caption, etc), I have to manually make these changes to theme.css again. I'm wondering if there's a way to put this custom css in my own css file and add that css file in with just one line somewhere (rather than adding it to theme.css). Even if I still have to add in this one line and my css file every time after using the builder, it would save me a lot of time. It will also let me more easily teach other people how to update the galleries.
It's not obvious to me what file should be loading the custom css though. I imagine it should be another line in whatever file loads theme.css. But I can't seem to find that.
I have galleries with some varying aspect ratios. I would like Juicebox to keep the width of each image constant (filling 100% of its parent element), varying the height as aspect ratio changes. How can I achieve this?
In my galleries, gallery width and height are set to 100% in the config. I'm using the following code to embed in a squarespace page (width and height of iframe are also set to 100%):
<div style="position: relative; padding-bottom: 75%; padding-top: 35px; height: 0; overflow: hidden;">
<iframe src="http://borrowsynths.com/erika/galleries/landscape/index.html" frameborder="0" scrolling="no" style=" position: absolute; top:0; left: 0; width: 100%; height: 100%;"></iframe>
</div>All of the images themselves are 1500px wide btw.
Any help achieving this would be much appreciated. Thanks!
I haven't tried your new suggestions yet, but here's a version of the page that loads juicebox.net into the iframe:
http://www.erikarand.com/juicebox-test2
Setting it to always use large screen mode fixed the problem. This is a little strange, because it didn't actually look like it was ever using small screen mode before (I never saw the splash screen).
In my opinion the positioning of the caption should be customizable in small screen mode. There are plenty of scenarios on mobile where it makes sense for the caption to not overlay the image.
Here's the code I'm using to embed:
<div style="position: relative; padding-bottom: 75%; padding-top: 35px; height: 0; overflow: hidden;">
<iframe src="http://borrowsynths.com/erika/galleries/landscape/index.html" frameborder="0" scrolling="no" style=" position: absolute; top:0; left: 0; width: 100%; height: 100%;"></iframe>
</div>I tried changing the height of the iframe, and also of the div. Neither seems to fix the problem, and both mess up the layout of the page in other ways.
I tried replacing the URL of the gallery with another URL, as you suggested, and it doesn't seem to have the same issue. When I switch the phone's orientation the page inside resizes properly to fill 100% of the horizontal space. I can switch back and forth and it resizes properly in both directions. In contrast, with the juicebox gallery, it resizes properly when I switch from portrait to landscape orientation, but when I switch back to portrait, the gallery doesn't resize, instead staying the size it just was in landscape orientation, but cut off / cropped by the iframe.
The problem also happens in Safari on iOS. It doesn't happen in Safari on desktop.
Thanks. I tried changing image transition type to slide, but the problem persists on Chrome. I need to keep the other options you mentioned the way they are.
When I just load the gallery itself (the index.html file that's generated), the issue doesn't occur. So it may be specific to embedding in an iframe.
I'm loading the gallery in an iframe on squarespace.
Please let me know if you need any more info. Thanks!
If I load my gallery on an iPhone, holding the phone in a portrait orientation, the images look fine. Likewise, if I load the page holding the phone in a landscape orientation (a less likely scenario).
But if I do either of the following:
- load the page holding the phone in portrait mode, tilt the phone into landscape view, then tilt back into portrait mode
- load the page in landscape mode, then tilt the phone into portrait mode
the image ends up getting cropped. Seems as if it is continuing to display it at the proper size for landscape mode, but within the proper sized frame for portrait mode. So it's getting majorly cropped (perhaps 1/4 of the image is visible).
The issue exists on both Chrome and Safari on iOS.
Here's the page I'm testing:
http://www.erikarand.com/juicebox-test
To add a little more context: the same problem does not occur on desktop when resizing window down to minimum width (which triggers squarespace's mobile layout).
It does occur on both Chrome and Safari on iOS.
I have set up captions to sit below the images. Looks good on desktop. On an iPhone, with captions above a certain length (if they are long enough to break onto multiple lines on the iPhone's screen), the entire caption gets pushed up, so that it sits partially on top of the image. I want the caption to start in the same place (below the image, as defined by the amount of caption padding I've entered using custom CSS), and if there is enough text for a line break, the next line should start below the first. As is, the entire caption is being moved up.
I tried messing with the max caption height setting in the builder, but if I increase this, it does other undesired things to the layout.
I am embedding the gallery in an iframe on squarespace.
Here's where I'm testing it:
http://www.erikarand.com/juicebox-test
First image looks good. Second image has the issue I'm describing ("Sneffels Mountain Range ..."). Let me know if you need additional info. Thanks!
I like that the button bar can be set to time out after a period of inactivity. However, on autoplay, it reappears whenever the gallery advances to the next image. This kind of defeats the purpose of the timeout. I would like the button bar to remain hidden until the user moves the mouse, clicks, or touches the gallery. Is this possible?
Here's what I'm testing:
http://www.erikarand.com/juicebox-test
Let me know if you need any more info. Thanks!
To follow up on this – this seems like a feature that should be included in the builder. I can see many people wanting control over this. As is, it's necessary to add this CSS in after using the builder (and if any changes are made in the builder, it needs to be added in again). Having control over the positioning of captions seems like a pretty basic and essential feature.
That worked. Thanks so much!
Also, not as crucial, but I'd also like to have control over the 12px of top / bottom padding.
I can't get the captions titles to align with the left edge of the image. I have them set to align left, and have tried messing around with all the various padding settings. Have also tried messing with the CSS, but can't find what needs to be modified.
When I inspect the page in Firefox and Chrome, the problematic element of the page is div.jb-caption.jb-classifier-layer. I can see that this has 18px of padding on the left and right, as well as 12px on the top and bottom. I need to eliminate the left and right padding. I've looked at all the options in the builder, as well as combing through the css theme, the config xml file, and index.html. I can't find anywhere to modify this.
Any help would be greatly appreciated. Thanks!
Here is the link where we are temporarily testing this:
http://www.erikarand.com/juicebox-test
Pages 1
Juicebox Support Forum → Posts by erikarand
Powered by PunBB, supported by Informer Technologies, Inc.