JSFiddle - React, Tailwind, and code Playground

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

CSS

.thumb_select{  border: 2px solid #ccc;}
 #next_img_modal{
       cursor: pointer;
     }
     .slide  {
       float: left;
     }

JavaScript

var modal_gallery=jQuery('#modal_gallery'),
     modal_title = jQuery('.modal_title',modal_gallery),
     next_img=jQuery('#next_img_modal'),
     slides = jQuery('.slide', modal_gallery),
     len = slides.length,
     indx = 0;

next_img.click(function(){
    var title = slides
               .removeClass('thumb_select')
               .eq(indx)
               .addClass('thumb_select')
               .children('img')
               .attr('title');
    modal_title.text(title);
    indx++;
    indx == len && (indx=0);
  }).click()