Topic: Juicebox not scaling in Wordpress

Hello,

I added a juicebox gallery to a wordpress site i started today - http://chesterfieldsbronzes.com/temp/

I would like the gallery to scale the same way that it does here: http://chesterfieldsbronzes.com/temp/gallery/

When a user adjust there browser dimensions.  I am building the site with Catalyst (brand new to it)

Any help would be awesome!

Re: Juicebox not scaling in Wordpress

A Juicebox gallery will resize dynamically with the size of the user's browser window only if the dimensions of the gallery itself and those of all parent containers are expressed as percentages. If there is an absolute pixel value anywhere up the chain, the gallery's size will become fixed (e.g. 100% x 100% x 800px = 800px).

In a WordPress environment, this might be difficult to achieve as your WordPress theme might have a main column with a fixed width (or some other fixed dimension in a container that the gallery is nested within).

3 (edited by precisionart 2013-03-25 17:46:18)

Re: Juicebox not scaling in Wordpress

Hello Steven,

Thanks for the reply.  compare http://chesterfieldsbronzes.com/temp/ with http://chesterfieldsbronzes.com/temp/test2/

The latter link is copied code from http://acquaphoto.com/ and works perfectly.   Since this is within the same theme that rules out the theme or wordpress container as being the issue.

If you look at their embed code it is huge compared to mine which makes me think they took a different approach  (im using the Juicebox-builder and would prefer to keep using)

What is the simplest way i can achieve this result?  By the way, please view the first link on a phone it is totally broken. 

Thanks

Re: Juicebox not scaling in Wordpress

Your gallery at http://chesterfieldsbronzes.com/temp/ does scale dynamically with the size of the user's browser window.
If you reduce the width of your browser window, you will see the number of thumbnails in the gallery reduce and when the gallery's width becomes smaller than the width of the main image, the main image shrinks to fit.
Likewise, reduce the height of your browser window and you will see the main image shrink to fit the available space.
Please bear in mind that because you have more content on your page than just the gallery itself, you may need to scroll down your page to see the gallery resize when changing your browser window's dimensions.

By the way, please view the first link on a phone it is totally broken.

It looks like there may be a conflict between the CSS in your current theme and that of the gallery itself.
Try temporarily reverting to the default WordPress theme to see if this makes a difference.
There is a lot of generalized CSS at the top of your theme's 'wp-content/themes/dynamik/css/dynamik-min.css file' which the gallery will inherit.
For example, there are CSS rules in that file that apply to all <div> and <img> tags on your page, including those in your gallery. Try removing this generalized CSS from the 'wp-content/themes/dynamik/css/dynamik-min.css' file to see if it helps.

Re: Juicebox not scaling in Wordpress

Thank you for your detailed reply.  I am not really a developer so i may be missing something but this link is in the same theme is it not? http://chesterfieldsbronzes.com/temp/test2/  and it works.  Doesn't that ruled out the theme/css?

Re: Juicebox not scaling in Wordpress

What I am saying in my post above is that both of your galleries (http://chesterfieldsbronzes.com/temp/ and http://chesterfieldsbronzes.com/temp/test2/) scale dynamically with the size of the user's browser window.
If this does not happen in your own browser, try clearing your browser's cache to ensure that it is not hanging onto and using older versions of your gallery files.

Re: Juicebox not scaling in Wordpress

Understand, they both look great on my desktop.  However, the first link is virtually unusable when viewed on my phone and the second link is flawless.  In the first link i can only see a smidgen of the main image

Since both links are embedded in the same theme, somehow the code must be different.

Re: Juicebox not scaling in Wordpress

Looking at the source of the page which does not function as expected on mobile devices, I notice that your two galleries use different configuration options. The gallery that does not function as expected uses a Splash Page (whereas the other gallery sets useSplashPage="NEVER"). It is possible that there is a CSS conflict which affects only the Splash Page. (The gallery itself functions OK once the Splash Page is clicked.)
Try using the same configuration options for both galleries to see if this makes a difference.

Re: Juicebox not scaling in Wordpress

PERFECT!!!!!!!!!!!!!!!!!!!

Thank you so much!