Topic: Direct link issue

Hello,

Before all: simpleviewer is great!
I'm new in website technology, but have managed to get the direct linking functionality as described here http://simpleviewer.net/simpleviewer/pr … ct_link/#1 at my website. So thats a compliment for the manual! smile

It works fine but now the following problem arises:

At a daily basis I add images to the gallery. The sort order is reversed, so new images are depicted first. The problem is that the newest image is numbered as #1 by the direct link script. As an effect the older imagenumbers change after every upload. So when I have made an external link to and older image then after an upload, the link is broken because of the different number given by the script...

I have two questions:

1. Is it possible to let the script assign imagenumbers in a reverse order?

2. Is it possible to create sort independent direct links with the unique filename as a 'number'? (so for example instead of: #1 this: #photos/2010/20101226_102154_0384.jpg) Actually like a direct link to the image location, but showed in the viewer.

Hope that I make myself clear. My website is here: http://bit.ly/ehR3B8
Thanks in advance!
Rogier Rood

Last edited by rogierrood (2011-01-02 20:23:10)

Re: Direct link issue

Someone else asked essentially the same question  a couple of days ago at the end of this thread: http://www.simpleviewer.net/forum/viewt … p?id=10697

My suggestion was:

You could perhaps use a JavaScript hash table (eg jshashtable) to associate keys with values in order to lookup a string and find the corresponding number which could then be used as the firstImageIndex variable to display the relevant image.
After each gallery modification, you'd need to change the mapping (due to adding images to the beginning of the gallery which will shift all subsequent image index numbers).  However, in doing this, you could achieve links to individual images that would not change.
There may well be a much more elegant solution to this problem but it will work.

It is not possible to let the script assign image numbers in a reverse order.

Steven Speirs
SimpleViewer Support Team.

Re: Direct link issue

Hi Steven,

Right it is the same problem. Sorry, I didn't found it.

A pity that the script isn't capable solving this problem. I'm going to dive into the jshashtable solution.
If anyone has a solution for this please share it!

Kindest regards, Rogier

Re: Direct link issue

How are you adding images to your gallery? If you are using svBuilder-Pro, new images are added after the last image.

Felix Turner
SimpleViewer Support Team.

Re: Direct link issue

Hi Felix,

Yes I use the SVbuilder for adding images. My picture filenames are timecoded (yyyymmdd_hhmm_####.jpg).
So I use the SVbuilder menu option:

Images > Sort > By file name

and after that :

Images > Sort > Reverse

After that I have the newest-picture-first-order I need and then I generate the xml.

An other issue with the direct linking script from the example here:
http://simpleviewer.net/simpleviewer/pr … rect_link/
and the script I use for multiple galleries as mentioned here
http://www.simpleviewer.net/forum/viewtopic.php?id=9514
seems to interfere one way or another when combined on my page.

Problem: The correct url is generated in the address bar, but the page does not refresh accordingly.
Question: Can someone tell me what goes wrong here?

My website is here:
http://bit.ly/ehR3B8
(sorry for those who tried the previous broken link in my previous post)

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[url]http://www.w3.org/TR/html4/strict.dtd[/url]">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>rogierrood.nl | photo | 2010</title>

<style type="text/css">
body {
    background-color: #000;
}
</style>


<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>

<script type="text/javascript" src="svcore/js/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 = "000000";
            
            var attributes = {};
            //name and id should match getElementById() call above
            attributes.id =  "svInstance"; 
            attributes.name = "svInstance";
            
            jQuery(document).ready(function () {
                SV.simpleviewer.load('sv-container', '100%', '600', '000000', true, flashvars, params, attributes);
            });                
</script>


</head>

<body onLoad="MM_preloadImages('buttons/GearHover.png','../../buttons/ArchiveHover.png','../../buttons/ContactHover.png','../../buttons/BackHover.png','../../buttons/rrLogoHover.png','../../buttons/CopyrightHover.png','../../buttons/PhotoHover.png','../../buttons/BigHover.png','../../buttons/ThumbsHover.png')">

<table width="800" border="0" align="center">
  <tr bgcolor="#000000" class="rogierrood">
    <td width="64" align="left" valign="top"><a href="photo2010_91.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btrrlogo','','../../buttons/rrLogoHover.png',1)"><img src="../../buttons/rrLogoNeutral.png" name="btrrlogo" width="64" height="64" border="0"></a></td>
    <td width="64" height="64"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btback','','../../buttons/BackHover.png',1)"><img src="../../buttons/BackNeutral.png" name="btback" width="64" height="64" border="0"></a></td>
    <td width="97">&nbsp;</td>
    <td width="65"><a href="photo2010_91.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btphoto','','../../buttons/PhotoHover.png',1)"><img src="../../buttons/PhotoNeutral.png" name="btphoto" width="64" height="64" border="0"></a><a href="gear.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','buttons/GearHover.png',1)"></a></td>
    <td width="64"><a href="photo2010_00.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btbig','','../../buttons/BigHover.png',1)"><img src="../../buttons/BigNeutral.png" name="btbig" width="64" height="64" border="0"></a></td>
    <td width="64"><a href="photo2010_97.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btthumbs','','../../buttons/ThumbsHover.png',1)"><img src="../../buttons/ThumbsNeutral.png" name="btthumbs" width="64" height="64" border="0"></a></td>
    <td width="64"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btarchive','','../../buttons/ArchiveHover.png',1)"><img src="../../buttons/ArchiveNeutral.png" name="btarchive" width="64" height="64" border="0"></a></td>
    <td width="148">&nbsp;</td>
    <td width="64"><a href="../../contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btcontact','','../../buttons/ContactHover.png',1)"><img src="../../buttons/ContactNeutral.png" name="btcontact" width="64" height="64" border="0"></a></td>
    <td width="64"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('btcopyright','','../../buttons/CopyrightHover.png',1)"><img src="../../buttons/CopyrightNeutral.png" name="btcopyright" width="64" height="64" border="0"></a></td>
  </tr>
</table>

<div id="sv-container"></div>
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars = {};
    flashvars.galleryURL = "gallery2010_91.xml";
var params = {};
var attributes = {};
jQuery(document).ready(function () {
    SV.simpleviewer.load("sv-container", "100%", "100%","000000", true, flashvars, params, attributes);
});
</script>

</body>
</html>

Last edited by rogierrood (2010-12-31 06:27:51)

Re: Direct link issue

I see three issues with the code you posted first there is no swfaddress.js file at svcore/js/swfaddress.js, second you have two copies of the SimpleViewer embed code in your page and secondly there is an issue with the direct linking code in IE.

Download SWFAddress, upload it to the correct folder and try the following, remember to clear your browsers cache after making the change.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>
      rogierrood.nl | photo | 2010
    </title>
    <style type="text/css">
        body {
            background-color: #000;
            }
    </style>
    <script type="text/javascript">
        function MM_swapImgRestore() { //v3.0
            var i, x, a = document.MM_sr;
            for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc;
        }

        function MM_preloadImages() { //v3.0
            var d = document;
            if (d.images) {
                if (!d.MM_p) d.MM_p = new Array();
                var i, j = d.MM_p.length,
                    a = MM_preloadImages.arguments;
                for (i = 0; i < a.length; i++)
                if (a[i].indexOf("#") != 0) {
                    d.MM_p[j] = new Image;
                    d.MM_p[j++].src = a[i];
                }
            }
        }

        function MM_findObj(n, d) { //v4.01
            var p, i, x;
            if (!d) d = document;
            if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
                d = parent.frames[n.substring(p + 1)].document;
                n = n.substring(0, p);
            }
            if (!(x = d[n]) && d.all) x = d.all[n];
            for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n];
            for (i = 0; !x && d.layers && i < d.layers.length; i++) x = MM_findObj(n, d.layers[i].document);
            if (!x && d.getElementById) x = d.getElementById(n);
            return x;
        }

        function MM_swapImage() { //v3.0
            var i, j = 0,
                x, a = MM_swapImage.arguments;
            document.MM_sr = new Array;
            for (i = 0; i < (a.length - 2); i += 3)
            if ((x = MM_findObj(a[i])) != null) {
                document.MM_sr[j++] = x;
                if (!x.oSrc) x.oSrc = x.src;
                x.src = a[i + 2];
            }
        }
    </script>
    <script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
    <script type="text/javascript" src="svcore/js/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) {
            imageID = index + 1
            SWFAddress.setValue("/" + imageID + "/");
        }

        //Called when browser back button is clicked
        SWFAddress.onChange = function () {
            if (svAPI.getImageIndex() != getLocationIndex()) {
                svAPI.showImage(getLocationIndex());
            }
        }

        function getLocationIndex() {
            var path = SWFAddress.getValue();
            var arr = path.split("/");
            return arr[1] - 1;
        }

        //JavaScript Embed
        var flashvars = {};
        //Set enableAPI to true to use JS API
        flashvars.enableAPI = "true";
        
        flashvars.galleryURL = "gallery2010_91.xml";
        
        //Set 'firstImageIndex' based on the 'index' query string parameter
        flashvars.firstImageIndex = getLocationIndex();

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

        var attributes = {};
        //name and id should match getElementById() call above
        attributes.id = "svInstance";
        attributes.name = "svInstance";

        jQuery(document).ready(function () {
            SV.simpleviewer.load('sv-container', '100%', '600', '000000', true, flashvars, params, attributes);
        });
    </script>
  </head>
  <body onload="MM_preloadImages('buttons/GearHover.png','../../buttons/ArchiveHover.png','../../buttons/ContactHover.png','../../buttons/BackHover.png','../../buttons/rrLogoHover.png','../../buttons/CopyrightHover.png','../../buttons/PhotoHover.png','../../buttons/BigHover.png','../../buttons/ThumbsHover.png')">
    <table width="800" border="0" align="center">
      <tr bgcolor="black" class="rogierrood">
        <td width="64" align="left" valign="top">
          <a href="photo2010_91.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btrrlogo','','../../buttons/rrLogoHover.png',1)"><img src="../../buttons/rrLogoNeutral.png" name="btrrlogo" width="64" height="64" border="0" id="btrrlogo"></a>
        </td>
        <td width="64" height="64">
          <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btback','','../../buttons/BackHover.png',1)"><img src="../../buttons/BackNeutral.png" name="btback" width="64" height="64" border="0" id="btback"></a>
        </td>
        <td width="97">
           
        </td>
        <td width="65">
          <a href="photo2010_91.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btphoto','','../../buttons/PhotoHover.png',1)"><img src="../../buttons/PhotoNeutral.png" name="btphoto" width="64" height="64" border="0" id="btphoto"></a><a href="gear.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','buttons/GearHover.png',1)"></a>
        </td>
        <td width="64">
          <a href="photo2010_00.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btbig','','../../buttons/BigHover.png',1)"><img src="../../buttons/BigNeutral.png" name="btbig" width="64" height="64" border="0" id="btbig"></a>
        </td>
        <td width="64">
          <a href="photo2010_97.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btthumbs','','../../buttons/ThumbsHover.png',1)"><img src="../../buttons/ThumbsNeutral.png" name="btthumbs" width="64" height="64" border="0" id="btthumbs"></a>
        </td>
        <td width="64">
          <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btarchive','','../../buttons/ArchiveHover.png',1)"><img src="../../buttons/ArchiveNeutral.png" name="btarchive" width="64" height="64" border="0" id="btarchive"></a>
        </td>
        <td width="148">
           
        </td>
        <td width="64">
          <a href="../../contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btcontact','','../../buttons/ContactHover.png',1)"><img src="../../buttons/ContactNeutral.png" name="btcontact" width="64" height="64" border="0" id="btcontact"></a>
        </td>
        <td width="64">
          <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('btcopyright','','../../buttons/CopyrightHover.png',1)"><img src="../../buttons/CopyrightNeutral.png" name="btcopyright" width="64" height="64" border="0" id="btcopyright"></a>
        </td>
      </tr>
    </table>
    <div id="sv-container"></div>
  </body>
</html>
Mike Richards
SimpleViewer Support Team.

Re: Direct link issue

Hello Mike,
Thanks so much! I'm having a happy new year! Wishing you all the same.
I have copied the swfaddress and used your code and it is working great.  smile
Regards, Rogier Rood