Topic: multiple galleries on different AP divs

Hello all,

I'm building a basic website on Dreamweaver and I would like to have different Simpleviewer galleries appear when clicking on different thumbnails (by showing and hiding AP Divs).

I have managed to make one of the galleries appear using the "hide-show elements" function on DW. Basically what happens is that the thumbnail "menu" that was displayed at first disappears, and gives place to an AP Div called sv_parent so that the first animated gallery is triggered.

Clicking on a button in the layout takes you back to the thumbnail menu.

What I would like to accomplish is to be able to click on a different thumbnail and have a different gallery appear. That, multiplied by 7, 8 or as many galleries as needed.

I successfully built a second gallery with new images. I created a new AP Div in my base Dreamweaver file that I named sv_parent2 (to tell it apart from the other AP Div which contains Gallery 1). I then changed the name of the AP Divs that are created in the different files SV generates automatically, so that the names match. But I obviously must be doing something wrong because whatever it is I'm doing, it's not working.

(I saved the two different SV galleries onto different folders named simpleviewer_gallery and simpleviewer_gallery2, each with their respective "images", "svcore" and "thumbs" folders, and the respective index.html files and gallery.xml files. Should I have named these two files differently for the different galleries?)

So basically my question is, is there any way of having different SV galleries within a single website, loaded onto different AP Divs that can be hidden/shown? Could someone help me make this happen?

I would really appreciate any help.

Thanks in advance,
Carolina

Re: multiple galleries on different AP divs

If you are looking to dynamically load different SimpleViewer galleries into a container on a single web page via links, then please see this forum post to see how it can be done.
Essentially, you would switch between your galleries by dynamically setting the baseURL with JavaScript.
The example uses just two galleries but it can be scaled up to as many as you like.
As long as each gallery has a unique gallery folder name, there is no need to rename any files within any gallery folder.

Steven Speirs
SimpleViewer Support Team.

Re: multiple galleries on different AP divs

Thank you very much Steven for your quick response.

Of course, it sounds much more sensible to load the different galleries onto the same AP Div and not different ones, as I had thought at first... the thing is that my knowledge of web design and coding is very basic so I hadn't even considered that possibility.

I'll give that a try and hopefully you won't hear from me for a little while.

Thanks again!
Carolina

Re: multiple galleries on different AP divs

Hopefully you'll get on fine. The example in this forum post is essentially a fully working test case. All it needs is a couple of sample galleries. You should hopefully be able to integrate the process by which the galleries are loaded into your own web site.

Steven Speirs
SimpleViewer Support Team.

Re: multiple galleries on different AP divs

Hello again!

Following your guidelines Steven, and after a few unsuccessful attempts, I have managed to load my different galleries onto the same <div id="sv-container"></div> on my main page. The thing is, I would need to unload the <div id="sv-container"></div> so I can go back to my initial menu, because I can't switch between galleries as it is; the displayed gallery stays loaded no matter what I do. I've tried the Show/Hide elements in Dreamweaver and the AP div just won't go away...

So obviously I'm closer than before but still not there. I'd like for a different button (which is always visible on top), to take me back to my initial thumbprint menu, that is, *remove* each of the galleries once they're loaded.

Also, is it possible to add an X button to the galleries themselves so I can close them from within?

The following is what I'm using as code for this (only pasting what I think is relevant to this function, please let me know if you need more info):

In the head section:

function loadGallery(base) {
            flashvars={};
            flashvars.baseURL=base;
            simpleviewer.ready(function () {
                simpleviewer.load('sv-container', '100%', '100%', 'FFFFFF', true, flashvars);
            });
        }

In the body:

<a href="javascript:;"><img src="thumbprints/imgs/thumbs-i-01.jpg" alt="A mano" width="187" height="187" onClick="loadGallery('simpleviewer_gallery2/');return false"></a>

<a href="javascript:;"><img src="thumbprints/imgs/thumbs-i-02.jpg" alt="Renders" width="187" height="187" onClick="loadGallery('simpleviewer_gallery/');return false;"></a>



I read here http://www.simpleviewer.net/forum/viewt … p?id=12611 that you can use a dispose ( ) function, by enabling the API config option in the gallery.xml files of each SV gallery (which I did by following this url http://www.simpleviewer.net/simpleviewe … tions.html), but I'm not sure how to use the function itself. I tried the following on the button I want taking me back to the menu:

<img src="imgs/menu/2-imagenes.gif" alt="Imágenes" name="Image2" width="60" height="20" id="Image2" onClick=" dispose('sv_container','sv_parent')" onMouseOver="MM_swapImage('Image2','','imgs/menu/2-mo_imagenes.gif',1)" onMouseOut="MM_swapImgRestore()">

I was just getting creative there, I have absolutely no idea if that's where the dispose function is supposed to go... or if you're supposed to write it like that. Please forgive my ignorance. The solution seems to have worked for the person on the first thread I referenced.. not for me though.


Thanks again for all your help!!

Re: multiple galleries on different AP divs

If you want to replace the gallery with other content, then you could replace the content of the gallery's container with your own custom HTML code using JavaScript and innerHTML.

