JSFiddle - React, Tailwind, and code Playground

by Anov Siradj

HTML

<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery.css">
<link rel="stylesheet" href="http://blueimp.github.io/Gallery/css/blueimp-gallery-indicator.css">
<script src="http://blueimp.github.io/Gallery/js/blueimp-helper.js"></script>
<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery.js"></script>
<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-fullscreen.js"></script>
<script src="http://blueimp.github.io/Gallery/js/blueimp-gallery-indicator.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>


<h1>blueimp Gallery</h1>
<!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>


<div class="links" id="links">
	<a href="http://farm6.static.flickr.com/5101/13539971585_6c655628e5_b.jpg" title="La finestra" data-gallery="" data-unique-id="tmp_1">
        <img src="http://farm6.static.flickr.com/5101/13539971585_6c655628e5_s.jpg"/>
	</a>
	<a href="http://farm8.static.flickr.com/7058/13535332874_e1ffe2f14c_b.jpg" title="ONE OF MY FAVORITE PLACES IN NORWAY :)" data-gallery="" data-unique-id="2">
        <img src="http://farm8.static.flickr.com/7058/13535332874_e1ffe2f14c_s.jpg"/>
	</a>
	<a href="http://farm3.static.flickr.com/2832/13535035223_a31eb2c8a8_b.jpg" title="ghost stories and other urban legends" data-gallery="" data-unique-id="3">
        <img src="http://farm3.static.flickr.com/2832/13535035223_a31eb2c8a8_s.jpg"/>
	</a>
	<a href="http://farm4.static.flickr.com/3685/13539935244_3540cf2bfe_b.jpg" title="Esa Hora Del da" data-gallery="" data-unique-id="tmp_4">
        <img...

JavaScript

$(document).ready(function() {
	blueimp.Gallery(
		document.getElementById('links').getElementsByTagName('a'),
		{
			container: '#blueimp-gallery',
			carousel: true,
			onslide: function (index, slide) {
                var unique_id = this.list[index].getAttribute('data-unique-id');
                console.log(unique_id);
			}
		}
	);
});