Topic: In which file do I set the background to transparent?

I really like the very cool SimpleViewer and I am using it with Apple's iWeb with the FlashAlbumExporter gui out of Aperture.

By default the FAE gui does not give you access to the background color.  I want to set the SimpleViewer color to transparent so that the photos will display over the page bg instead of over the dark grey that comes automatically with sv.

I did a search on this site and found many "embedding options" that relates to this.  Unfortunately I am unclear as to which one to use.  There are 3 files that I can modify and I don't know which one will give me this option:  The "index.html" one, the "gallery.xml" one and the iframe snippet that I use in my iWeb page.

I am using the following iframe code in iWeb:

<iframe src=
"http://www.bostruyephotos.com/Paso_Robles/index.html"
style="width:1000px; height:900px;
border-width:0px;
border-color:#990033;
border-style:solid;"
scrolling="auto" >
</iframe>

I don't know if the bg transparency is controlled in this iframe code, in the index.html file created by FAE or in the xml file created by FAE. So far I have tried:

Remove the background-color: #181818; from the index.html: didn't make any difference.
Adding <bgcolor transparency="0"> in the xml: made simpleviewer not display at all.

If someone could clarify this for me and give me an example of the actual syntax to use (which would be really helpful in your "SimpleViewer Embedding Guide", btw) and in which file, I would really appreciate it.

The current version is here in case that helps:
http://www.bostruyephotos.com/Gallery/Cruising.html

Thanks for any help.

Bo

Re: In which file do I set the background to transparent?

In the gallery HTML you can set the transparency either with wmode or by changing the hex color to transparent. You will also need to add the following in your iframe allowtransparency="true". For the code below to work please make sure you are using the latest version SimpleViewer 2.1.1

<script type="text/javascript">
var flashvars = {};
var params = {};
params.wmode = "transparent";
$(document).ready(function () {
SV.simpleviewer.load("sv-container", "100%", "100%", "FFFFFF", true, flashvars, params);
});
</script>

Or

<script type="text/javascript">
$(document).ready(function () {
SV.simpleviewer.load("sv-container", "100%", "100%", "transparent", true);
});
</script>
Mike Richards
SimpleViewer Support Team.

Re: In which file do I set the background to transparent?

Thanks very much Mike!  I appreciate your quick reply.

Now, I have a few questions. 

- First, where do I find out what the SimpleViewer version is?  Since I am not loading it directly (it is called by FlashAlbumExporter) I am not sure which version it is loading.  Can you tell by looking at the page?

http://www.bostruyephotos.com/Gallery/Cruising.html

- Second, I followed your instructions and modified the iframe to this:

------------------
<iframe src=
"http://www.bostruyephotos.com/Paso_Robles/index.html"
style="width:1000px; height:900px;
border-width:0px;
border-color:#990033;
border-style:solid;"
allowtransparency="true";
scrolling="auto" >
</iframe>
-------------------

and then I added the code you suggested to the index.html which now looks like this:

-------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Another photo album built using Flash Album Exporter.">
<meta name="keywords" content="Flash, Photo, Flash Album Exporter, FlashAlbumExporter, SimpleViewer">
<title>SimpleViewer</title>
<!-- Download AutoViewer at http://www.airtightinteractive.com/proj … mpleviewer -->
<!-- Download Flash Album Exporter at http://apertureplugin.home.comcast.net -->
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">   
    /* hide from ie on mac \*/
    html {
        height: 100%;
        overflow: hidden;
    }
   
    #flashcontent {
        height: 100%;
    }
    /* end hide */

    body {
        height: 100%;
        margin: 0;
        padding: 0;
/*        background-color: #181818;*/
        color:#ffffff;
    }
</style>
</head>
<body>
    <div id="flashcontent">SimpleViewer requires Macromedia Flash. <a href="http://www.macromedia.com/go/getflashplayer/">Get Macromedia Flash.</a> If you have Flash installed, <a href="index.html?detectflash=false">click to view gallery</a>.</div>   
    <script type="text/javascript">
        var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "7", "#181818");   
        fo.addVariable("preloaderColor", "0xffffff");
        fo.addVariable("xmlDataPath", "gallery.xml");   
        fo.write("flashcontent");   
    </script>   
<script type="text/javascript">
var flashvars = {};
var params = {};
params.wmode = "transparent";
$(document).ready(function () {
SV.simpleviewer.load("sv-container", "100%", "100%", "FFFFFF", true, flashvars, params);
});
</script>
</body>
</html>
-------------------------------------

Unfortunately, the background is still opaque as you can see on the page linked above.  What am I missing?

Thanks so much.

Bo

Re: In which file do I set the background to transparent?

You can find your version by following these directions, it looks like you are using SimpleViewer 1.x not SimpleViewer 2.x.

Try something like this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="description" content="Another photo album built using Flash Album Exporter.">
<meta name="keywords" content="Flash, Photo, Flash Album Exporter, FlashAlbumExporter, SimpleViewer">
<title>SimpleViewer</title>
<!-- Download AutoViewer at http://www.airtightinteractive.com/proj … mpleviewer -->
<!-- Download Flash Album Exporter at http://apertureplugin.home.comcast.net -->
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">    
    /* hide from ie on mac \*/
    html {
        height: 100%;
        overflow: hidden;
    }
    
    #flashcontent {
        height: 100%;
    }
    /* end hide */
    body {
        height: 100%;
        margin: 0;
        padding: 0;
/*        background-color: #181818;*/
        color:#ffffff;
    }
</style>
</head>
<body>
    <div id="flashcontent">SimpleViewer requires Macromedia Flash. <a href="http://www.macromedia.com/go/getflashplayer/">Get Macromedia Flash.</a> If you have Flash installed, <a href="index.html?detectflash=false">click to view gallery</a>.</div>    
    <script type="text/javascript">
        var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "7", "#181818");    
        fo.addVariable("preloaderColor", "0xffffff");
        fo.addVariable("xmlDataPath", "gallery.xml"); 
        fo.addParam("wmode", "transparent");
        fo.write("flashcontent");    
    </script>    
</body>
</html>
Mike Richards
SimpleViewer Support Team.

Re: In which file do I set the background to transparent?

Thanks very much again, Mike.

I finally realized that the FlashAlbumExport plugin was really a bottleneck creating more problems than it solved really.  This is in great part due to the fact that it is not being updated anymore and it hides a copy of SimpleViewer in some black hole someplace, making it very hard to update versions.

Anyway, I ended up simply exporting my photos from Aperture and then downloading SV v211 and using the excellent svBuilder to generate the slide show.  And all of a sudden, everything started to work like magic!

So that is really the way to go.

Thank you for your help and most excellent software.  I have a feeling I will want to go PRO real soon!

Bo