javascript - 如何将图像标题添加到 jQuery ImageViewer 插件中的事件项目？

Question

一般来说，我依赖于预构建的 Javascript 和 Jquery，因为它们可以满足我的界面需求(我对数据库更熟悉)。在这种情况下，我插入了 http://ignitersworld.com/lab/imageViewer.html在我的网站中使用“容器模式”，我很高兴。但是，我想补充一件事，我不知道如何在 Javascript 中修改。

在容器模式中，可以看到当前图像编号/总图像编号。

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