How to create an AJAX photo gallery in SVG

Agenda

• Experiments
• Design
• Packaging data
• Presentation
• Behind the scenes

Experiments

• Some different ways of building a gallery:
  • Static SVG generated by server
  • Clientside SVG skeleton with script that fetches data from server
• How to get cross-site requests to work:
  • Server proxy (Application or Webserver)
  • Dynamic script injection

Dynamic script injection

  
  function jsonFlickrApi(data) {
    // data is the JSON object returned by flickr
    ... do stuff with the data here ...
    r.removeScriptTag();
  }
  
  function sendRequest() {
    var url = "http://api.flickr.com/services/rest/" +
      "?method=flickr.interestingness.getList&format=json&api_key=xxxxxx";
    var r = new JSONscriptRequest(url);
    r.buildScriptTag(); // Build the script tag
    r.addScriptTag(); // Execute (add) the script tag
  } ]]>

Slightly modified JSONscriptRequest object, based on a script by Jason Levitt. The modifications were made to adapt it to svg, since the original script assumed an HTML environment.

JSONscriptRequest for svg

• Replace 'head' with 'defs':
  

   this.headLoc = document.getElementsByTagName("defs").item(0);

• Build svg script element:
  

    var svgns = "http://www.w3.org/2000/svg";
    var xlinkns = "http://www.w3.org/1999/xlink";
    var s = this.scriptObj;
    s = document.createElementNS(svgns,"script");
    // Add script object attributes
    s.setAttributeNS(null, "type", 
                     "text/javascript");
    s.setAttributeNS(xlinkns, "xlink:href", 
                  this.fullUrl + this.noCacheIE);
    s.setAttributeNS(null, "id", this.scriptId);

Security implications

• It's worth noting that there are security implications:

tag hack suffers from a problem. It allows a page to access data from any server in the web, which is really useful. Unfortunately, the data is returned in the form of a script. That script can deliver the data, but it runs with the same authority as scripts on the base page, so it is able to steal cookies or misuse the authorization of the user with the server. A rogue script can do destructive things to the relationship between the user and the base server. ]]>

- Douglas Crockford

Server Proxy

• Using rewrite rules in Apache to forward requests (adding the following lines to a .htaccess file, and enabling mod_rewrite and mod_proxy):

    RewriteEngine on
    RewriteRule ^\/rest\/(.*)$ http://api.flickr.com/services/rest/$1 [P]

• Using a CGI script, like this one.

Goals

• try to keep it simple
  • put images in a designated place and that should be all that's needed
  • no sql database should be required
  • keep as much of the presentation framework separate from the image data and scripts

Data

• Flexibility: Server acts as proxy
• Proxy can easily be extended to fetch images from anywhere
• Exchange format: JSON

Presentation

• Allow creation of the gallery template in a graphics editor
• Clientside script should fetch data and fill out the template
• Use CSS to get cleaner svg code
• Make it keyboard navigatable

Demo

Code examples

The thumbnails:

  
  
  

]]>

Code examples

  .thumb { clip-path: url(#c); pointer-events: none; }
  .mediumthumb { clip-path: url(#c2); pointer-events: none; }
  .photo { opacity: 0 }
  .frame { fill: white; stroke: black }
  .largeframe { opacity: 1 }
  .frame:hover { stroke: lightblue; stroke-width: 6px }
  .frame:focus { stroke: lightblue; stroke-width: 6px }
  .button { fill: white; }
  .button:hover { stroke: lightblue; stroke-width: 6px }
  .button:focus { stroke: lightblue; stroke-width: 6px }
  .disabled { fill: gray }
  .buttontext { text-anchor: middle; font: 42px Arial Black; pointer-events: none }
]]>

Code examples

Animating the clip:

  
    
    
    
    
  

]]>

Code examples

The buttons:

>

<
]]>

Serverside script (PHP)

1. Check the arguments (current index, number to fetch, name of callback function)
2. Get images from the specified directory
3. Output the result as a JSON-formatted string
4. Done!

Clientside script

• On first load, fill in the thumbnail url:s
  • Uses an XMLHttpRequest to call the serverside logic
• Install focus and mouseover handlers
• Handle disabling/enabling of prev/next buttons
• Detect aspect ratio of photo and trigger animations