Topic: Help: Upgrade messed up Gallery (too big for screen)

At Steven Speils' direction, we upgraded to SVPro 2.3.1 from 2.2.0, but alas now the gallery-view is messed up! Please help! In 2.2.0 it was fitting snuggly within the browser screen, *and I had done all the dimensions accordingly in v. 2.2.0 so it would all fit well, but now it is too big for the screen. It's at: www.deVieMusic.com/available-art so you can see what it's doing.

Is there an easy fix for this, or we do we need to demote ourselves back to v. 2.2.0?

Last edited by dvm1 (2013-10-15 22:32:53)

Re: Help: Upgrade messed up Gallery (too big for screen)

Your gallery's dimensions are set to 150% x 150% in the following line:

simpleviewer.load('sv-container', '150%', '150%', '222222', true);

The only parent container of your gallery is your web page's <body> tag so your gallery's width is 150% of the user's browser window width and its height is 150% of the user's browser window height (ie. the gallery is always going to be larger than the user's browser window, no matter what its size).
If you want the gallery to fill the browser window, set your gallery's dimensions to 100% x 100%:

simpleviewer.load('sv-container', '100%', '100%', '222222', true);
Steven Speirs
SimpleViewer Support Team.

Re: Help: Upgrade messed up Gallery (too big for screen)

Thank you for your speedy help, I appreciate it!

I guessed you meant that's in index.html file so I fixed it there.

Unrelated question, is there a way to have the Back Button on the bottom-left, instead of the top-left? I didn't see an option for that in the Pro Options. It would look better there so it's not competing with the gallery title.

Last edited by dvm1 (2013-10-15 22:33:16)

Re: Help: Upgrade messed up Gallery (too big for screen)

The Button Bar can be positioned using the buttonBarPosition, buttonBarHAlign and buttonBarVAlign configuration options.
Please see the Button Bar Options section of the Config Options page for details.

To position the Button Bar bottom-left (of the image area, not the entire stage), use:

buttonBarPosition="BOTTOM"
buttonBarHAlign="LEFT"

If using svBuilder-Pro to create or edit your gallery, you can find these options in the 'Customize -> Button Bar' section.

If you want to position the Button Bar bottom-left of the entire stage when you have the thumbnail area to the left of the image area, you would need to use a Fixed Layout.

Steven Speirs
SimpleViewer Support Team.

Re: Help: Upgrade messed up Gallery (too big for screen)

Hi: I'm referring to the *BACK* Button, (which appears as a separate item from the Button Bar, apparently). I tried some of the configurations for that at http://simpleviewer.net/simpleviewer/pr … backbutton to get it to even show up at all (the default white text wasn't showing up), but want to place the BACK Button at BOTTOM LEFT of the image area and am wondering if there is a way to do that.

Re: Help: Upgrade messed up Gallery (too big for screen)

Sorry. The Back Button can be positioned only using backButtonX and backButtonY which are both relative to the top-left corner of the stage.
You will be able to position it in the bottom-left of your image area only if your gallery's dimensions are expressed as fixed pixel values (not percentages).
If your gallery's dimensions are expressed as percentages and the size of the gallery is dynamic (depending on the size of the user's browser window), then the Back Button may not always be displayed at the bottom of your image area.

Steven Speirs
SimpleViewer Support Team.

Re: Help: Upgrade messed up Gallery (too big for screen)

Okay thanks. Sounds like more than I want to get into so I'll leave it off.
Thanks for all your help.

Re: Help: Upgrade messed up Gallery (too big for screen)

You could, however, overlay an HTML link (which is essentially what the Back Button is) on top of the gallery and position it relative to the bottom of the web page using CSS.
For example, try adding the following code to the <body> section of your web page:

<div id="overlay" style="position: absolute; bottom: 10px; left: 10px; z-index: 999;">
    <a href="http://www.example.com/" style="text-decoration: none; color: #ffffff; font-family: Verdana; font-size: 20px;">Link Text</a>
</div>

In order for this to work, you will need to make your gallery's background transparent:

simpleviewer.load('sv-container', '100%', '100%', 'transparent', true);

Now that your gallery's background is transparent, you can set the background color using CSS in the <head> section of your web page.

<style type="text/css">
    body {
        background-color: #000000;
    }
</style>

The entire web page would then look something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>SimpleViewer-Pro Gallery</title>
    <style type="text/css">
        body {
            background-color: #000000;
        }
    </style>
</head>
<body>
    <div id="overlay" style="position: absolute; bottom: 10px; left: 10px; z-index: 999;">
        <a href="http://www.example.com" style="text-decoration: none; color: #ffffff; font-family: Verdana; font-size: 20px;">Link Text</a>
    </div>
    <!--START SIMPLEVIEWER EMBED.-->
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
    simpleviewer.ready(function () {
        simpleviewer.load('sv-container', '100%', '100%', 'transparent', true);
    });
    </script>
    <div id="sv-container" style="position: relative;"></div>
    <!-- END SIMPLEVIEWER EMBED -->
</body>
</html>
Steven Speirs
SimpleViewer Support Team.

Re: Help: Upgrade messed up Gallery (too big for screen)

Thanks for your continued help, I appreciate it.
That part looks too complicated for me, so I went ahead and arranged it with the options I had to something decent. www.deVieMusic.com/Available-Art .

What looks like my last remaining question before I call this gallery "done":
I entered: imageNavScale="3"
in attempts to make the moving *Cursor* type Image navigation < > things bigger, but this didn't do anything. Is this because they are "cursor"? Can I easily make them bigger? I want to stick with the moving "cursor" type.

Last edited by dvm1 (2013-10-15 22:33:50)

Re: Help: Upgrade messed up Gallery (too big for screen)

The imageNavScale configuration options affects only image nav buttons which are positioned on the image overlay.
Unfortunately, it is not possible to change the size of the image nav buttons attached to the cursor.

Steven Speirs
SimpleViewer Support Team.