1<div class="slideshowBlock pluginWrapper" id="slideshow"></div>
2<script>
3  var slideshowData = [
4    {% for image in site.data.slideshow %}
5    {
6      id         : "{{ image.id }}",
7      imagesrc   : "{{ image.src }}",
8      tooltip    : "{{ image.tooltip }}",
9      href       : "{{ image.link }}",
10    },
11    {% endfor %}
12  ];
13</script>
14<script src="http://fb.me/react-with-addons-0.13.1.min.js"></script>
15<script type="text/javascript">
16  var Slideshow = React.createClass({displayName: "Slideshow",
17    getInitialState: function() {
18      return {
19        currentSlide: 0,
20      };
21    },
22    getDefaultProps: function() {
23      return {
24        data: slideshowData,
25      };
26    },
27    handleSelect: function(id) {
28      var index = this.props.data.map(function (el, elIndex) {
29        return (
30          elIndex
31        );
32      });
33      var currentIndex = index.indexOf(id);
34      this.setState({
35        currentSlide: currentIndex,
36      });
37    },
38    render: function() {
39      return (
40        React.createElement("div", {className: "slideshow"},
41          React.createElement("div", {className: "slides"},
42            this.props.data.map(this.renderSlide)
43          ),
44          React.createElement("div", {className: "pagination"},
45            this.props.data.map(this.renderPager)
46          )
47        )
48      );
49    },
50    renderSlide: function(child, index) {
51      var classes = React.addons.classSet({
52        'slide': true,
53        'slideActive': this.state.currentSlide === index,
54      });
55      if (child.href) {
56        return (
57          React.createElement("div", {key: index, className: classes},
58            React.createElement("a", {href: child.href, alt: child.tooltip, title: child.tooltip},
59              React.createElement("img", {src: child.imagesrc, alt: child.tooltip, title: child.tooltip})
60            )
61          )
62        );
63      }
64      return (
65        React.createElement("div", {key: index, className: classes},
66          React.createElement("img", {src: child.imagesrc, alt: child.tooltip})
67        )
68      );
69    },
70    renderPager: function(child, index) {
71      var classes = React.addons.classSet({
72        'pager': true,
73        'pagerActive': this.state.currentSlide === index,
74      });
75      return (
76        React.createElement("span", {key: index, className: classes, onClick: this.handleSelect.bind(this, index)})
77      );
78    },
79  });
80
81  function render(slideshowData) {
82    React.render(
83      React.createElement(Slideshow, {data: slideshowData}),
84      document.getElementById('slideshow')
85    );
86  }
87  render(slideshowData);
88</script>