updated demo, quick start and options for v0.2.5

benhowell · Sep 26, 2016 · 88da04c · 88da04c
1 parent 5e4c5fa
commit 88da04c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/examples/app.js b/examples/app.js
@@ -137,6 +137,7 @@ Demo0.defaultProps = {
             thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
             thumbnailWidth: 320,
             thumbnailHeight: 174,
+            tags: [{value: "Nature", title: "Nature"}, {value: "Flora", title: "Flora"}],
             caption: "After Rain (Jeshu John - designerspics.com)"
         },
         {
@@ -172,6 +173,7 @@ Demo0.defaultProps = {
             thumbnail: "https://c5.staticflickr.com/9/8768/28941110956_b05ab588c1_n.jpg",
             thumbnailWidth: 240,
             thumbnailHeight: 320,
+            tags: [{value: "Nature", title: "Nature"}],
             caption: "8H (gratisography.com)"
         },
         {
@@ -186,6 +188,7 @@ Demo0.defaultProps = {
             thumbnail: "https://c7.staticflickr.com/9/8569/28941134686_d57273d933_n.jpg",
             thumbnailWidth: 320,
             thumbnailHeight: 148,
+            tags: [{value: "People", title: "People"}],
             caption: "315H (gratisography.com)"
         },
         {
@@ -207,6 +210,7 @@ Demo0.defaultProps = {
             thumbnail: "https://c7.staticflickr.com/9/8785/28687743710_3580fcb5f0_n.jpg",
             thumbnailWidth: 320,
             thumbnailHeight: 113,
+            tags: [{value: "People", title: "People"}],
             caption: "Red Zone - Paris (Tom Eversley - isorepublic.com)"
         },
         {
@@ -249,13 +253,15 @@ Demo0.defaultProps = {
             thumbnail: "https://c1.staticflickr.com/9/8330/28941240416_71d2a7af8e_n.jpg",
             thumbnailWidth: 320,
             thumbnailHeight: 213,
+            tags: [{value: "Nature", title: "Nature"}, {value: "People", title: "People"}],
             caption: "Surfer Sunset (Tom Eversley - isorepublic.com)"
         },
         {
             src: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_b.jpg",
             thumbnail: "https://c1.staticflickr.com/9/8707/28868704912_cba5c6600e_n.jpg",
             thumbnailWidth: 320,
             thumbnailHeight: 213,
+            tags: [{value: "People", title: "People"}, {value: "Sport", title: "Sport"}],
             caption: "Man on BMX (Tom Eversley - isorepublic.com)"
         },
         {
@@ -277,13 +283,15 @@ Demo0.defaultProps = {
             thumbnail: "https://c6.staticflickr.com/9/8593/28357129133_f04c73bf1e_n.jpg",
             thumbnailWidth: 320,
             thumbnailHeight: 179,
+            tags: [{value: "Nature", title: "Nature"}, {value: "Fauna", title: "Fauna"}],
             caption: "Untitled (Jan Vasek - jeshoots.com)"
         },
         {
             src: "https://c6.staticflickr.com/9/8893/28897116141_641b88e342_b.jpg",
             thumbnail: "https://c6.staticflickr.com/9/8893/28897116141_641b88e342_n.jpg",
             thumbnailWidth: 320,
             thumbnailHeight: 215,
+            tags: [{value: "People", title: "People"}],
             caption: "Untitled (moveast.me)"
         },
         {

diff --git a/examples/index.html b/examples/index.html
@@ -39,7 +39,8 @@ <h2>Installation</h2>
 <h2>
 <a id="quick-start" class="anchor" href="#quick-start" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Quick (and dirty) Start</h2>
 
-<div class="highlight highlight-source-js-jsx"><pre><span class="pl-k">import</span><span class="pl-smi"> React</span><span class="pl-k"> from</span> <span class="pl-s"><span class="pl-pds">'</span>react<span class="pl-pds">'</span></span>;
+<div class="highlight highlight-source-js-jsx">
+<pre><span class="pl-k">import</span><span class="pl-smi"> React</span><span class="pl-k"> from</span> <span class="pl-s"><span class="pl-pds">'</span>react<span class="pl-pds">'</span></span>;
 <span class="pl-k">import</span> {<span class="pl-smi"> render</span> }<span class="pl-k"> from</span> <span class="pl-s"><span class="pl-pds">'</span>react-dom<span class="pl-pds">'</span></span>;
 <span class="pl-k">import</span><span class="pl-smi"> Gallery</span><span class="pl-k"> from</span> <span class="pl-s"><span class="pl-pds">'</span>react-grid-gallery<span class="pl-pds">'</span></span>;
 
@@ -49,15 +50,15 @@ <h2>
 <span class="pl-c1">        <span class="pl-s">thumbnail</span>:</span> <span class="pl-s"><span class="pl-pds">"</span>https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg<span class="pl-pds">"</span></span>,
 <span class="pl-c1">        <span class="pl-s">thumbnailWidth</span>:</span> <span class="pl-c1">320</span>,
 <span class="pl-c1">        <span class="pl-s">thumbnailHeight</span>:</span> <span class="pl-c1">174</span>,
-<span class="pl-c1">        <span class="pl-s">isSelected</span>:</span><span class="pl-c1"> false</span>,
+<span class="pl-c1">        <span class="pl-s">isSelected</span>:</span><span class="pl-c1"> true</span>,
 <span class="pl-c1">        <span class="pl-s">caption</span>:</span> <span class="pl-s"><span class="pl-pds">"</span>After Rain (Jeshu John - designerspics.com)<span class="pl-pds">"</span></span>
 },
 {
 <span class="pl-c1">        <span class="pl-s">src</span>:</span> <span class="pl-s"><span class="pl-pds">"</span>https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_b.jpg<span class="pl-pds">"</span></span>,
 <span class="pl-c1">        <span class="pl-s">thumbnail</span>:</span> <span class="pl-s"><span class="pl-pds">"</span>https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg<span class="pl-pds">"</span></span>,
 <span class="pl-c1">        <span class="pl-s">thumbnailWidth</span>:</span> <span class="pl-c1">320</span>,
 <span class="pl-c1">        <span class="pl-s">thumbnailHeight</span>:</span> <span class="pl-c1">212</span>,
-<span class="pl-c1">        <span class="pl-s">isSelected</span>:</span><span class="pl-c1"> false</span>,
+<span class="pl-c1">        <span class="pl-s">tags</span>:</span> [{<span class="pl-c1"><span class="pl-s">value</span>:</span> <span class="pl-s"><span class="pl-pds">"</span>Ocean<span class="pl-pds">"</span></span>,<span class="pl-c1"> <span class="pl-s">title</span>:</span> <span class="pl-s"><span class="pl-pds">"</span>Ocean<span class="pl-pds">"</span></span>}, {<span class="pl-c1"><span class="pl-s">value</span>:</span> <span class="pl-s"><span class="pl-pds">"</span>People<span class="pl-pds">"</span></span>,<span class="pl-c1"> <span class="pl-s">title</span>:</span> <span class="pl-s"><span class="pl-pds">"</span>People<span class="pl-pds">"</span></span>}],
 <span class="pl-c1">        <span class="pl-s">caption</span>:</span> <span class="pl-s"><span class="pl-pds">"</span>Boats (Jeshu John - designerspics.com)<span class="pl-pds">"</span></span>
 },
 
@@ -109,6 +110,12 @@ <h2><a id="user-content-image-options" class="anchor" href="#image-options" aria
 <td align="left">Required. Height of the thumbnail image.</td>
 </tr>
 <tr>
+<td align="left">tags</td>
+<td align="left">array</td>
+<td align="left">undefined</td>
+<td align="left">Optional. An array of objects containing tag attributes (value and title). e.g. <code>{value: "foo", title: "bar"}</code></td>
+</tr>
+<tr>
 <td align="left">isSelected</td>
 <td align="left">bool</td>
 <td align="left">undefined</td>

diff --git a/examples/stylesheet.css b/examples/stylesheet.css
@@ -4,6 +4,7 @@
 body {
   padding: 0;
   margin: 0;
+  /*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
   font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 16px;
   line-height: 1.5;