如何将图像标题添加到 jQuery ImageViewer 插件中的活动项目？

Question

一般来说，我依赖预构建的 Javascript 和 Jquery，因为它们可以满足我的界面需求（我对数据库更熟悉）。在这种情况下，我已经使用 'container mode' 将 http://ignitersworld.com/lab/imageViewer.html 插入到我的站点中并且非常高兴。但是，我想在 Javascript.

中添加一件我不知道如何修改的东西

在 container mode 中看到 current image number / total image number.

javascript（参见 post 的底部）设置此 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 的图片名称 'loaded' 相匹配，以开始创建平局某种：

<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。

但我不知道如何将这些获取到 show/hide 并与下面 javascript 中的 prev/next 点击同步。

$(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

如何将图像标题添加到 jQuery ImageViewer 插件中的活动项目？

How can I add image titles to the active item in the jQuery ImageViewer plugin?

html

javascript

jquery

jquery-plugins