如何将图像标题添加到 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 对我来说是微不足道的。

例如，我可以导出一个 span 列表，其中每个 span 的“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 函数，我还可以输出带有标题的 javascript var。

但我不知道如何让这些显示/隐藏并与下面 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();
});

Fiddle demo