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函数，所以我还可以输出带有标题的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

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

1 个答案: