JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css">
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<div id="fancyDiv">
<a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_b.jpg" title="Westfield Waterfalls - Middletown CT Lower (Graham_CS)">
<img src="http://farm6.staticflickr.com/5471/9036958611_fa1bb7f827_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3824/9041440555_2175b32078_b.jpg" title="Calm Before The Storm (One Shoe Photography Ltd.)">
<img src="http://farm4.staticflickr.com/3824/9041440555_2175b32078_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_b.jpg" title="Lambs Valley (JMImagesonline.com)">
<img src="http://farm3.staticflickr.com/2870/8985207189_01ea27882d_m.jpg" alt="" />
</a>
<a class="fancybox" rel="gallery1" href="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_b.jpg" title="Grasmere Lake (Phil 'the link' Whittaker (gizto29))">
<img src="http://farm4.staticflickr.com/3677/8962691008_7f489395c9_m.jpg" alt="" />
</a>
</div>
CSS
#fancyDiv {
display: none;
}
a {
float: left;
}
#fancyDiv a.fancybox{
display:none !important;
}
#fancyDiv a.fancybox:first-child{
display:block !important;
}
JavaScript
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
helpers: {
thumbs: {
width : 40,
height : 40,
source : function(current) {
return $(current.element).data('thumbnail');
}
}
}
});
(function($){
$.fn.randomiseGallery = function() {
return this.each(function() {
var $this = $(this);
var obj = $(this).children('a');
var arr = $.makeArray(obj);
arr.sort(function() {return 0.5 - Math.random()});
$this.empty().show();
arr.push("");
var delay = 50;
$.each(arr, function(key, val) {
$this.append(val);
$this.children('a').hide().fadeIn(600).delay(delay * key);
});
});
};
})(jQuery);
$('#fancyDiv').randomiseGallery();