How to implement multiple SimpleViewer Galleries in one page.

Update: December 09, 2006

After multiple questions from some people I decided to take out the part with the sliding effect, it was getting to confusing to help folks with both items, instead I am concentrating with this revision only on Simple Viewer, thanks for looking at this “tutorial” and if you have questions keep them coming or post questions in the forum at Airtight interactive.com

After playing around with the Effect.toggle I wanted to add a gallery within the sliding div effect to show a SimpleViewer gallery, and hide it after the user is done viewing that gallery. This functionality would add many possibilities of implementing galleries within pages with existing content and not a lot of space to display it.

But wait, why stop at one gallery and why not try the idea of the two galleries but each displaying on its own viewer. So in order to achieve just that I am supplying you with a working example that illustrates the procedure. Also below you can get a clear idea of how to set up your directories and what goes inside each of those. If you are still a bit confused the best thing to do is to post a question on the SimpleViewer forums.

So the html file and both gallery folders and contents are inside another folder called labs (that name can be anything you wish).

In essence the directory structure shown on the image to the left displays both galleries named gallery1b and gallery2b, inside of them the images and thumbs folders. The only major difference is within the viewer which I named viewer1.swf and viewer2.swf but it is not required, I named them that way to show the difference only.

Besides the directory structure, the xml file is key to make things work. More on how to configure the xml file here. Make the changes on each xml file in each folder to point to both the images and thumbs. In my case was “thumbPath=”gallery1b/thumbs/” imagePath=”gallery1b/images/” and of course the corresponding for gallery2b.

Then some parameters and variables were passed to the gallery when inserting it into the page. Those parameters are added in the script like this so.addParam(“parameterName”, “parameterValue”); or for the variables so.addVariable(“variableName”, “variableValue”); if you want to read a bit more on swfobject and passing variables and other items of interest read more here.

The first one was so.addParam(“wmode”,”transparent”); which erases the background of the .swf file to make if see through, just make a mental note that this is not mandatory for it to work.

The next important parameter is a variable that points to the xml file which goes like this so.addVariable(“xmlDataPath”, gallery1b/gallery.xml”); then the next line to go in there is another parameter again for the xml file to work right, so.addParam(“xmlDataPath”, gallery1b/gallery.xml”); this helps the viewer find its own xml file., and do the same for the second gallery.

The final piece of code would look like this:

<script type=”text/javascript”>

var so = new SWFObject(“gallery1b/viewer.swf”, “gallery”, “650″, “450″, “8″);

so.addParam(“quality”, “high”);

so.addParam(“wmode”, “transparent”);

so.addVariable(“xmlDataPath”, “gallery1b/gallery.xml”);

so.addParam(“xmlDataPath”, “gallery1b/gallery.xml”);

so.addParam(“title”, “Gallery 1″);

so.write(“multiplesvg1″);

</script>

And just to disect a bit that chunk of code above the second line that starts with var so is the one that calls the viewer from whatever location you placed it.

Each comma means that you are telling the viewer that it has an id, width and height then the player version that you are targeting.

As for the parameters and variables we already talked about those above and finally the so.write part is telling the script that you want to paint in the screen the object along with its parameters, etc to multiplesvg1 which happens to be the name of a div with that id.

I hope you realize that that div id name can be anything and it should be either set in the documents css section or in an external css file with whatever attributes you care to give it.

That is the basic concept to make it work and remember this is only an experiment. Many more solutions or ideas can be achieved within SV, so play around with it and have fun and of course you can only go so far with the free version, paying for the pro version is worth it if you know what you are doing in flash and really want to make some cool customizations. The only “glitch” is the flickering happening with the slide while closing but that is something else to work at.

 

Remember that this is only an example if you need additional customization please refer to the Airtightinteractive setup instructions.