Topic: Placing image caption outside gallery (moved from v1) [SOLVED]

Hi Steven,

In a recent post I was advised that I could grab the 'image number' with an API and place it wherever I wanted on a webpage at each svImageChange(index) event when it is fired. You were kind enough to enclose a javascript to work with the svcore of the latest version, to which I have now upgraded.

However, he resulting output is [Image Number: NaN] which means that it is not a number. Presumably because an image number like IMG_0012.jpg is a string and not a number.
Have I done something wrong or am I missing something?

edwind

Last edited by edwind (2014-01-09 16:09:05)

Re: Placing image caption outside gallery (moved from v1) [SOLVED]

Presumably because an image number like IMG_0012.jpg is a string and not a number.

The image index numbers used by the SimpleViewer-Pro API are independent of the image filenames.
They represent the order in which the images are listed in the gallery's XML file (the first image listed is assigned the index number 0).
I have just double-checked the code I posted here and it seems to work fine. The image index number (plus one, as the indexing starts at zero) is displayed in a JavaScript alert box each time a new image is displayed.

Please post the code you are using (or post the URL to your gallery's web page) so that I can take a look and help further.

Steven Speirs
SimpleViewer Support Team.

Re: Placing image caption outside gallery (moved from v1) [SOLVED]

Hi Steven,

Thanks for replying. Please see test a http://www.entiredesign.biz/simpletest/

You will see that it immediately renews to a page showing only Current Image 1

It does not show the 'image number' or 'caption' and does not stay on page displaying the image number in the red bordered box at the top where it should be for me to demonstrate that the image number has been successfully placed outside the flash container.

Any help would be greatly appreciated. Please bare in mind that I am a photographer not a web developer and will need step by step instruction.

Re: Placing image caption outside gallery (moved from v1) [SOLVED]

Thank you for providing the URL to your web page.

The problem is your document.write statement which simply outputs text directly to the document.
Instead, you need to insert the text into a specific container (designated with a unique 'id') on your web page.

Here is an example which outputs both the current image number and caption to a div (with id="text") outside the gallery. All the relevant code is in the svImageChange(index) function. You do not need to include HTML tags in the innerHTML line (as the value will be inserted within the <div id="text"></div> tags) but the example demonstrates that you can if you like.

<!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">
    <title>SimpleViewer-Pro Gallery</title>
</head>
<body>
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript">
        var svAPI;
        
        function svComplete() {
            svAPI = document.getElementById('svInstance');        
        };

        function svImageChange(index){
            var imageNumber = index + 1;
            var imageInfo = svAPI.getImageInfo(index);
            var imageCaption = imageInfo.caption;
            document.getElementById("text").innerHTML="<span>Image Number: " + imageNumber + "</span><br><span>Image Caption: " + imageCaption + "</span>";
        }

        var flashvars = {};
        flashvars.enableAPI = "true";

        var params = {};
        params.allowfullscreen = true;
        params.allowscriptaccess = "always";

        var attributes = {};
        attributes.id = "svInstance";
        attributes.name = "svInstance";

        simpleviewer.ready(function() {
            svAPI = simpleviewer.load('sv-container', '600', '400', '222222', true, flashvars, params, attributes);
        });    
    </script>
    <div id="sv-container"></div>
    <div id="text"></div>
</body>
</html>
Steven Speirs
SimpleViewer Support Team.

Re: Placing image caption outside gallery (moved from v1) [SOLVED]

Thank You Steven,

I have implemented your kindly offered code but unfortunately have to report as follows;

The Image Number ; (gives the number position in the array e.g. 2 of however many or 3 of however many)
The Image Caption; (remains empty) this is the real goal - to get the caption.

Does the script call the caption correctly? I see in the xml file that it is in ![CDATA[]] format. Not that I understand what that means.

Thank you for your patience.

I have since tried it with the xml file modified to contain actual image numbers in the caption fields instead of CDATA and it works perfectly. So, my question now is, how do I ensure that svBuilder or the photoshop plugin outputs the caption field with image numbers instead of CDATA ?
I am really encouraged by this but, quite reasonably, I do not want to have to edit each gallery's xml file by replacing the contents of the caption fields. Sometimes my galleries can contain 100s of images.

Last edited by edwind (2014-01-11 13:07:26)

Re: Placing image caption outside gallery (moved from v1) [SOLVED]

I tested my code before I posted it and it seemed to work fine.
The image number and caption (if there is one assigned to the image) are both displayed in a div below the gallery.

The Image Number ; (gives the number position in the array e.g. 2 of however many or 3 of however many)

This sounds like you are looking at the image number (displayed by setting showImageNumber="TRUE") within the gallery.
The text my code uses to display the image number does not use this format.

Does the script call the caption correctly?

Yes.

I see in the xml file that it is in ![CDATA[]] format. Not that I understand what that means.

A caption's contents may be enclosed within CDATA tags so that HTML tags can be used in the caption without breaking the formatting of the XML file.
When getting a caption using the SimpleViewer-Pro API, the CDATA tags will automatically be stripped (if they are used) so you do not need to worry about this.
If a caption contains just plain text, then it does not matter whether CDATA tags are used or not.

So, my question now is, how do I ensure that svBuilder or the photoshop plugin outputs the caption field with image numbers instead of CDATA ?

This is not possible with svBuilder (unless you rename all your images so that the filenames are their actual numbers).
This is also not possible with the Photoshop plugin (without rewriting a section of the plugin).
However, neither of the above is necessary.
I have just double-checked my code above and it definitely works OK for me.
To see it in action, just create a test gallery with svBuilder-Pro and replace the gallery's 'index.html' file with the code from my post above. Upload the test gallery to your web server and you should see the image number and caption for the current image displayed below the gallery in a separate div.

At the moment, your http://www.entiredesign.biz/simpletest/ gallery seems to be functioning as expected. No captions are displayed below the gallery because no images in your gallery have any captions.

Steven Speirs
SimpleViewer Support Team.

Re: Placing image caption outside gallery (moved from v1) [SOLVED]

Steven,

I have done exactly as you suggest. Made a new page on my site /steven.htm and the result is as you say but I do not understand why the image number IMG_0001.jpg is not presented as the 'caption'. In previous simpleviewer galleries I have made the image number appears in the 'caption' tags of the xml file like this <caption>IMG_0001.jpg</caption> instead of the <caption><![CDATA[]]></caption> that appears now I have upgraded.

Simpleviewer is now unlikely to be my gallery maker of choice because it just can't do what I require of it.

Thanks anyway for your help and patience.

Re: Placing image caption outside gallery (moved from v1) [SOLVED]

Made a new page on my site /steven.htm and the result is as you say but I do not understand why the image number IMG_0001.jpg is not presented as the 'caption'.

My code was written to extract the image caption and display it in the div outside the gallery.
Your gallery images contain no captions. Check your gallery's XML file (http://www.entiredesign.biz/simpletest/gallery.xml) and you will see that all the <caption></caption> tags are empty.

You could rebuild your gallery in svBuilder-Pro to include image filenames as your image captions. Open your gallery in svBuilder-Pro and from the menu at the top, select 'Images -> Captions -> Use File Name'. Now save your gallery on the 'Publish' tab and upload it to your web server.

Otherwise, if you just want to display the image filenames rather than the captions, you could modify the code as follows.
Change:

function svImageChange(index){
    var imageNumber = index + 1;
    var imageInfo = svAPI.getImageInfo(index);
    var imageCaption = imageInfo.caption;
    document.getElementById("text").innerHTML="<span>Image Number: " + imageNumber + "</span><br><span>Image Caption: " + imageCaption + "</span>";
}

... to:

function svImageChange(index){
    var imageNumber = index + 1;
    var imageInfo = svAPI.getImageInfo(index);
    var imageURL = imageInfo.imageURL;
    var imageFilename = imageURL.substr(imageURL.lastIndexOf("/")+1, imageURL.length);
    document.getElementById("text").innerHTML="<span>Image Number: " + imageNumber + "</span><br><span>Image Filename: " + imageFilename + "</span>";
}
Steven Speirs
SimpleViewer Support Team.

Re: Placing image caption outside gallery (moved from v1) [SOLVED]

Hi Steven Speirs,

Could I please ask you to take a look at where I am trying to deploy this code?

I am so nearly there but just cannot get the filename into the form field where it is required. Looking at the page and its source will help to see the problem. It is a very simple page.

Please view it at [link]www 46thpreston  org  uk forwardslash simpletest [/link]

Edwin

Sorry! I just realised you will not be able to see the code because it as an asp page. The entire page is copied as test.htm purely for you to view the entire source code, which as I put earlier, is short and simple. So, if you would be kind enough to view what I am trying to do with the asp page then look at the test.htm page source I feel sure you will see what an incompetent I am.
Oops! You still can't see the form can you - perhaps if I put here the input that is giving me trouble

type="hidden" name="item_number" id='text' value="text"

  The filename is needed to identify the chosen print and its size.

Edwin

Last edited by edwind (2014-02-06 12:38:54)

Re: Placing image caption outside gallery (moved from v1) [SOLVED]

What you need to do is change the value of the 'value' attribute of your 'text' <input>.
My code above was designed to replace the entire HTML content of a <div> with the necessary information.
Try the following:

function svImageChange(index){
    var imageNumber = index + 1;
    var imageInfo = svAPI.getImageInfo(index);
    var imageURL = imageInfo.imageURL;
    var imageFilename = imageURL.substr(imageURL.lastIndexOf("/")+1, imageURL.length);
    document.getElementById("text").value=imageFilename;
}
Steven Speirs
SimpleViewer Support Team.

Re: Placing image caption outside gallery (moved from v1) [SOLVED]

Hi Steven,

Thank you for all your help and patience. With the generous help you gave me I have managed to formulate what I think is an elegant solution to the problem. I took your code and just added a few extra values and provided the user with a choice of buttons. This is now my gallery design default for a while.
Edwin

Re: Placing image caption outside gallery (moved from v1) [SOLVED]

That's great!
I'm glad I was able to help and that your website now functions as you like.
Thank you for taking the time to post back to let me know.

Steven Speirs
SimpleViewer Support Team.