JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<link href="http://s1.ucoz.net/src/ulightbox/ulightbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://s1.ucoz.net/src/ulightbox/ulightbox.js"></script>
<div id="apolight">
    <img src="http://cs14106.vk.me/c540101/v540101766/c7d/VkAaZRO3Oiw.jpg">
</div>
<a href="#apolight" class="ulightbox">Запустить лайтбокс</a>

CSS

#apolight {
    display:none;
}
.fancynewapob {
    width:38px;
    height:38px;
    margin-left:-50px;
    position:absolute;
    top:-20px;
    cursor:pointer
}
.fancyapoout {
    width:250px !important;
    height:150px !important;
    left:10px !important;
    top:20px !important
}
.fancyapoin {
    width:245px !important;
    height:145px !important
}
.apofancyover {
    background:url('http://www.apotv.ru/newapo/fancybox_sprite_overlayon.png') no-repeat;
    right:17px
}
.apofancyoveroff {
    background:url('http://www.apotv.ru/newapo/fancybox_sprite_overlayoff.png') no-repeat !important
}
.apofancymin {
    background:url('http://www.apotv.ru/newapo/fancybox_sprite_min.png') no-repeat;
    right:55px
}
.apofancyminon {
    background:url('http://www.apotv.ru/newapo/fancybox_sprite_minon.png') no-repeat !important;
}
.apofancyinmg {
    width:250px !important;
    height:150px !important
}

JavaScript

setInterval(function () {
    // Дополнительные кнопки в ulightbox окнах by Apocalypse
    $('a.fancybox-close,div.fancybox-close').each(function () {
        if ($(this).prev('.fancynewapob').size() == 0) {
            $(this).before('<div class="fancynewapob apofancymin" title="Свернуть окно"></div><div class="fancynewapob apofancyover" title="Закрыть оверлей"></div>');
            $('.apofancymin').click(function () {
                if ($(this).hasClass('apofancyminon')) {
                    $(this).removeClass('apofancyminon');
                    $('.fancybox-inner').removeClass('fancyapoin');
                    $('.fancybox-wrap').removeClass('fancyapoout');
                    $('.fancybox-inner img, .fancybox-inner iframe').removeClass('apofancyinmg');
                } else {
                    $(this).addClass('apofancyminon');
                    $('.fancybox-inner').addClass('fancyapoin');
                    $('.fancybox-wrap').addClass('fancyapoout');
                    $('.fancybox-inner img, .fancybox-inner iframe').addClass('apofancyinmg');
                };
            });
            $('.apofancyover').click(function () {
                if ($(this).hasClass('apofancyoveroff')) {
                    $(this).removeClass('apofancyoveroff');
                    $('#fancybox-overlay').fadeIn(300);
                } else {
                    $(this).addClass('apofancyoveroff');
                    $('#fancybox-overlay').fadeOut(300);
                };
            });
        };
        // apo-ucoz.com (c) 2013
    });
}, 100);