Topic: Problem embedding galleries on the same page [SOLVED]

I have created a photo album with 6 different galleries, linked from a header in the embedding page.  My problem is that no matter what I try, I always end up linking to the code in the gallery folder and not the SimpleViewer embedding code, with the result that it opens a new page. I am a bit new to all this so what could I be doing wrong?
I have uploaded a test page at http://www.morleywalkingclubyorkshire.c … _2015.html

edit:  I may be a bit muddled by the terminology but I want Multiple Galleries on separate pages

Last edited by AlanR (2015-08-20 15:51:12)

Re: Problem embedding galleries on the same page [SOLVED]

It sounds like you are looking to have each gallery embedded into a different page but also have each page contain your other content (navigation, header and footer).
If so, then there are two options:

(1) You could embed a gallery into your main page, use this as a template and copy it for each gallery changing the gallery each time. An online example of this can be found in the Multiple Galleries support section. Check out the 'View Multiple Galleries on Separate HTML Pages Example'. You can download the examples and copy or modify them to suit your own needs.

... or:

(2) Keep everything on one page and have the links load the galleries into a specified container on the page using JavaScript and switching between the galleries using baseURLs.
If you would like to do this, then please see this forum post for a working example of how this can be achieved.

The embedding code on your main page does not work at the moment because the path to the 'simpleviewer.js' file is incorrect.
Try using the following embedding code on your main page to embed the first of your galleries ('Hole of Horcum'):

<script type="text/javascript" src="/Photo Gallery/2015/Hole of Horcum/svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
    var flashvars = {};
    flashvars.baseURL = "/Photo Gallery/2015/Hole of Horcum/";
    simpleviewer.ready(function () {
        simpleviewer.load("sv-container", "100%", "600", "222222", true, flashvars);
    });
</script>
<div id="sv-container"></div>

I hope this points you in the right direction.

Steven Speirs
SimpleViewer Support Team

Re: Problem embedding galleries on the same page [SOLVED]

Thanks for your suggestions. 
I managed to get the embedding code to work using baseURL method as you suggested.
I have now moved the svcore files into the same directory as the embedding page (to simplify further developments) and using a different embedding page and galleries tried to get the multiple galleries in same viewing pages in the forum post that you suggested. The problem is now twofold.

1. The embeding code works locally but  when uploaded to the website,  I get an error 'gallery.xml not found'

2. Locally the 1st gallery 'Boot' loads but if I select the second gallery 'Cycle Holiday'.  it reloads the 1st. I guess most of this is due to my limited knowledge of javascript.

The test page is at www.morleywalkingclubyorkshire.com/Photo%20Gallery/multiple_galleries.html


Any help would be gratefully appreciated.

Re: Problem embedding galleries on the same page [SOLVED]

You need to change:

flashvars.baseURL = "2014/Boot/";

... to:

flashvars.baseURL = base + "/";

... so that the embedding code picks up the function's 'base' parameter for use as the baseURL.

Also, it looks like the paths to your gallery folders are incorrect (and the 'id' attributes for the gallery buttons should be names of gallery folders rather than paths to 'index.html' files).

If you had two complete gallery folders named 'Cycle_Holiday' and 'Boot' and you uploaded the complete gallery folders (not just teh contents) to your 'Photo Gallery' directory (the same directory that your 'multiple_galleries.html' file is in), then your web page should function correctly with the following embedding code.
(I have used 'Cycle_Holiday' as the name of a gallery folder as the code you use stores the folder names in 'id' attributes and 'id' values should not contain spaces. You could use custom 'data-*' attributes instead if you like.)

<input id="Boot" class="gallery" type="button" value="Boot"/>    
<input id="Cycle_Holiday" class="gallery" type="button" value="Cycle Holiday" />

<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
    function loadGallery(base) {
        var flashvars = {};
        flashvars.baseURL = base;
        simpleviewer.ready(function () {
            simpleviewer.load('sv-container', '800', '600', '222222', true, flashvars);
        });
        $('.gallery').css('text-decoration', 'none');
        $('#' + base).css('text-decoration', 'underline');
    }
    $(document).ready(function() {
        $('.gallery').click(function() {
            var base = $(this).attr('id');
            loadGallery(base);
        });
        loadGallery('Boot');
    });
</script>
<div id="sv-container"></div>
Steven Speirs
SimpleViewer Support Team

Re: Problem embedding galleries on the same page [SOLVED]

Works like a dream.  Many thanks for all your help.

I guess I'll need to spend a bit of time getting to grips with javascript.

Re: Problem embedding galleries on the same page [SOLVED]

I'm glad you've got it working. Thank you for posting back to let me know.
If you're looking for more information on JavaScript, then you might find this reference guide useful: https://developer.mozilla.org/en-US/docs/Web/JavaScript

Steven Speirs
SimpleViewer Support Team