Topic: Changing Thumbnail Navigation Graphics

When I had SV Pro version 1.9 I was able to take the simpleviewer.fla file into Flash and change the Thumbnail Navigation graphic and then output a replacement viewer.swf file. I don't see any way to do this in the latest version 2.1.1 as there is no longer the .fla file to change in Flash.

Is there any way to change the Thumbnail Navigation graphic. I'd like to change the Triangle shape so they are not so large.

Thanks!

Re: Changing Thumbnail Navigation Graphics

You could set thumbNavStyle="none", create your own navigation buttons and use the SimpleViewer-Pro API.

Steven Speirs
SimpleViewer Support Team.

Re: Changing Thumbnail Navigation Graphics

I apologize in advance for being a novice programmer.

I understand how to set thumbNavStyle="none". I've reviewed the SimpleViewer-Pro API page but don't follow how to set up my replacement graphics to work with SimpleViewer. Are their directions for specifically achieving this task?

Thanks.

Re: Changing Thumbnail Navigation Graphics

No, not specifically.
However, the methods you'd use would be showThumbPage and getThumbPageIndex.
I've constructed a simple demo modifying only 2 files from the standard 'web' folder from the SimpleViewer Pro download package.
Using the 'web' folder as a base, use the following code as the 'index.html' page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <script type="text/javascript">
        var svAPI;
        function svComplete() {
            svAPI=document.getElementById('svInstance');        
        }                
        function showPreviousThumbPage() {
            svAPI.showThumbPage(svAPI.getThumbPageIndex()-1);
        }
        function showNextThumbPage() {
            svAPI.showThumbPage(svAPI.getThumbPageIndex()+1);
        }
    </script>
    <title>SimpleViewer-Pro Gallery</title>
</head>
<body>
    <!--START SIMPLEVIEWER EMBED.-->
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
    var flashvars={};
    var params={};
    params.allowscriptaccess="always";
    var attributes={};
    attributes.id="svInstance";
    jQuery(document).ready(function () {
        SV.simpleviewer.load('sv-container', '800', '500', '222222', true, flashvars, params, attributes);
    });
    </script>
    <div id="sv-container"></div>
    <!-- END SIMPLEVIEWER EMBED -->
    <div id="buttons">
        <a href="#" onclick="showPreviousThumbPage()"><img src="previous.png" width="50" height="50" alt="previous" /></a>
        <a href="#" onclick="showNextThumbPage()"><img src="next.png" width="50" height="50" alt="next" /></a>
    </div>
</body>
</html>

... and use the following entries in the 'gallery.xml' file:

enableAPI="true"
thumbNavStyle="none"

You'll need to provide your own buttons.
This example does not replace the existing buttons but it hides and disables the built-in buttons and allows you to use your own buttons or images elsewhere on the page to achieve the same functionality.

Steven Speirs
SimpleViewer Support Team.

Re: Changing Thumbnail Navigation Graphics

How would this work for the back button?
I initially load a different flash file then load gallery but need a custom back button
It would need to show within the flash window and in fullscreen but only when the gallery function is called
But the button sits outside the flash window

<script type="text/javascript" src="rv-virtual-tour/js/swfobject.js"></script>
  <script type="text/javascript">
        var svAPI;
        function svComplete() {
            svAPI=document.getElementById('svInstance');       
        }               
        function showBackButton() {
            svAPI.showBackButton(svAPI.showBackButton()-1);
        }
     
    </script>
 
</head>

<body>   


<div class="containerMain">
        <div id="flashcontent">
     
        </div>

        <script type="text/javascript">
       
        loadVirtualTour2 ();
       
        function loadVirtualTour(){window.setTimeout('loadVirtualTour2()', 150);}
        // event handler
        function loadVirtualTour2 ()
        {
        // Load up the new SWF
                  var so = new SWFObject("rv-virtual-tour/system/shared/pano.swf", "pano", "960", "410", "9", "#282828");
                so.addParam("base","rv-virtual-tour/")
                 so.addVariable("xml_file","xml/rv-tour/setup.xml");
                 so.addParam("allowFullScreen","true");
                  so.addParam("allowScriptAccess","sameDomain");
                  so.write("flashcontent"); 
        }
       
        function loadGallery(){window.setTimeout('loadGallery2()', 150);}
        // event handler
        function loadGallery2 ()
        {
        var flashvars = {};
        flashvars.baseURL = "rv-virtual-tour/system/gallery/";
        var params={};
            params.allowscriptaccess="always";
        var attributes={};
        attributes.id="svInstance";
        jQuery(document).ready(function () {
        SV.simpleviewer.load('flashcontent', '960', '410', '222222', true, flashvars, params, attributes);
        });

         }

</script>
    <script type="text/javascript" src="rv-virtual-tour/system/gallery/svcore/js/simpleviewer.js"></script>
   



   
    <div id="buttons">
        <a href="#" onclick="?()"><img src="rv-virtual-tour/images/gui/360-tour.png" width="50" height="50" alt="360-tour" /></a>
       
    </div>

Re: Changing Thumbnail Navigation Graphics

@ gilesadamthomas

The Back Button should be set in the gallery's XML file as follows:

showBackButton="TRUE"
backButtonURL="http://www.example.com/index.html"

The Back Button will be visible in both normal and fullscreen modes when the SimpleViewer gallery is displayed.
http://simpleviewer.net/simpleviewer/pr … backbutton

Steven Speirs
SimpleViewer Support Team.

Re: Changing Thumbnail Navigation Graphics

how would this work for a custom back button?

Re: Changing Thumbnail Navigation Graphics

I'm not sure I understand what you are trying to do.

how would this work for a custom back button?

When you ask 'how would this work', what exactly do you mean?
The back button functions as a button which, when clicked, takes the user to a specified web page via either a relative or an absolute URL.
Also, what do you mean by 'custom back button'?
The Back Button is customized (via the Back Button options) by each individual user.
There is no SimpleViewer Pro-API method to show the Back Button outside the gallery.
The Back Button should be set in the gallery's XML file and will be displayed as part of the gallery itself (ie. the back button will be visible when the gallery itself is visible).

Steven Speirs
SimpleViewer Support Team.

Re: Changing Thumbnail Navigation Graphics

You could overlay your <div id="buttons"> (if this is the custom back button you refer to) on top of the gallery by using CSS, eg:

<div id="buttons" style="position: absolute; top: 10px; left: 10px; z-index: 99;">

... and by making your gallery's background transparent: http://simpleviewer.net/simpleviewer/su … ml#embed_6
... but this would not show up in Adobe Flash Player's Fullscreen mode.

Steven Speirs
SimpleViewer Support Team.

Re: Changing Thumbnail Navigation Graphics

sorry i meant a custom gui element that was on brand for my client, so not customised with the option but replaced with a png i create, i will look at overlaying with z depth thanks and sorry for the vague post earlier

Re: Changing Thumbnail Navigation Graphics

Just for the record, 'z-index: 99;' is required only for the link to be clickable in the Mobile Player (it is not required when the Flash Player is used to display the gallery).

Steven Speirs
SimpleViewer Support Team.