Topic: Using the "vertical-template" for header & footer

Hey there,

I have a couple of questions regarding the Vertical Resizable Gallery with Header Example.

1. How do i "mix" the example's <script> with the <script> svBuilder generates?

Here's the example script (I already adjusted file paths & <div> IDs for header & footer)...

<script type="text/javascript">
    var svCoreURL = 'svcore/';
    </script>
    <script type="text/javascript" src="svcore/js/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
    function doLayout() {
        var winHeight, headerHeight, footerHeight;
        winHeight = window.innerHeight ? window.innerHeight : $(window).height();
        headerHeight = $('#gallery_header_box').outerHeight();
        footerHeight = $('#gallery_footer_box').outerHeight();
        var newH = parseInt(winHeight) - parseInt(headerHeight) - parseInt(footerHeight);
        $('#flashContent').height(newH);
    }

    $(document).ready(function () {
        doLayout();       
        $(window).bind('resize', doLayout);
        SV.simpleviewer.load('sv-container', '100%', '100%', '222222',true);
    });
    </script>

...anf here is my adjusted script that comes from svBuilder.

<!--START SV SCRAPS EMBED -->
        <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
        <script type="text/javascript">
        var flashvars = {};
            flashvars.galleryURL = "scraps_gallery.xml";
            flashvars.preloaderColor = "#2385CA";
            simpleviewer.ready(function () {
            simpleviewer.load('sv-scraps', '100%', '100%', 'transparent', true, flashvars, false);
        });
        </script>
        <div id="sv-scraps"></div>
        <!--END SV SCRAPS EMBED -->

How do these two go together?


2. The #flashcontent ID sets height: 600px. Is there a reason for this? Can it not be 100% as well since width: 100%?

Any help is appreciated.
G.

Re: Using the "vertical-template" for header & footer

Try this:

<script type="text/javascript" src="svcore/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
function doLayout() {
    var winHeight, headerHeight, footerHeight;
    winHeight = window.innerHeight ? window.innerHeight : $(window).height();
    headerHeight = $('#gallery_header_box').outerHeight();
    footerHeight = $('#gallery_footer_box').outerHeight();
    var newH = parseInt(winHeight) - parseInt(headerHeight) - parseInt(footerHeight);
    $('#flashContent').height(newH);
}
$(document).ready(function () {
    doLayout();       
    $(window).bind('resize', doLayout);
    var flashvars = {};
    flashvars.galleryURL = "scraps_gallery.xml";
    flashvars.preloaderColor = "#2385CA";
    simpleviewer.load('sv-container', '100%', '100%', 'transparent', true, flashvars);
});
</script>

(1) If using the latest 'svcore' folder (which your v2.1.3 gallery will do), there is no need to use the 'svCoreURL' variable
(2) Also, with the latest 'svcore' folder, 'SV.simpleviewer.load' can be replaced with 'simpleviewer.load'
(3) The embed code parameter immediately after 'flashvars' should be 'params' which, if not defined, should be 'null' rather than 'false'
(4) It does not matter what value is given to the 'flashContent' <div> in the CSS file as the height is set via JavaScript in the doLayout(); function after the CSS file is read

Steven Speirs
SimpleViewer Support Team.

Re: Using the "vertical-template" for header & footer

with the latest 'svcore' folder, 'SV.simpleviewer.load' can be replaced with 'simpleviewer.load'

I wasn't sure about that and didn't know if it might do something different. Works like a charm now.

The embed code parameter immediately after 'flashvars' should be 'params' which, if not defined, should be 'null' rather than 'false'

Well, I had problems with that. svBuilder created a line like this...

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

...after adding flashvars the gallery.xml didn't load so I removed the null parameters.

What I actually need is to make sure color correction is turned of. The XML value already is useColorCorrection="false" but for some reason that setting doesn't stick.

What would be the right way to ensure color correction stays turned off?

Re: Using the "vertical-template" for header & footer

What would be the right way to ensure color correction stays turned off?

Use the following line:

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

See the Embed Code Parameters section here for details: http://simpleviewer.net/simpleviewer/su … tml#params

Steven Speirs
SimpleViewer Support Team.

Re: Using the "vertical-template" for header & footer

Ok, works now. Maybe I did something wrong.

Thanks again Steven.

regards
G.