Topic: Editing Mobile Styles

Hi

I need to hide the captions on the mobile device. Can someone direct me to where the styles for the smaller screen can be found or what CSS to employ to hide them. I tried everything based on the HTML, but I can't hide the <p> because the image is in there.

Thanks in advance, Teejay

Re: Editing Mobile Styles

The best I've been able to come up with is the following. It might not be a very clean solution but you might find it to be suitable (or it might at least point you in the right direction). It uses several Juicebox-Pro API methods and events and also jQuery which you will need to include in your web page.
When the gallery is first loaded (onInitComplete), if Small Screen Mode is detected (getScreenMode), the .jb-area-caption container is removed from the Document Object Model (DOM).
This works fine but will only be of use if the Splash Page is not used. As soon as the gallery is expanded (from the Splash Page or from the Expand Button), the .jb-area-caption container gets reinstated but removing the container as before as soon as onExpand is fired does not work due to a timing issue. This is why I have introduced a small delay before removing the .jb-area-caption container again.

<!--START JUICEBOX EMBED-->
<script src="jquery-1.11.1.min.js"></script>
<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
    });
    jb.onInitComplete = function() {
        if (jb.getScreenMode() === 'SMALL') {
            $('.jb-area-caption').remove();
            jb.onExpand = function(expanded) {
                if (expanded) {
                    setTimeout(function() { $('.jb-area-caption').remove(); }, 500);
                }
            };
        }
    };
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I hope this helps.

Re: Editing Mobile Styles

Thanks Steven,

It would work, but I am not using the AUTO screen mode, because client prefers the layouts to match and likes the thumbs at bottom. IF I place the LARGE in this script I am sure it will hide the captions across the board right?

Teejay

4 (edited by iamteejay 2014-06-19 01:13:07)

Re: Editing Mobile Styles

I just found this and it worked when putting it in the CSS for smaller screens:

.jb-caption p {
    display: none;
}

However, this only works in the app when not expanded. Now I need a solution for when it is expanded.

5 (edited by iamteejay 2014-06-19 01:33:01)

Re: Editing Mobile Styles

Steven - when employing your code, it works well, except I have to switch it to AUTO screen size. However, the captions still show up in the expanded mode as well, even though you have code in their to hide it. Makes me think the class is different in the expanded mode.

Here is a link to the work:
http://davidfrenchsculptor.com/recent/

Re: Editing Mobile Styles

when employing your code, it works well, except I have to switch it to AUTO screen size.

If should work for any value of screenMode. The code should be executed only if screenMode="SMALL" or if screenMode="AUTO" and Juicebox chooses to use Small Screen Mode.

However, the captions still show up in the expanded mode as well, even though you have code in their to hide it.

The code works when the gallery is expanded in the same page. However, on iOS devices, the gallery is expanded in a new page (the 'full.html' file within the 'jbcore' folder). Please see the Expand Gallery Behavior support section for more details.
Try the following (in addition to the code above in your main embedding web page).
Open your gallery's 'jbcore/full.html' file in a plain text editor and change:

<!--START JUICEBOX EMBED-->
<script>
    var expanded_jb_gallery = true;
    new juicebox({
        containerid:'juicebox-container',
        galleryHeight:'100%',
        galleryWidth:'100%'
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

... to:

<!--START JUICEBOX EMBED-->
<script>
    var expanded_jb_gallery = true;
    var jb = new juicebox({
        containerid:'juicebox-container',
        galleryHeight:'100%',
        galleryWidth:'100%'
    });
    jb.onInitComplete = function() {
        if (jb.getScreenMode() === 'SMALL') {
            $('.jb-area-caption').remove();
        }
    };
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

(Further testing today suggests that you may also need to increase the timeout from 500ms to 1000ms in my original code for when the gallery is expanded in the same page.)

Re: Editing Mobile Styles

Hi Everyone!

The styles sheet for the expanded view is in the CLASSIC folder inside the JBCORE. There you can manipulate every element and their dog. Whew. Now, I can design this exactly how my customer wants it.

Thanks, STEVEN!

Re: Editing Mobile Styles

The 'jbcore/classic/theme.css' file is the only Juicebox CSS stylesheet and it contains code for every aspect of the gallery (Small Screen Mode, Large Screen Mode, normal and fullscreen modes, etc.).