Topic: SV Javascript API questions about 'show' and 'dispose' methods

Hi,

I've successfully converted a website based on the pre-2.0 Simpleviewer (non-pro) to a Simpleviewer-pro 2.0.1 version.

First of all kudos to the developers of Simpleviewer: the application has been enhanced tremendously and looks great!

Now for my question; I've integrated SV via Javascript and got it to work in the end with a few unexpected issues.

My website is displaying fotos, video's and trip reports. This content is displayed one type at the time in a common area of the webpage. I've done this by putting each type of content in its own (overlapping) html divs. Depending on what is displayed, I raise one div (e.g. the one containing SV) and lower the other two (e.g. video and reports). This is done by manipulating the visibility of the divs. Also to control input focus, I manipulate the z-depth property of the divs.

When I used the SV javascript API to control the visibility of simpleviewer, this worked in all browser I tested (Firefox, Safari, Chrome on Mac, Firefox and Chrome on Windows) except for MS IE (latest version).

Following is the code I used:

function raiseDiv( divTag) {
    var fc = document.getElementById( "FotoContent");
    var vc = document.getElementById( "VideoContent");
    var rc = document.getElementById( "ReportContent");

    switch ( divTag) {
        case "FotoContent":
            document.getElementById('ReportContent').innerHTML="";
            document.getElementById('VideoViewer').innerHTML="";
            fc.style.zIndex = 30; vc.style.zIndex = 20; rc.style.zIndex = 20;
        break;
        case "ReportContent":
            simpleViewerInstance.show( false);
            document.getElementById('VideoViewer').innerHTML="";
            fc.style.zIndex = 20; vc.style.zIndex = 20; rc.style.zIndex = 30;
        break;
        case "VideoContent":
            simpleViewerInstance.show( false);
            document.getElementById('ReportContent').innerHTML="";
            fc.style.zIndex = 20; vc.style.zIndex = 30; rc.style.zIndex = 20;
        break;
        default:
        break;
    }
}

When, instead of using the show method, I change visibility as illustrated in the following piece of code, it works in all browsers:

function raiseDiv( divTag) {
    var fc = document.getElementById( "FotoContent");
    var vc = document.getElementById( "VideoContent");
    var rc = document.getElementById( "ReportContent");

    switch ( divTag) {
        case "FotoContent":
            document.getElementById('ReportContent').innerHTML="";
            document.getElementById('VideoViewer').innerHTML="";
            fc.style.zIndex = 30; vc.style.zIndex = 20; rc.style.zIndex = 20;
        break;
        case "ReportContent":
            document.getElementById('FotoContent').style.visibility = "hidden";
            document.getElementById('VideoViewer').innerHTML="";
            fc.style.zIndex = 20; vc.style.zIndex = 20; rc.style.zIndex = 30;
        break;
        case "VideoContent":
            document.getElementById('FotoContent').style.visibility = "hidden";
            document.getElementById('ReportContent').innerHTML="";
            fc.style.zIndex = 20; vc.style.zIndex = 30; rc.style.zIndex = 20;
        break;
        default:
        break;
    }
}

Even though everything works now, I'm still curious about what caused first version using the show method not to work in IE.

Another question I have is related to the dispose method of the SV object. In the current working version I'm not using it, because when I tried to use it, the simpleviewer instance that I disposed indeed disappeared from the page, except for some parts (button bar).

My question is twofold:

1. Normally, during one session of a user, SV can be used to display fotos (same or different sets). Does the SV instance have to be disposed after it's no longer used (i.e. when switching to another set of fotos or a different type of content) ? In the current code, that's not the way I do it. I just render the current instance invisible and embed a new SW in the following way:

function handleFotoContent(xmlDoc)
{
    var galleryPaths = xmlDoc.documentElement.getElementsByTagName("galleryPath");

    if( galleryPaths.length>0) {
        var galleryPath=galleryPaths[0].childNodes[0].nodeValue;

        var flashvars = {};
        flashvars.galleryURL = galleryPath;
        flashvars.enableAPI = "true";
    
        var params = {};
        params.allowfullscreen = true;
        params.bgcolor = "FEFDFD";
        params.allowscriptaccess = "always";
    
        var attributes = {};
        attributes.id =  "FotoContent"; 
        attributes.name = "FotoContent";
        swfobject.embedSWF("simpleviewer.swf", "FotoContent", "100%", "100%", "9.0.124", false, flashvars, params, attributes);
        raiseDiv( "FotoContent");
    }  
}

2. What is the proper way to use the dispose method? Is the fact that part of the SV remains visible a bug or am I doing something wrong?

Cheers -- Eric

Re: SV Javascript API questions about 'show' and 'dispose' methods

The normal way to do this is to use a single div and just reload the flash instance in that div with the new xml. Is the gallery you are having issues with in IE online?

Mike Richards
SimpleViewer Support Team.

Re: SV Javascript API questions about 'show' and 'dispose' methods

Hi,

It's at:

http://www.skiexpo.be/Wacco2009-2010/index.htm

That's the version not using the SV API. Need some time to put the one on-line which is using the API. It's 10:00PM right now, so that will be for a little bit later ...

Cheers !

Re: SV Javascript API questions about 'show' and 'dispose' methods

Hi,

right now the best way to switch between 2 SimpleViewer galleries is to navigate between 2 different URLs. This forces the browser to reload the SWF with the new XML.

If you want to switch galleries on the same URL, check the section "Using an 'onclick' event to replace a loaded SWF with another SWF" section here: http://pipwerks.com/swfobject/load-oncl … index.html

Switching Galleries within a Flash embed can be achieved as demonstrated in the Flash Embed example.

Felix Turner
SimpleViewer Support Team.