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

Posted 2023-05-09

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

【英文标题】：How can I add image titles to the active item in the jQuery ImageViewer plugin?

【发布时间】：2019-03-30 08:20:07

【问题描述】：

通常我依赖预构建的 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();
);

非常感谢您的任何帮助。

【问题讨论】：

您能否将img 元素上的标题作为title 或数据属性传递？这可能会简化事情。

顺便说一句，有四个开箱即用的 jQuery 插件可以做到这一点。我知道放弃你的努力很痛苦，但是....

啊，当然-我没有考虑过，但是是的，我可以将标题放在 img 元素中。它仍然给我留下了 js 问题:)

嗯，我正在寻找平衡时间来调整这个和配置新的东西。这有利于教我一些关于 javascript 的知识。但是，如果您推荐另一个与此匹配、完成和缩放以及易于配置的插件，我愿意更换它。

【参考方案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

【讨论】：

感谢您，效果很好，我非常感谢您的努力。它确实有助于我理解内部工作原理。