• CGM
  • Member
  • Offline
  • Registered: 2013-12-09
  • Posts: 9

Topic: can't "hide" gallery within AP Div on Dreamweaver

Hello all,

I have successfully embedded a SimpleViewer gallery into an HTML page in Dreamweaver. It is currently loading into an AP Div that is supposed to be hidden upon opening the page - it only needs to show after the user clicks on a button.

However, although the AP Div is hidden in Dreamweaver, I can see the gallery right away after publishing the page, which is not what I want. I also want the AP Div to "hide" after clicking on a different button, and that's not working either. I'm afraid one of the settings in the embed code I'm using is triggering the gallery to appear all by itself (probably the flashvars parameter, which I honestly don't know what it does, but it was the only way I managed to place the gallery inside the AP Div). This is what the code I'm using looks like:

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="simpleviewer_gallery/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars = {};
flashvars.baseURL = "simpleviewer_gallery/";
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "100%", "100%", "222222", true, flashvars);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->

I have very basic knowledge of code, so please bear with me.
I'm using Dreamweaver CS4. I might be leaving out some important information; let me know if that's the case and sorry in advance!

many thanks,

Carolina

  • Registered: 2008-07-06
  • Posts: 6,333

Re: can't "hide" gallery within AP Div on Dreamweaver

probably the flashvars parameter, which I honestly don't know what it does

The flashvars parameter passes variables to the SWF file. In your case it simply tells SimpleViewer (via the baseURL configuration option) where your gallery is located on your web server.

The standard embedding code (which you use) will display a gallery in the 'sv-container' div as soon as the page is ready.

If you want to display a gallery on demand, you could either:
(1) Use the SimpleViewer-Pro API show( show: Boolean ) method to show/hide a gallery.
Details of the SimpleViewer-Pro API can be found here.
... or:
(2) Use CSS and JavaScript to hide the 'sv-container' div, perhaps by using display: block; (to show) or display: none; (to hide) or visibility: visible; (to show) or visibility: hidden; (to hide).

As an example, create a sample gallery with svBuilder-Pro and use the following code as the gallery's 'index.html' page.
Use the links above the gallery to show or hide the gallery using the different methods described above.

<!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>
</head>
<body>
    
    <!--START SIMPLEVIEWER EMBED.-->
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
        var svAPI;
        
        function svComplete() {
            svAPI = document.getElementById('svInstance');        
        };

        var flashvars = {};
        flashvars.enableAPI = "true";

        var params = {};
        params.allowfullscreen = true;
        params.allowscriptaccess = "always";

        var attributes = {};
        attributes.id = "svInstance";
        attributes.name = "svInstance";

        simpleviewer.ready(function() {
            svAPI = simpleviewer.load('sv-container', '600', '400', '222222', true, flashvars, params, attributes);
        });    

        function showCSSDisplay() {
            document.getElementById('sv-container').style.visibility = 'visible';
            document.getElementById('sv-container').style.display = 'block';
        }
        function hideCSSDisplay() {
            document.getElementById('sv-container').style.visibility = 'visible';
            document.getElementById('sv-container').style.display = 'none';
        }
        function showCSSVisibility() {
            document.getElementById('sv-container').style.display = 'block';
            document.getElementById('sv-container').style.visibility = 'visible';
        }
        function hideCSSVisibility() {
            document.getElementById('sv-container').style.display = 'block';
            document.getElementById('sv-container').style.visibility = 'hidden';
        }
        function showAPI() {
            document.getElementById('sv-container').style.visibility = 'visible';
            document.getElementById('sv-container').style.display = 'block';
            svAPI.show(true);
        }
        function hideAPI() {
            document.getElementById('sv-container').style.visibility = 'visible';
            document.getElementById('sv-container').style.display = 'block';
            svAPI.show(false);
        }
    </script>
    <div>
        <a href="#" onclick="javascript: showCSSDisplay();">Show using JavaScript and CSS 'display'</a><br />
        <a href="#" onclick="javascript: hideCSSDisplay();">Hide using JavaScript and CSS 'display'</a><br />
        <a href="#" onclick="javascript: showCSSVisibility();">Show using JavaScript and CSS 'visibility'</a><br />
        <a href="#" onclick="javascript: hideCSSVisibility();">Hide using JavaScript and CSS 'visibility'</a><br />
        <a href="#" onclick="javascript: showAPI();">Show using SimpleViewer-Pro API</a><br />
        <a href="#" onclick="javascript: hideAPI();">Hide using SimpleViewer-Pro API</a><br />
    </div>
    <div id="sv-container"></div>
    <!-- END SIMPLEVIEWER EMBED -->
</body>
</html>

Please note that there is code in the functions above (to reset the show/hide status of methods) which would not be necessary if only using one method to show or hide the gallery. This is used only to ensure that every time a 'Show' link is clicked (no matter what method is selected), the gallery will be displayed.

Steven Speirs
SimpleViewer Support Team
  • CGM
  • Member
  • Offline
  • Registered: 2013-12-09
  • Posts: 9

Re: can't "hide" gallery within AP Div on Dreamweaver

Thank you Steven for your answer, it's working fine now!

Actually, it just did by adding the params and attributes you suggested to the code:

<!--START SIMPLEVIEWER EMBED.-->
    <script type="text/javascript" src="simpleviewer_gallery/svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
var flashvars = {};
        flashvars.baseURL = "simpleviewer_gallery/";
var params = {};
        params.allowfullscreen = true;
        params.allowscriptaccess = "always";
var attributes = {};
        attributes.id = "svInstance";
        attributes.name = "svInstance";
simpleviewer.ready(function () {
simpleviewer.load("sv-container", "100%", "100%", "FFFFFF", true, flashvars, params, attributes);
});
  </script>
    <div id="sv-container"></div>
    <!-- END SIMPLEVIEWER EMBED -->

The button that's supposed to operate the contents on demand was already configured to show both divs when clicked, 'sv-container' and 'sv-parent' (and hide when a different button is clicked), so it was your solution with the code that did it..

Again, I still have to figure out what happened, but at least it's doing what I want! I have a lot to learn, I guess :)

Now I have to see if all this works with multiple divs containing different galleries and controlled by different buttons.
An alternative solution I thought of is having a new page open at the click of each button, each with a different gallery; then I wouldn't mind it triggering the gallery as soon as the page loads... but I like the other solution better, with everything in one page.

Thanks again, you really saved me!!

  • Registered: 2008-07-06
  • Posts: 6,333

Re: can't "hide" gallery within AP Div on Dreamweaver

I'm glad that you have been able to resolve your problem.

If you plan to embed multiple galleries on a single web page, make sure that you embed each gallery into a div with a unique id and that you give each gallery unique flashvars, params and attributes variable names.
Also, please note that you need to load the 'simpleviewer.js' file only once per page.

Steven Speirs
SimpleViewer Support Team