From 88da04c267177746313e251bb4cc3b38465ebe40 Mon Sep 17 00:00:00 2001 From: ben Date: Mon, 26 Sep 2016 19:18:34 +1000 Subject: [PATCH] updated demo, quick start and options for v0.2.5 --- examples/app.js | 8 ++++++++ examples/index.html | 13 ++++++++++--- examples/stylesheet.css | 1 + 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/examples/app.js b/examples/app.js index 0442f0c..4ab5f73 100644 --- 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,6 +253,7 @@ 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)" }, { @@ -256,6 +261,7 @@ Demo0.defaultProps = { 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,6 +283,7 @@ 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)" }, { @@ -284,6 +291,7 @@ Demo0.defaultProps = { 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 index 2c493c2..1acbc5c 100644 --- a/examples/index.html +++ b/examples/index.html @@ -39,7 +39,8 @@

Installation

Quick (and dirty) Start

-
import React from 'react';
+

+
import React from 'react';
 import { render } from 'react-dom';
 import Gallery from 'react-grid-gallery';
 
@@ -49,7 +50,7 @@ 

         thumbnail: "https://c2.staticflickr.com/9/8817/28973449265_07e3aa5d2e_n.jpg",
         thumbnailWidth: 320,
         thumbnailHeight: 174,
-        isSelected: false,
+        isSelected: true,
         caption: "After Rain (Jeshu John - designerspics.com)"
 },
 {
@@ -57,7 +58,7 @@ 

         thumbnail: "https://c2.staticflickr.com/9/8356/28897120681_3b2c0f43e0_n.jpg",
         thumbnailWidth: 320,
         thumbnailHeight: 212,
-        isSelected: false,
+        tags: [{value: "Ocean", title: "Ocean"}, {value: "People", title: "People"}],
         caption: "Boats (Jeshu John - designerspics.com)"
 },
 
@@ -109,6 +110,12 @@ 
Required. Height of the thumbnail image.
 
 
+tags
+array
+undefined
+Optional. An array of objects containing tag attributes (value and title). e.g. {value: "foo", title: "bar"}
+
+
 isSelected
 bool
 undefined
diff --git a/examples/stylesheet.css b/examples/stylesheet.css
index 52c8165..b4426b4 100644
--- 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;