Topic: Transparent background

(sorry for my bad english ! I'm french )

I saw many topics about "transparent background", but I did not understand how to make my simple viewer transparent...!

Here's the link : http://ddata.over-blog.com/3/67/06/36/S … index.html

Gallery xml code :

<simpleviewergallery 

    useFlickr="false"
    resizeOnImport="false"
    cropToFit="false"
    backgroundColor="transparent"
    thumbColumns="2"
    galleryStyle="MODERN"
    thumbPosition="LEFT"
    thumbRows="4"
    galleryWidth="100%"
    galleryHeight="100%"
    frameColor="FF6666"
    frameWidth="1"
    showFullscreenButton="false"
    showOpenButton="false"

>

Index.html :

<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>SimpleViewer Gallery</title>
</head>

<body>
    
    <!--START SIMPLEVIEWER EMBED -->
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
        SV.simpleviewer.load('sv-container', '100%', '100%', 'FFFFFF',true);
    });
    </script>
    <div id="sv-container"></div>
    <!--END SIMPLEVIEWER EMBED -->
    
</body>
</html>

Last edited by Maureen (2010-11-22 21:01:48)

Re: Transparent background

You can use the following embed code for SimpleViewer v2.1.0 (which use are currently using).

<!--START SIMPLEVIEWER EMBED -->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var params = {};
params.wmode = "transparent";
$(document).ready(function () {
SV.simpleviewer.load('sv-container', '100%', '100%', 'FFFFFF', true, null, params);
});
</script>
<div id="sv-container"></div>
<!--END SIMPLEVIEWER EMBED -->

Alternatively, you can upgrade to v2.1.1 and follow these instructions. Your embedding code for v2.1.1 would then be:

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
$(document).ready(function () {
SV.simpleviewer.load("sv-container", "100%", "100%", "transparent", true);
});
</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->
Steven Speirs
SimpleViewer Support Team.

Re: Transparent background

Thank you ! It works smile

Re: Transparent background

If you can just define bgColor as transparent, why does SimpleViewer v2.1.1 also have an internal backgroundTransparent parameter?

And do they both bypass backgroundColor?

Re: Transparent background

backgroundTransparent I believe is more to track if you have the background set to transparent so svBuilder will know if you decide to edit your gallery again, it does not effect the transparency of the page.

If you set transparency, backgroundColor can still be used in your xml to set the background color for when the gallery is in fullscreen mode.

Mike Richards
SimpleViewer Support Team.

Re: Transparent background

In any case, if you use swfobject.js instead, it treats bgcolor and wmode the same way (both are regular params). So you might as well keep using wmode="transparent" even in v2.1.1. Well, at least for me it still works so there's no need to change existing codes.

Last edited by bugmenot (2010-11-24 19:00:15)

Re: Transparent background

Hi, new to the forum so apologies if this is thread-hijacking.  I just googled for this same problem and found this page.

My question, is it possible to make the simpleviewer 2.1.1 background transparent in fullscreen mode, please?

Re: Transparent background

@BloodForTheBaron

As far as I know flash does not support using transparency in fullscreen mode.

Mike Richards
SimpleViewer Support Team.

Re: Transparent background

That's a shame, but thank you for getting back to me.

In which case, is it possible to keep my transparent background for normal mode and alter the fullscreen background colour to black?  The only way I've found so far is to make them both black.

Re: Transparent background

You can use the following code to set transparency and background color for fullscreen mode.

    <!--START SIMPLEVIEWER EMBED.-->
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function () {
    
        var flashvars = {};
        var params = {};            
        params.bgcolor = "000000";
        var attributes = {};
        SV.simpleviewer.load('sv-container', '100%', '100%', 'transparent',true, flashvars, params, attributes);
    });
    </script>
    <div id="sv-container"></div>
    <!-- END SIMPLEVIEWER EMBED -->
Mike Richards
SimpleViewer Support Team.

Re: Transparent background

Perfect!  Many thanks, Mike.