Topic: border-radius
Has anyone managed to successfully specify this in CSS for the thumbs? I thought I'd cracked it, but it's not working in Chrome. Any ideas would be gratefully received.
Pages 1
You are not logged in. Please login or register.
Juicebox Support Forum → Juicebox-Pro Support → border-radius
Has anyone managed to successfully specify this in CSS for the thumbs? I thought I'd cracked it, but it's not working in Chrome. Any ideas would be gratefully received.
It is currently not possible to change the thumbnail border width. This value is set in the 'juicebox.js' JavaScript file which is packed and obfuscated and cannot be modified.
However, the ability to set this parameter via a configuration option (rather than via modification of CSS or JavaScript) is on the roadmap and will hopefully be included in a future version (though I do not know exactly when this might be).
No, not border-width - border-radius. Used to add rounded borders to elements. As I said, I have it successfully working in IE and FF, but not in Chrome.
Sorry for the misunderstanding. This is also on the roadmap.
In the meantime, try adding the following to your gallery's CSS:
.jb-idx-thb-frame, .jb-idx-thumb img {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}Thanks Steven. Unfortunately, it doesn't work. That just affects the corners of the active/hover thumb border. The underlying thumb remains unchanged.
However, this:
.jb-idx-thumb {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
... works in FF and IE, but not Chrome.
I tested the code before I posted it and it works in Firefox 14.0.1, IE9, Safari 5.1.7, Chrome 21 and Opera 12 on my PC.
I just inserted the code at the bottom of the 'jbcore/classic/theme.css' file.
The border radius is applied to both the thumbnail image and the thumbnail border.
Try again and clear your browser's cache before reloading the gallery.
If this does not help, perhaps the platform (PC vs Mac) or version of Chrome that you are using are contributing factors.
Right, I've figured out why you're not seeing the same issue. I'm using rectangular thumbs - 75px by 50px. If I set the width to 50px as well, then the border-radius is applied correctly.
Any ideas how I can set the border-radius on rectangular thumbs? Not sure why this should make a difference.
Just a quick update to say that I have not forgotten about this one but as of yet, I have been unable to make it work in Chrome also.
A web search with terms such as 'Chrome border radius' brings up many pages to sift through but no suggestions I have tried have worked.
We may just have to wait for this to be implemented officially into a future version of Juicebox.
Thanks Steven. Nice to know it's not just me!
While it's nice to see that you've added support for a thumbnail border-radius in the config file, it still isn't working properly in Chrome. Same issue as before - works fine on square thumbs, doesn't work on rectangular thumbs.
Hi,
I just tested rounded corners on rectangular thumbnails and it works here. Using the "thumbCornerRadius" config option. Which version of Chrome are you using? Which OS are you on? Can you provide an example gallery URL?
Chrome is up-to-date. Testing on Win 7, 64 bit. Can't provide gallery URL as I'm just testing at the moment and it's not live. The border is being rounded off, but the image isn't. Firefox is fine.
Rounded thumbs are working here on Win7 with Chrome 23. Please provide a gallery URL or screen shot so we can take a look.
I've sort of figured out the problem. It's the scaling (or rather the lack of scaling). If I make the thumbnail height and width parameters the same as the actual dimensions of the thumbnails, the problem disappears. So the issue arises when the actual thumbnails are larger than the parameters set in the config. options.
Is there any way of making the thumbs scale to the defined area?
the issue arises when the actual thumbnails are larger than the parameters set in the config. options.
ok yes that would cause the issue. Not sure this is a use-case that occurs very often. Any reason why you need to scale the thumbs?
the issue arises when the actual thumbnails are larger than the parameters set in the config. options.
ok yes that would cause the issue. Not sure this is a use-case that occurs very often. Any reason why you need to scale the thumbs?
The site I intend to use Juicebox on (well, the second site...) has 200 existing Simpleviewer galleries. The thumbs for those galleries aren't all the same size, because the site has evolved over the years.
What that means in practice is that if I can't utilise the existing thumbs, then I'll need to rebuild thumbnails for 200 galleries.
Any suggestions? It's not really practical for me to resize thumbs for 200 galleries. I can't even batch resize them, because the images aren't all the same ratio.
Any chance that future versions will scale the thumbs to fit, like Simpleviewer?
Hi, we are aware of the issue and it's on our list to fix in a future version.
Possible workarounds would be:
* Don't use rounded thumbnail corners
* Use square thumbnails
* Resize your thumbnail JPGs to match the actual display dimensions.
Juicebox Support Forum → Juicebox-Pro Support → border-radius
Powered by PunBB, supported by Informer Technologies, Inc.