JSFiddle - React, Tailwind, and code Playground

by niklasvh

HTML

<script src="http://jdbartlett.com/loupe/jquery.loupe.js"></script>
<script src="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/js/jquery.prettyPhoto.js"></script>
<link rel="stylesheet" href="http://www.no-margin-for-errors.com/wp-content/themes/NMFE/css/prettyPhoto.css">
        <a class="demo" rel="prettyPhoto[hairpin]" href="http://farm4.static.flickr.com/3598/3551599565_9dd3f9c6a1.jpg"> 
            <img src="http://farm4.static.flickr.com/3598/3551599565_9dd3f9c6a1_m.jpg" /> 
        </a>

CSS

.loupe { background-color:#555; background:rgba(0, 0, 0, 0.25); border:5px solid rgba(0, 0, 0, 0); }

JavaScript

$('.demo').loupe();
$("a[rel^='prettyPhoto[hairpin]']").prettyPhoto({theme:'facebook'});

$('.loupe').click(function(){   
   $(this).prev().trigger('click');   
});