From f24aa9ba2766f6479209da4bbb5a0b62ad0cff18 Mon Sep 17 00:00:00 2001
From: Sujin/Sushi <sushimustwrite@gmail.com>
Date: Thu, 29 Aug 2013 13:34:52 -0400
Subject: [PATCH] created javascript library page

---
 docs/libraries/javascript.markdown | 41 ++++++++++++++++++++++++++++++
 1 file changed, 41 insertions(+)
 create mode 100644 docs/libraries/javascript.markdown

diff --git a/docs/libraries/javascript.markdown b/docs/libraries/javascript.markdown
new file mode 100644
index 0000000..03a195b
--- /dev/null
+++ b/docs/libraries/javascript.markdown
@@ -0,0 +1,41 @@
+# OpenPhoto Javascript Library
+
+### Examples
+
+First, include the `OpenPhoto.js` script and add a `data-site` attribute.
+
+    <script src="OpenPhoto.js" data-site="http://your-site.com"></script>
+
+Second, write a function that does something with the API response.
+
+    <script>
+      /*
+       * The render function takes a response and loops over the result (in this case, photos)
+       *  For each photo we create an IMG element and append it to the BODY
+       *  This is can be made much easier using a JavaScript library.
+       */
+      function render(response) {
+        var photos = response.result,
+            photo,
+            body = document.getElementsByTagName('body')[0],
+            img;
+        for(i in photos) {
+          if(photos.hasOwnProperty(i)) {
+            photo = photos[i];
+            img = document.createElement('img');
+            img.src = photo["path100x100xCR"];
+            body.appendChild(img);
+          }
+        }
+      }
+    </script>
+
+Third, call any [API endpoint](http://theopenphotoproject.org/documentation) and pass the callback function we defined above.
+
+    <script>
+      OpenPhoto.Api.load('/photos/tags-favorites/list.json?pageSize=45&returnSizes=100x100xCR', render);
+    </script>
+
+This is a pure JavaScript example which doesn't rely on any third party libraries.
+
+Enjoy!