Topic: thumbnail only view

It it possible to show a thumbnail-only view that displays a grid (or something) of thumbnails?  The user would clicks on a thumbnail which would then lead the standard slideshow view (thumbnails and images) on the image that was clicked?

I'd like my users to see all the thumbnails at once without having to page through images.

Re: thumbnail only view

You could force the mobile version to be displayed instead of the Flash version.
This has an initial page of thumbnails only (how many depends on the size of the user's browser window) which lead to the images themselves (and a button leading back to the thumbnail page).
Set the useFlash Embed Code Parameter to 'false': http://simpleviewer.net/simpleviewer/su … tml#params
... or, if using svBuilder-Pro, deselect the 'Use Flash' checkbox under 'Customize -> Embed Options'.

Steven Speirs
SimpleViewer Support Team.

Re: thumbnail only view

Thanks for the reply.

Here's why it's SO important to have a top-level thumbnail view integrated in to SVP with universal platform support.

I run a photography business and need to have clients look through hundreds of photos.  Each is identified by an ID.  The client needs to easily pick out photos by thumbnails labeled by IDs.  The current SVP implementation requires the client to move through all the images in the combined thumbnail/detail viewer until the photo is identified.   i.e. I need a top level view that shows a thumbnail and any piece of text associated with the image I want -- a light table. Without this feature I have to write my own thumbnail view -- yuck. 

SVP is the only universal platform viewer I know of.  So I need to use it.  The only solution I can come up with right now is to write my own thumbnail view.   A link on the my thumbnail leads to loading SVP with firstIndex=position.

How do I pass the firstIndex parameter to the viewer so that it works on any platform.  I already saw an example on your site.  It looks like it uses Flash.

http://simpleviewer.net/simpleviewer/pr … ct_link/#1

Re: thumbnail only view

The SimpleViewer Pro Direct Link Example works for both the Flash and Mobile displays.
Inlcude the file swfaddress.js in your HTML page and replace your existing embedding code with the following:

<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript" src="swfaddress.js"></script>
<script type="text/javascript">

    //SimpleViewer API setup
    var svAPI; //svAPI is the object to call API methods on

    //Called by SWF when API becomes available
    function svComplete() {
        //console.log("SimpleViewer API Available");
        svAPI = document.getElementById('svInstance');        
    };        

    //Called by SWF when user views an image
    function svImageChange(index){
        //add an anchor hash tag to URL for this image index
        //console.log("svImageChange:" + index);
        document.location="#" + (index + 1);
    }
    
    //Called when browser back button is clicked
    SWFAddress.onChange = function(){             
        if(svAPI != null && svAPI.getImageIndex() != getLocationIndex()) {
            svAPI.showImage(getLocationIndex());
        }
    }
    
    //map the hash tag to the SV image index
    function getLocationIndex() {
        return location.hash.substr(1) - 1;
    }

    //JavaScript Embed
    var flashvars = {};
    //Set enableAPI to true to use JS API
    flashvars.enableAPI = "true";                     
    //Set 'firstImageIndex' based on the 'index' query string parameter
    flashvars.firstImageIndex = getLocationIndex();
    
    var params = {};            
    params.allowfullscreen = true;
    params.allowscriptaccess = "always";
    params.bgcolor = "222222";
    
    var attributes = {};
    //name and id should match getElementById() call above
    attributes.id =  "svInstance"; 
    attributes.name = "svInstance";
    
    simpleviewer.ready(function () {
        simpleviewer.load('sv-container', '100%', '100%', '222222', false, flashvars, params, attributes);
    });
                
</script>
<div id="sv-container"></div>

Now you can link one of your own thumbnails directly to a certain image in your SimpleViewer Pro gallery using a link such as:

<a href="gallery/index.html#12"><img src="thumbnail12.jpg" /></a>
Steven Speirs
SimpleViewer Support Team.

Re: thumbnail only view

Thanks Steven,

Almost what I want but I need some tweaks.

The page were I have my thumbnails will be a referring page, mythumbnails.jsp .  I replaced the standard embedding code with that you gave me and got index.html?#index to work.   The only change I had to make was on the line that launches the viewer, I changed first false param to true.  false was overriding the size of my viewer.

simpleviewer.load('sv-container', '100%', '100%', '222222', false, flashvars, params, attributes);

But here's what I need/want

(1) To also pass replacement value for back link -- I have already generate a static value for the back link which I need to override

(2) Captions on or off (even if photo has caption)

(3) Show file name

(4) more generally pass any supported parameter name/value in the query params to index.html, e.g. index.html?svParam1=svParam1Value&svParam2=svParam2Value#firstIndex.  Is this possible?

(5) To be able to use svBuilder to generate the alternate sv embed code so that the special voodoo to put in index.html is not wiped out each time I regenerate gallery

Re: thumbnail only view

(1) Try the following JavaScript to read a query string, sort it into an array and set the relevant option via a flashvar.
Please note that this method of setting options is not officially supported and may not work correctly (or at all) in current or future versions.
Put the following code just above the simpleviewer.ready(function () { line in your embedding code:

if (location.search)
{
    var queryString=location.search, queryArray={}, re=new RegExp("([^?=&]+)(?:=([^&]*))?", "g"), queryComponent;
    while (queryComponent=re.exec(queryString))
    {
        queryArray[queryComponent[1]]=queryComponent[2];
    }
    flashvars.backButtonURL=queryArray["backButtonURL"];
}

You can then use a URL such as:
http://www.example.com/gallery/index.html?backButtonURL=http://www.simpleviewer.net#2
... which will open the gallery at image #2 and set the Back Button to go to the SimpleViewer website.

(2) There is no option to switch captions on or off for the Flash Player.
For the Mobile Player, you can use the above method in conjunction with the option mobileShowCaption:
http://simpleviewer.net/simpleviewer/pr … tml#mobile

(3) In order to show a file name, it should be set as a caption

(4) See (1)

(5) It is not possible to modify the embedding code generated by svBuilder

Steven Speirs
SimpleViewer Support Team.

Re: thumbnail only view

Thanks, makes sense.

I looked through the list of simple viewer Pro configuration options here, http://simpleviewer.net/simpleviewer/pr … backbutton

(1) Are the names and values of the parameters and their meanings in the list correspond to the same things that I can set in flashvars?  Are there any restrictions?

(2)  Is a different solution needed for passing parameters to the index.html on a mobile device?  i.e.  can't use flashvars  resetting parameters on a mobile player (iphone, iPad)?

(3)  The solution you gave me for jumping to a particular image in a simple viewer slide show from a thumbnail on my own page ultimately set the value of flashvars.firstImageIndex.   Yet there is all this voodoo and inclusion of other JavaScript files in the solution ( replacement embedding code).  Wouldn't it suffice to chop up the query string, get any parameter I want, in this case firstImageIndex and just called the simple viewer ready function -- use the simple solution you gave me in your last response? Why was all this other code there?

Re: thumbnail only view

(1) As stated on this page: http://simpleviewer.net/simpleviewer/pr … tions.html
... the SimpleViewer Options should be set in the gallery's XML file. SimpleViewer has not been designed to accept options as query string parameters which can then be set as flashvars.

Set these options by using svBuilder-Pro or by editing the gallery.xml file directly in any text editor. To add an option by editing the XML, add a line inside the opening simpleviewergallery tag in this format:
optionName = "optionValue"

As I stated above, setting variables in this manner is not recommended or supported and, as such, I have not tried to do so with anything other than backButtonURL for my test case above so I do not know what will work and what will not.

(2) Parameters for the Mobile Player should also be set in the gallery's XML file. (There are currently only three Mobile Player Pro Options.)

(3) The initial solution is the recommended method for enabling direct linking to a specific image and supporting the browser 'Back' button as described here: http://simpleviewer.net/simpleviewer/pr … t_link/#11

Steven Speirs
SimpleViewer Support Team.

Re: thumbnail only view

As an alternative, you could perhaps use PHP to dynamically create an XML file on-the-fly using the values gathered from the query string.
This thread might help get you started down this route: http://www.simpleviewer.net/forum/viewt … p?id=12576 though it will require a knowledge of PHP and JavaScript and may prove difficult (or at least time consuming) to achieve.

Steven Speirs
SimpleViewer Support Team.