Try the following example.
Create a couple of sample test galleries. Name the gallery folders 'gallery1' and 'gallery2', put the following code into an HTML file in the same directory as the two gallery folders and opent he file in a browser.

<!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">
    <script type="text/javascript" src="gallery1/svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
        //  Load a gallery using the function's parameter as the baseURL
        function loadGallery(base) {
            var flashvars={};
            flashvars.baseURL = base;
            simpleviewer.ready(function () {
                simpleviewer.load('sv-container', '600', '400', '222222', true, flashvars);
            });
        }
        // Load custom content into gallery container (instead of a gallery)
        function loadContent() {
            var html = '';
            html += '<p>';
            html += 'Custom content goes here.';
            html += '</br>';
            html += 'More custom content goes here.';
            html += '</p>';
            document.getElementById('sv-container').innerHTML = html;
        }
        // When the web page is first loaded, display Gallery #1
        $(document).ready(function() {
            loadGallery('gallery1/');
        });
    </script>
    <title>Test</title>
</head>
<body>
    <div id="links">
        <a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a>
        <br />
        <a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a>
        <br />
        <a href="#" onclick="javascript: loadContent(); return false;">Custom Content</a>
    </div>
    <div id="sv-container"></div>
</body>
</html>

If you really wanted to dispose() of the gallery, then you would have to set up your gallery's embedding code so that the SimpleViewer API could be used.

Try the following (again with two sample galleries named 'gallery1' and 'gallery2').

<!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">
    <script type="text/javascript" src="gallery1/svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
        // Define object on which to call API methods
        var svAPI;
        function svComplete() {
            svAPI = document.getElementById('svInstance');        
        }
        //  Load a gallery using the function's parameter as the baseURL
        function loadGallery(base) {
            var flashvars = {};
            flashvars.baseURL=base;
            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);
            });
        }
        // Dispose gallery to free up allocated memory
        function disposeGallery() {
            svAPI.dispose();
            document.getElementById('sv-container').innerHTML = '';
        }
        // When the web page is first loaded, display Gallery #1
        $(document).ready(function() {
            loadGallery('gallery1/');
        });
    </script>
    <title>Test</title>
</head>
<body>
    <div id="links">
        <a href="#" onclick="javascript: loadGallery('gallery1/'); return false;">Gallery 1</a>
        <br />
        <a href="#" onclick="javascript: loadGallery('gallery2/'); return false;">Gallery 2</a>
        <br />
        <a href="#" onclick="javascript: disposeGallery(); return false;">Dispose Gallery</a>
    </div>
    <div id="sv-container"></div>
</body>
</html>

A completely alternative solution to your setup would be to create an iframe on your web page and to load individual galleries (or a web page with your custom content) into the iframe.
The links on your page would 'target' the iframe using the iframe's 'id' and 'name' attribute.
Here is an example (once again, using two complete gallery folders named 'gallery1' and 'gallery2').

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[url]http://www.w3.org/TR/html4/strict.dtd[/url]">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Test</title>
</head>
<body>
    <div id="content">
        <iframe src="gallery1/index.html" name="content-container" id="content-container" width="600" height="400" frameborder="0" scrolling="no"></iframe>
    </div>
    <div id="links">
        <a href="gallery1/index.html" target="content-container">Gallery 1</a>
        <br />
        <a href="gallery2/index.html" target="content-container">Gallery 2</a>
        <br />
        <a href="custom/content.html" target="content-container">Custom Content</a>
    </div>
</body>
</html>

As this solution loads the gallery's 'index.html' page into the iframe, it is important that the gallery's own dimensions are 100% x 100% (so that the gallery fills the iframe, no matter what its dimensions are).

Also, is it possible to add an X button to the galleries themselves so I can close them from within?

This should be possible by re-appropriating the 'Open Image in New Window' button, putting the name of a custom JavaScript function in all the linkURL entries and setting all linkTarget entries to '_self'.
You would then include the custom JavaScript function (with the code to close the gallery or replace the gallery container's content) in the page containing your gallery's embedding code. (You could then change the rollover tooltip text for the 'Open Image in New Window' button to something more appropriate to the button's new functionality using the languageList configuration option.)
However, it would be much easier to control the content of the gallery's container from outside the gallery itself.

I hope the above suggestions help.

If you are looking for a much easier (and automated) method of embedding multiple galleries, you might like to take a look at another one of our products - Showkase.
Showkase is a PHP web application which allows you to create complete portfolio web sites (integrating multiple galleries) online. Showkase has full support for SimpleViewer-Pro (and Juicebox-Pro) galleries and the galleries are created within the application itself. You can create multiple Gallery Index pages and have as many galleries listed on each Gallery Index page as you wish. Each gallery is represented by a thumbnail image (with the gallery title displayed below) and the gallery is opened when the user clicks on the image (although on a new page, not on the Gallery Index page).
Showkase also allows you to create non-gallery pages (such as 'About', 'Basic' and 'Contact' pages where you can add information about yourself or any other content you like) and all of this is done automatically within the Showkase interface without the need for any manual coding at all.
Demo sites created with Showkase can be found here.
If you would like to take a look around the Showkase interface, you can log into the Live Demo Admin here.
Showkase can be purchased as Showkase-Standard (which comes with SimpleViewer-Standard and Juicebox-Lite, the free versions) or Showkase-Pro (which comes with SimpleViewer-Pro and Juicebox-Pro).
(The only difference between Showkase-Standard and Showkase-Pro is the bundled viewers.)
As you already have SimpleViewer-Pro, you could purchase Showkase-Standard and upgrade it to use your SimpleViewer-Pro files by following the instructions here.

Steven Speirs
SimpleViewer Support Team.

Re: multiple galleries on different AP divs

Thank you once again Steven for the comprehensive information!


As you suggested, I created files from scratch in order to try out the different codes you provided me with. While the first one works perfectly, the "Dispose gallery" link in the second one is not making either of the galleries disappear.. All I did was change the names of the galleries to match my own. Don't know what I might be doing wrong..


Anyway, I still don't get why a simple Show/Hide layers at the click of a button doesn't manage to hide the sv_container and sv_parent divs... any thoughts on that?


Haven't tried the iframe option just yet. To be honest, it's something I've never used so, once more, I'm sure I would have a lot of figuring out to do before I can get it to work...

As for Showkase, the thing is that my website is nearly done. I just have to work around this issue of making the galleries go away, so incorporating a whole different product to match what I've already accomplished seems taking too many steps back... but I'll definitely keep it mind if I can't get all this to work:)



For the time being I think the first option is the one I'll be going with. But, as for the "Custom content" itself, is html text the only content possible? I mean, I have a separate div with two buttons (images), which is what I would want to replace the galleries with, but I don't know how to modify this part of the code for that purpose:


// Load custom content into gallery container (instead of a gallery)
        function loadContent() {
            var html = '';
            html += '<p>';
            html += 'Custom content goes here.';
            html += '</br>';
            html += 'More custom content goes here.';
            html += '</p>';
            document.getElementById('sv-container').innerHTML = html;
        }

My "custom content" would be this:

<img src="thumbprints/imgs/thumbs-i-01.jpg" alt="A mano" width="187" height="187" onClick="loadGallery('simpleviewer_gallery2/');return false;MM_showHideLayers('galeriaimgs','','hide')"></a><a href="javascript:;"><img src="thumbprints/imgs/thumbs-i-02.jpg" alt="Renders" width="187" height="187" onClick="loadGallery('simpleviewer_gallery/');return false;MM_showHideLayers('galeriaimgs','','hide')">

The buttons are what trigger the loadGallery functions, for each of the galleries.


Again thank you so much for your time and your help!!

Re: multiple galleries on different AP divs

ok, disregard my last message.. the loadContent script you suggested did the trick...


// Load custom content into gallery container (instead of a gallery)
        function loadContent() {
            var html = '';
            html += '<p>';
            html += 'Custom content goes here.';
            html += '</br>';
            html += 'More custom content goes here.';
            html += '</p>';
            document.getElementById('sv-container').innerHTML = html;
        }


and added

onClick="loadContent('galeriaimgs')" to the button in question... and that was it!!

Again, thank you for everything Steven. I might have a few more questions along the way, but at least this is working properly now.

thanks!!

Re: multiple galleries on different AP divs

the loadContent script you suggested did the trick...

That's great!
Just a couple of notes you might find useful...

But, as for the "Custom content" itself, is html text the only content possible?

No. With innerHTML, you can use any HTML code you like.

My "custom content" would be this:

<img src="thumbprints/imgs/thumbs-i-01.jpg" alt="A mano" width="187" height="187" onClick="loadGallery('simpleviewer_gallery2/');return false;MM_showHideLayers('galeriaimgs','','hide')"></a><a href="javascript:;"><img src="thumbprints/imgs/thumbs-i-02.jpg" alt="Renders" width="187" height="187" onClick="loadGallery('simpleviewer_gallery/');return false;MM_showHideLayers('galeriaimgs','','hide')">

If your code is complete, then it has missing <a> and </a> tags but, using the code you posted (and escaping the single quotes), the following should work (although you may have already worked this out):

function loadContent() {
    document.getElementById('sv-container').innerHTML = '<img src="thumbprints/imgs/thumbs-i-01.jpg" alt="A mano" width="187" height="187" onClick="loadGallery(\'simpleviewer_gallery2/\');return false;MM_showHideLayers(\'galeriaimgs\',\'\',\'hide\')"></a><a href="javascript:;"><img src="thumbprints/imgs/thumbs-i-02.jpg" alt="Renders" width="187" height="187" onClick="loadGallery(\'simpleviewer_gallery/\');return false;MM_showHideLayers(\'galeriaimgs\',\'\',\'hide\')">';
}

onClick="loadContent('galeriaimgs')" to the button in question...

If using the loadContent() function from my post above, it does not take a parameter so you should be able to use loadContent() instead of loadContent('galeriaimgs').

Again, thank you for everything Steven.

You're welcome!

Steven Speirs
SimpleViewer Support Team.