Erik Dahlström
View with Opera!

How to create an AJAX photo gallery in SVG

Agenda

Experiments

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

Security implications

Server Proxy

Goals

Data

Presentation

Demo

Download 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