• Registered: 2010-05-24
  • Posts: 3

Topic: How do I link directly to a specific image in a gallery?

I upgraded to Simpleviewer Pro 2 from the free version. I was hoping to be able to link to a specific image within the gallery. I understand that you can change the "firstimageindex" but I do want the gallery to start at 0. However, I want to be able to link to a specific image within the gallery. I tried pasting the code from an HTML document to a PHP document and adding:

<!-- saved from url=(0014)about:internet -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Photo Gallery</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
        <script type="text/javascript">
            var flashvars = {};
            flashvars.galleryURL = "gallery.xml";
            var params = {};           
            params.allowfullscreen = true;
            params.allowscriptaccess = "always";
            params.bgcolor = "222222";
            swfobject.embedSWF("simpleviewer.swf", "flashContent", "100%", "100%", "9.0.124", false, flashvars, params);
        </script>
       
        <script type="text/javascript">
   
        var fo = new SWFObject("viewer.swf", "viewer", "100%", "600", "8", "#000000");
       
        <?php
            foreach($_GET as $variable => $value) {
                echo "fo.addVariable('firstImageIndex', '$value');";
            }
        ?>
       
        // SIMPLEVIEWER CONFIGURATION OPTIONS
        // To use an option, uncomment it by removing the "//" at the start of the line
        // For a description of config options, go to:
        // http://www.airtightinteractive.com/simp … tions.html
       
        //fo.addVariable("xmlDataPath", "gallery.xml");
        //fo.addVariable("langOpenImage", "Open Image in New Window");
        //fo.addVariable("langAbout", "About");   
        //fo.addVariable("preloaderColor", "0xFFFFFF");
       
        fo.write("flashcontent");   
        </script>   
       
        <style type="text/css" media="screen">   
            html, body    { height:100%; }
            body {           
                margin:0;
                padding:0;
                overflow:hidden;
                background-color: #222;
                color:#666;
                font-family:sans-serif;
                font-size:20px;       
            }
            a {   
                color:#ff0000;   
            }
        </style>
       
    </head><body><div id="flashContent">SimpleViewer requires JavaScript and the Flash Player. <a href="http://get.adobe.com/flashplayer/">Get Flash</a></div></body>
</html>


For example on Simpleviewer gallery: http://simpleviewer.net/simpleviewer/su … .php?id=10

I tried typing "?id=10" at the end of my URL but it didn't go to the 10th image, but instead went to the first image.

  • Felix
  • Site Admin
  • Offline
  • Registered: 2006-03-16
  • Posts: 4,395

Re: How do I link directly to a specific image in a gallery?

Hi,

the example you are looking at is for SimpleViewer v1.9. I've updated the example for SimpleViewer-Pro v2.0 here: http://www.simpleviewer.net/simpleviewe … t_link/#11

Felix Turner
SimpleViewer Support Team.

Felix's Website

  • Registered: 2010-12-26
  • Posts: 10

Re: How do I link directly to a specific image in a gallery?

Is it possible to use the direct link feature but instead of adding a number to the url, can the file name of the image or some other unique identifier be included? My concern is that when I update my gallery, I add images to the beginning, so the other images would change numbers, and any older links would now be linking to the wrong image, wouldn't they?

  • Registered: 2008-07-06
  • Posts: 6,313

Re: How do I link directly to a specific image in a gallery?

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.

Steven Speirs
SimpleViewer Support Team
  • Registered: 2010-12-30
  • Posts: 8

Re: How do I link directly to a specific image in a gallery?

Is there anybody thinking over this problem? I still have the same index numbering problem. Tried to interchange the i and j values in the code, and some more newbie solutions, but no result.

The most elegant way to solve it is via an image path and name affix. Someone figured this out or have any suggestions?

Thanx, Rogier

  • Registered: 2009-03-17
  • Posts: 2,725

Re: How do I link directly to a specific image in a gallery?

If you use the direct linking example you could try using something like mod_rewrite to map your "image path and name affix" to the numbers.

Mike Richards
SimpleViewer Support Team.
  • Registered: 2010-12-30
  • Posts: 8

Re: How do I link directly to a specific image in a gallery?

Hi Mike,

Thanks for your suggestion. I'm going to try it out.
Because I'm not a savvy in this stuff (this is going to be my starting point: http://www.elated.com/articles/mod-rewr … beginners/); can you give an example?

Rogier

  • Registered: 2009-03-17
  • Posts: 2,725

Re: How do I link directly to a specific image in a gallery?

Well if the most basic rewrite is RewriteRule Pattern Substitution the most basic example for your rewrite would look something like what follows.

RewriteRule yoursite\.com/thegallery\.html/theimagename yoursite\.com/thegallery\.html\#1
RewriteRule yoursite\.com/thegallery\.html/anotherimagename yoursite\.com/thegallery\.htm\#2
RewriteRule yoursite\.com/thegallery\.html/thetirdimagename yoursite\.com/thegallery\.html\#3
etc.

if that causes issues it might be the #, you cant use a # in the .htaccess because that marks a comment and I don't have a lot of experience with using escaped text so I don't know if the \imagnumber will work but you couldn't otherwise have a number next to the escaped # string %23. There maybe a different or better way to do fix the number next to the escaped number sign.

RewriteRule yoursite\.com/thegallery\.html/theimagename yoursite\.com/thegallery\.html\%23\1
RewriteRule yoursite\.com/thegallery\.html/anotherimagename yoursite\.com/thegallery\.htm\%23\2
RewriteRule yoursite\.com/thegallery\.html/thetirdimagename yoursite\.com/thegallery\.html\%23\3
etc.

Of course this is only one way meaning that it if people type in the url yoursite.com/thegallery.html/theimagename the will see yoursite.com/thegallery.html#1 you would have to do a little more work to get the URL type yoursite.com/thegallery.html#1 to show up as yoursite.com/thegallery.html/theimagename in your address bar.

Using a server side script you could probably write something more automatic then having to list out all of your images in the .htaccess, but this is the most basic method. I know the swfaddress page has an example of a supposedly SEO friendly version that uses mod_rewrite.

Mike Richards
SimpleViewer Support Team.
  • Registered: 2010-12-30
  • Posts: 8

Re: How do I link directly to a specific image in a gallery?

Thanks for your guidance on this. I have to ask a nerdy friend of mine if he understands something of this. Unfortunately it is too much for me.
I was wandering if the other alternative of reversing the index numbers can be done by changing code? I think the numbering is done here:

        //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;
        }

Can you explain something more what's going on here? I think I see the svAPI communicating with SWFAddress. Unfortunately I don't know which variables to change in the code. But it must be possible to do some manipulation so that the indexnumber is reversed?

In general a simple formula for reversing is for indexnumber x (where x <= P) in a total amount of P numbers (images):

indexnumberReversed = P - ( x - 1 )