JSFiddle - React, Tailwind, and code Playground

by danya_postfactum

HTML

<link rel="stylesheet" href="http://www.fancyapps.com/fancybox/source/jquery.fancybox.css">
<script src="http://www.fancyapps.com/fancybox/source/jquery.fancybox.pack.js"></script>
<p class="fotoline">
    <img class="highslide" onclick="try{hs.expand(this,{src:'http://www.holydieexplorer.com/wp-content/uploads/2011/07/pyramids-cairo-egypt-1600-1024x768.jpg'});}catch(e){}" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQm0lSr3gjMZ12XQh6m8_6S2kfOEU2ryue9XLfByz3XIFuj-mMmcqjcXcyv" width="180" height="120" alt="Хургада " border="0">
    <img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/3170138978_07448bfbdf_o.jpg'});}catch(e){}" src="/d/163953/d/180488006_5.jpg" width="180" height="135" alt="3170138978_07448bfbdf_o" border="0">
    <img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/egipet_1600.jpg'});}catch(e){}" src="/d/163953/d/109448406_5.jpg" width="180" height="135" alt="egipet_1600" border="0">
    <img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/180489006_7.jpg'});}catch(e){}" src="/d/163953/d/180489006_5.jpg" width="180" height="135" alt="4064" border="0">
    <img class="highslide" onclick="try{hs.expand(this,{src:'/d/163953/d/81.jpg'});}catch(e){}" src="/d/163953/d/109447006_5.jpg" width="180" height="135" alt="81" border="0">
</p>

JavaScript

hs = {
    expand: function(element, options) {
        $.fancybox.open({href: options.src});
    }
};