1 (edited by kodiKat 2017-08-13 18:36:23)

Topic: View Gallery Text Button Cut Off [SOLVED]

I have an embedded gallery on my website and looks great on standard desktops. Unfortunately, on android smart phones it changes to a large splash page and cuts off the "View Gallery" button partially. I've tried resizing the div it's in and resizing the height of the gallery. Nothing seems to change the position of the text. I also noticed buttons used to switch between galleries in the same html page don't have cursors or indicators that it's been clicked.
Website:www.kodikat.com

Re: View Gallery Text Button Cut Off [SOLVED]

Unfortunately, on android smart phones it changes to a large splash page...

Please see the Screen Modes support section for details on how Juicebox adapts to different devices and screen sizes.
With Juicebox-Pro, you would have the ability to force a certain Screen Mode to always be used via the screenMode configuration option (in JuiceboxBuilder-Pro's 'Customize -> General' section).

... and cuts off the "View Gallery" button partially.

The 'VIEW GALLERY' text should be at the bottom of the Splash Page (and there are no configuration options to change its position).
It looks like its position has been changed by some custom CSS on your web page conflicting with the gallery's own CSS.
Your 'homecss.css' file has a lot of CSS type selectors which apply rules to all instances of certain HTML elements (rather than targeting specific elements via id or class selectors).
For example, you have CSS which is being applied to all <img> tags, all heading tags (<h1> through <h6>) and all <a> tags on your web page. Such code will affect all of these tags on your web page, including those used in the gallery. There is no way to isolate the gallery from such CSS and the gallery has no option but to inherit these CSS rules.

It looks like the problem with the 'VIEW GALLERY' text is being caused by the following code in your 'homecss.css' file:

#wrapper #subgallerymain table {
    width: auto;
    height: 40px;
}

If you have a table on your web page which requires these CSS rules, then assign the table an id (or class) and apply the rules to the id (or class) rather than all <table> tags within '#wrapper #subgallerymain'.

I also noticed buttons used to switch between galleries in the same html page don't have cursors or indicators that it's been clicked.

You can set up a certain style under a CSS class (using whatever CSS properties you like) for the selected link and then add or remove the class for the links as appropriate using JavaScript in your loadGallery() function (when a specific gallery has been selected).

Here's an example which switches between two galleries on the same page.
To see the example in action, create a couple of sample galleries with JuiceboxBuilder-Lite and name the gallery folders 'gallery1' and 'gallery2'.
Now, use the following code to create a new HTML file, put the file in the same directory as your gallery folders and open the HTML file in a browser.
The cursor will change to a pointer when the user hovers over a gallery link and the link corresponding to the selected gallery will be underlined.
The example is basic but demonstrates the required functionality which I hope you can incorporate into your own web pages.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <style type="text/css">
            body {
                margin: 0px;
            }

            /* Add pointer cursor to all gallery links */
            .gallery {
                cursor: pointer;
            }

            /* Create style for selected gallery link */
            .gallery.selected {
                text-decoration: underline;
            }
        </style>
        <script type="text/javascript" src="gallery1/jbcore/juicebox.js"></script>
        <script type="text/javascript">
            function loadGallery(base) {
                new juicebox({
                    baseUrl: base + "/",
                    containerId: "juicebox-container",
                    galleryHeight: "400",
                    galleryWidth: "600"
                });
                $('.gallery').removeClass('selected'); // Remove 'selected' class from all gallery links
                $('#' + base).addClass('selected'); // Add 'selected' class to only the selected gallery link
            }
            $(document).ready(function() {
                $('.gallery').click(function() {
                    var base = $(this).attr('id');
                    loadGallery(base);
                });
                loadGallery('gallery1');
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="links">
            <span id="gallery1" class="gallery">Gallery 1</span>
            <span>&nbsp;</span>
            <span id="gallery2" class="gallery">Gallery 2</span>
        </div>
        <div id="juicebox-container"></div>
    </body>
</html>

I hope these notes help you to resolve your problems.

3 (edited by kodiKat 2017-08-15 02:51:35)

Re: View Gallery Text Button Cut Off [SOLVED]

Hey Steven!

First, thank you so much for the fast response!
I was able to get the "View Gallery" in the correct position with your help by removing the unnecessary code. 
(I must have had a reason for it at some point, but not entirely sure now)

Also, I apologize in asking about the cursors! I realized looking back at the page source where I got the embedding multiple galleries with javascript code, that they have a class (.link-button) that I forgot to put in my homecss.css.

Everything is looking great and am very much appreciated for your help!

Thanks again!

Re: View Gallery Text Button Cut Off [SOLVED]

You're welcome!
I'm glad you've been able to sort everything out.
Thank you for letting me know.