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>	
			</div>
		</article>

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 #FFFFFF;
	border-top: 20px solid #FFFFFF;
	display: none;
}

.button_close {
	background: none repeat scroll 0 0 #E2361F;
	border: 4px solid #FFFFFF;
	border-radius: 20px 20px 20px 20px;
	o-border-radius: 20px 20px...

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 x = jQuery(this).find('.popup_img');
		jQuery('.popup_img').hide();	
		jQuery('.popup_img').next('.popup_img').show();
		
		console.log(x);
	}
	
	function getPrev(){
		console.log('prev');
	}
});