1 <div class=
"slideshowBlock pluginWrapper" id=
"slideshow"></div>
4 {% for image in site.data.slideshow %}
7 imagesrc :
"{{ image.src }}",
8 tooltip :
"{{ image.tooltip }}",
9 href :
"{{ image.link }}",
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() {
22 getDefaultProps: function() {
27 handleSelect: function(id) {
28 var index = this.props.data.map(function (el, elIndex) {
33 var currentIndex = index.indexOf(id);
35 currentSlide: currentIndex,
40 React.createElement(
"div", {className:
"slideshow"},
41 React.createElement(
"div", {className:
"slides"},
42 this.props.data.map(this.renderSlide)
44 React.createElement(
"div", {className:
"pagination"},
45 this.props.data.map(this.renderPager)
50 renderSlide: function(child, index) {
51 var classes = React.addons.classSet({
53 'slideActive': this.state.currentSlide === index,
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})
65 React.createElement(
"div", {key: index, className: classes},
66 React.createElement(
"img", {src: child.imagesrc, alt: child.tooltip})
70 renderPager: function(child, index) {
71 var classes = React.addons.classSet({
73 'pagerActive': this.state.currentSlide === index,
76 React.createElement(
"span", {key: index, className: classes, onClick: this.handleSelect.bind(this, index)})
81 function render(slideshowData) {
83 React.createElement(Slideshow, {data: slideshowData}),
84 document.getElementById('slideshow')
87 render(slideshowData);