Topic: Short captions for mobile

I suspect the answer to this query may again be to consider using JuiceBox.
I am gradually adding more detailed descriptions as part of the captions in the SimpleViewer Pro 2.3 gallery at http://www.uta-feinstein.com/2014/2014.html
However I have had to turn off the captions for the mobile player, because the longer descriptions (e.g for "Breaking Away") obscure the image.
What would be better for us would be if there was an option to have a shorter caption (e.g. title only) for the mobile player.
Possibly I have missed a way to do this: after all I am only just starting out with simpleviewer pro.
If not, perhaps this could be a feature request?
Apologies if this has been dealt with elsewhere.

Re: Short captions for mobile

SimpleViewer and Juicebox both use the same captions for the Mobile/Small Screen displays as the Flash/Large Screen displays.
In the SimpleViewer Mobile display, the overlay (including the captions) can be toggled on and off with a tap on the screen.
This is essentially the same as with Juicebox (although Juicebox also has the ability to use an Info Button on the Button Bar for the same purpose).

The only way to have different captions for Mobile and Flash displays would be to have two separate XML files (one with short captions and the other with long captions). You would then need to implement your own JavaScript mobile device detection routine and select which XML file to use via a galleryURL configuration option in your gallery's embedding code.

A basic example might look something like this:

<!--START SIMPLEVIEWER EMBED.-->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">

    function is_mobile() {
        // Mobile detection routine goes here
        // Return true or false
    }

    var flashvars = {};

    if (is_mobile()) {
        flashvars.galleryUrl = 'short.xml';
    } else {
        flashvars.galleryUrl = 'long.xml';
    }

    simpleviewer.ready(function () {
        simpleviewer.load('sv-container', '100%', '100%', '222222', true, flashvars);
    });

</script>
<div id="sv-container"></div>
<!-- END SIMPLEVIEWER EMBED -->

For your mobile device detection routine, you might want to consider different devices (using navigator.userAgent) and/or different screen sizes.
Examples can be found in this forum thread: http://stackoverflow.com/questions/1138 … le-browser
You could perhaps use the regular expression found here: http://detectmobilebrowsers.com/
Whatever you do, it might become quite complex and is almost certainly not going to match SimpleViewer's own mobile device detection routine (which is obfuscated within the 'simpleviewer.js' file) so you might find that your short and long captions are not always displayed when you expect (although the chances are that the exceptions are likely to be edge cases and it might work fine 99% of the time).

With Juicebox, each image has an image title and an image caption.
If should be possible to use only one XML file and add your short captions to the image title fields and the long captions to the image caption fields.
Using the Juicebox-Pro API getScreenMode() method, you could easily determine whether Juicebox is displaying the gallery in Small Screen Mode or Large Screen Mode (effectively hooking into Juicebox's own mobile device detection routine). You could then hide either the titles or captions (using JavaScript and CSS) as appropriate.
Here is an example:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" id="jb-viewport" content="minimal-ui" />
        <style type="text/css">
            body {
                margin: 0px;
            }
            .jb-caption-desc, .jb-caption-title {
                display: none;
            }
        </style>
        <script type="text/javascript" src="jbcore/juicebox.js"></script>
        <script type="text/javascript">
            var jb = new juicebox({
                containerId: "juicebox-container",
                showImageOverlay: "ALWAYS"
            });
            function display() {
                var term = jb.getScreenMode() === 'LARGE' ? '.jb-caption-desc' : '.jb-caption-title';
                $(term).css('display', 'block');
            }
            function delay() {
                window.setTimeout(function() {
                    display();
                }, 100);
            }
            jb.onInitComplete = function() {
                display();
            };
            jb.onImageChange = function() {
                display();
            };
            $(document).ready(function() {
                $(window).resize(delay);
            });
        </script>
        <title>Test</title>
    </head>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>

These are perhaps not ideal solutions (as neither SimpleViewer not Juicebox were designed with two sets of captions in mind) but I hope it at least points you in the right direction towards a suitable solution.

Edit: I have modified my Juicebox solution above so that the default state is for neither titles nor captions to be displayed. This prevents either the titles or captions from being displayed for an instant before disappearing.

Steven Speirs
SimpleViewer Support Team

Re: Short captions for mobile

Thank you for your very detailed reply.
I think that displaying the image title only would be sufficient for mobile viewing.
So the JuiceBox solution might be the easiest for that.
For now I think I will put the image numbers back in the mobile display, and I'll include a link to the complete set of captions.