JSFiddle - React, Tailwind, and code Playground

by cranavvo

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<div id="picture" style="background: url('http://upload.wikimedia.org/wikipedia/commons/5/50/Male_gorilla_in_SF_zoo.jpg');" class="fancybox"></div>
<div id="picture" style="background: url('http://media.npr.org/assets/img/2013/01/17/istock_000016332450medium_custom-adb798093fa444a781011029fe26ad88fb524644-s6-c30.jpg');" class="fancybox"></div>

CSS

#picture{
    background: black;
    margin: 20px;
    height: 250px;
    width: 250px;
    float: left;
}

JavaScript

$(document).ready(function(){
    $.fn.fancyGallery = function($gallery_name){
		$(this).each(function(){
			$background_image = $(this).css("background-image");
			$background_image = $background_image.replace('url(','').replace(')','');
			
			$(this).attr({
				"data-fancybox-group": $gallery_name,
				"data-fancybox-href": $background_image
			});		
		});
	};
    
    $('#picture.fancybox').fancyGallery("myGallery");
    $('.fancybox').fancybox();
});