Как добавить заголовки изображений к активному элементу в плагине jQuery ImageViewer?

Question

Как правило, я зависим от предварительно собранных Javascript и Jquery, так как они удовлетворяют потребности моего интерфейса (мне удобнее работать с базами данных).В этом случае я подключил http://ignitersworld.com/lab/imageViewer.html, используя «режим контейнера» к своему сайту, и я очень доволен.Тем не менее, я хотел бы добавить одну вещь, которую я не знаю, как изменить в Javascript.

В container mode можно увидеть current image number / total image number.

.javascript (см. в нижней части поста) устанавливает значения для диапазонов в этом HTML-коде:

<div id="image-gallery-2">
  <div class="image-container"></div>
  <img src="assets/images/left.svg" class="prev"/>
  <img src="assets/images/right.svg"  class="next"/>
  <div class="footer-info">
    <span class="current"></span>/<span class="total"></span>
  </div>
</div>    

Я хотел бы добавить заголовок из одного слова для каждого изображения рядом с этими интервалами, которое показано на соответствующем изображении.Для меня тривиально динамически загружать их в HTML одновременно с генерацией списка изображений.

Например, я мог бы вывести список промежутков, где 'id' каждого пролета совпадает симя картинок, «загруженных» Javascript, чтобы начать создавать какие-либо связи:

<span class="imgttle" id="1.jpg">Title</span>
<span class="imgttle" id="2.jpg">Title</span>
<span class="imgttle" id="3.jpg">Title</span>
<span class="imgttle" id="4.jpg">Title</span>

Или, поскольку я уже динамически создаю функцию javascript с соответствующими ссылками на изображения, я также могу вывести javascriptvar с названиями.

Но я не знаю, как заставить их отображать / скрывать и синхронизировать с предыдущими / следующими щелчками в JavaScript ниже.

$(function () {
 var images = [{
    small : 'assets/images/image_viewer/1.jpg',
    big : 'assets/images/image_viewer/1_big.jpg'
 },{
    small : 'assets/images/image_viewer/2.jpg',
    big : 'assets/images/image_viewer/2_big.jpg'
 },{
    small : 'assets/images/image_viewer/3.jpg',
    big : 'assets/images/image_viewer/3_big.jpg'
 },{
    small : 'assets/images/image_viewer/4.jpg',
    big : 'assets/images/image_viewer/4_big.jpg'
 }];

 var curImageIdx = 1,
    total = images.length;
 var wrapper = $('#image-gallery-2'),
    curSpan = wrapper.find('.current');
 var viewer = ImageViewer(wrapper.find('.image-container'));

 //display total count
 wrapper.find('.total').html(total);

 function showImage(){
    var imgObj = images[curImageIdx - 1];
    viewer.load(imgObj.small, imgObj.big);
    curSpan.html(curImageIdx);
 }

 wrapper.find('.next').click(function(){
     curImageIdx++;
    if(curImageIdx > total) curImageIdx = 1;
    showImage();
 });

 wrapper.find('.prev').click(function(){
     curImageIdx--;
    if(curImageIdx < 0) curImageIdx = total;
    showImage();
 });

 //initially show image
 showImage();
});

Большое спасибозаранее за любую помощь.

Answer 1

$(function() {
  var images = [{
    small: 'https://ignitersworld.com/lab/assets/images/image_viewer/1.jpg',
    big: 'https://ignitersworld.com/lab/assets/images/image_viewer/1_big.jpg',
    title: 'one' // < ------- changes here
  }, {
    small: 'https://ignitersworld.com/lab/assets/images/image_viewer/2.jpg',
    big: 'https://ignitersworld.com/lab/assets/images/image_viewer/2_big.jpg',
    title: 'two' // < ------- changes here
  }, {
    small: 'https://ignitersworld.com/lab/assets/images/image_viewer/3.jpg',
    big: 'https://ignitersworld.com/lab/assets/images/image_viewer/3_big.jpg',
    title: 'three' // < ------- changes here
  }, {
    small: 'https://ignitersworld.com/lab/assets/images/image_viewer/4.jpg',
    big: 'https://ignitersworld.com/lab/assets/images/image_viewer/4_big.jpg',
    title: 'four' // < ------- changes here
  }];

  var curImageIdx = 1,
    total = images.length,
    wrapper = $('#image-gallery'),
    curSpan = wrapper.find('.current'),
    titleSpan = wrapper.find('.title'), // < ------- changes here
    viewer = ImageViewer(wrapper.find('.image-container'));

  //display total count
  wrapper.find('.total').html(total);

  function showImage() {
    var imgObj = images[curImageIdx - 1];
    viewer.load(imgObj.small, imgObj.big, imgObj.title); // < ------- changes here
    curSpan.html(curImageIdx);
    titleSpan.html(imgObj.title); // < ------- changes here
  }

  wrapper.find('.next').click(function() {
    curImageIdx++;
    if (curImageIdx > total) curImageIdx = 1;
    showImage();
  });

  wrapper.find('.prev').click(function() {
    curImageIdx--;
    if (curImageIdx < 0) curImageIdx = total;
    showImage();
  });

  //initially show image
  showImage();
});

Демонстрация скрипки