JSFiddle - React, Tailwind, and code Playground

by Слава

HTML

<div id="modal_gallery">
    <div class="modal_title"></div>
    <div id="next_img_modal">next</div>
    <div id="prev_img_modal">prev</div>

<div id="fbox_img_modal">
  <div class="slide thumb_select">
       <img title="cccc" src="http://adrinal1nmail.ru.freedomain.thehost.com.ua/foto/thumb_dekang_box.jpg">
  </div>
  <div class="slide">
       <img title="zzzzz" src="http://adrinal1nmail.ru.freedomain.thehost.com.ua/foto/thumb_dekang_bottle.jpg">
  </div>
  <div class="slide">
       <img title="xxxxx" src="http://adrinal1nmail.ru.freedomain.thehost.com.ua/foto/thumb_dekang_protection.jpg">
  </div>
</div>

CSS

.thumb_select{  border: 2px solid #ccc;}

JavaScript

$(function(){
    myClick();
    
  function myClick() {      
 
var modal_gallery=jQuery('#modal_gallery'),
     next_img=jQuery('#next_img_modal');

next_img.click(function(){
 if(jQuery(this).hasClass('dnone')){
    return false
  } else {
var 	select_thumb=jQuery('#fbox_img_modal .thumb_select');

select_thumb.removeClass('thumb_select').next()
			.addClass('thumb_select')
			.children('img').attr('title',function(){
							var	title=jQuery(this).attr('title');
							modal_gallery.find('.modal_title').text(title);	
							});
};});
}
});