JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    <div class="details" id="gallery">
        <div class="gallery-box-file">
            <div class="gallery-box-file-first">
                <img src="http://i40.tinypic.com/j7szty.jpg" alt="some text" />
                <div class="popup"></div>
                <div class="popup_img">
                    <div class="button_close">X</div>
                    <img src="http://i40.tinypic.com/sqqueu.jpg" class="imgs" alt="some text" />
                    <div class="highslide-controls">
                        <ul>
                            <li class="highslide-previous"><a href="#" title="Previous (arrow left)"><span>Previous</span></a>
                            </li>
                            <li class="highslide-next"><a href="#" title="Next (arrow right)"><span>Next</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <p class="image_title">Some Text</p>
        </div>
        <div class="gallery-box-file">
            <div class="gallery-box-file-first">
                <img src="http://i43.tinypic.com/oglzjm.jpg" alt="some text front" />
                <div class="popup"></div>
                <div class="popup_img">
                    <div class="button_close">X</div>
                    <img src="http://i42.tinypic.com/2cdjzty.jpg" alt="some text" class="imgs" />
                    <div class="highslide-controls">
                        <ul>
                            <li class="highslide-previous"><a href="#" title="Previous (arrow left)"><span>Previous</span></a>
                            </li>
                            <li class="highslide-next"><a href="#" title="Next (arrow right)"><span>Next</span></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <p class="image_title">Some TextBoom front</p>
        </div>
   ...

CSS

#content article .details p, #content article div, #content article > * {
    float: left;
}
#gallery .gallery-box-file {
    display: inline-block;
}
.gallery-box-file-first {
    background: url('../images/shadow1.gif') 0 0 no-repeat;
    height: 118px;
    width: 118px;
}
#gallery {
    width:900px;
    margin: auto;
}
#gallery img {
    padding: 9px!important;
}
#gallery .phocaname {
    color: #666666;
}
.gallery-box-file {
    background: #fcfcfc;
    border:1px solid #e8e8e8;
    margin: 5px;
    padding: 5px;
    height:138px;
    width:120px;
    cursor: pointer;
}
.gallery-box-file-first {
    background: url('../images/shadow1.gif') 0 0 no-repeat;
    height:118px;
    width:118px;
}
.gallery-box-file:hover, .gallery-box-file.hover {
    border:1px solid #333333;
    background: #fcfcfc;
}
.bgPhocaClass {
    background:#666666;
    filter:alpha(opacity=70);
    opacity: 0.7;
    -moz-opacity:0.7;
    z-index:1000;
}
.fgPhocaClass {
    background:#f6f6f6;
    filter:alpha(opacity=100);
    opacity: 1;
    -moz-opacity:1;
    z-index:1000;
}
.fontPhocaClass {
    color:#000000;
    z-index:1001;
}
.capfontPhocaClass, .capfontclosePhocaClass {
    color:#ffffff;
    font-weight:bold;
    z-index:1001;
}
p.image_title {
    clear: both;
    font-size: 10px;
    /*padding-left: 6px !important;*/
    text-align: center;
    float: none!important;
}
.popup {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #000;
    opacity: 0.9;
    z-index: 1000;
    display: none;
}
.popup_img {
    width: auto;
    height: auto;
    margin: 0 0 0 12.5%;
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1500;
    box-shadow: 0 0 50px #000;
    o-box-shadow: 0 0 50px #000;
    moz-box-shadow: 0 0 50px #000;
    webkit-box-shadow: 0 0 50px #000;
    border-bottom: 100px solid #FFFFFF !important;
    border-left: 20px solid #FFFFFF;
    border-right: 20px solid...

JavaScript

jQuery(document).ready(function () {
    jQuery('.gallery-box-file-first img').on('click', function (event) {
        event.preventDefault();
        var popup = jQuery(this).siblings('.popup'),
            popup_img = jQuery(this).siblings('.popup_img');
        popup.show();
        popup_img.show();

        var w = jQuery(window).width(),
            h = jQuery(window).height(),
            position_top = (h - jQuery(this).siblings('.popup_img').find('img').innerHeight()) / 2,
            position_left = (w - jQuery(this).siblings('.popup_img').find('img').innerWidth()) / 2;


        jQuery('.popup_img').css({
            'top': position_top,
                'left': position_left
        });

    });

    jQuery('.gallery-box-file').find('.button_close').on('click', function () {
        console.log(jQuery(this).parent('.popup_img'));
        jQuery('.popup').hide();
        jQuery('.popup_img').hide();
    });

    var next = jQuery('.gallery-box-file-first').find('.highslide-next'),
        prev = jQuery('.gallery-box-file-first').find('.highslide-previous'),
        parent = next.parents('.popup_img');

    next.on('click', getNext);
    prev.on('click', getPrev);

    function getNext() {
        var parent = jQuery(this).closest('.gallery-box-file');
        var currentImg = parent.find('.popup_img');
        var nextParent = parent.next();

        if (nextParent.length) {
            currentImg.hide();
            nextParent.find('.popup_img').show();
        }
    }

    function getPrev() {
        var parent = jQuery(this).closest('.gallery-box-file');
        var currentImg = parent.find('.popup_img');
        var nextParent = parent.prev();

        if (nextParent.length) {
            currentImg.hide();
            nextParent.find('.popup_img').show();
        }
    }
});