如何在 jquery 滑块内呈现的图像中显示文本

Question

我正在使用一个 Web 模板，它有一个使用 jQuery touchTouch.jquery.js 插件版本 1.0 的 jquery 滑块。可以从此链接web templete 访问滑块的实时示例。现在在 Web 模板中，我得到了以下标记：-

<div class="row">
                <ul class="listgall">
                    <li class="col-lg-4 col-md-4 col-sm-6  col-xs-6 colgal">
                        <figure><a href="img/page3_bigimg1.jpg" class="thumb"><img src="img/page3_img1.jpg" alt=""><span><strong>Project name:<strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span></a></figure>
                    </li>

这将做两件事：-

1.当我将鼠标悬停在图像上时，它会显示以下内容：-

<span><strong>Project name:<strong><em>Lorem ipsum dolore massa</em><img src="img/searchsmall.png" alt=""></span>

2.如果我点击page3_img1.jpg 图像，那么<a href="img/page3_bigimg1.jpg" class="thumb"> 图像将显示在滑块内。

现在我有以下问题，关于如何添加这些功能。

1. 当图像在滑块内呈现时，如何在滑块图像内将此标记显示为固定文本？ :-

   项目名称：Lorem ipsum dolore massa

目前，当图像在滑块内呈现时，即使我将鼠标悬停在它上面也不会显示任何文本或描述？

1. 第二个问题。现在我有 2 个使用滑块功能的网页。在一个网页内，我想在滑块内隐藏下一个和上一个箭头，同时在第二个网页内显示这些箭头，这可能吗，或者在这种情况下，我需要有两个版本的 touchTouch.query.js 文件并在每个网页中分别加载它们？

-----------编辑----------- ------

现在经过多次测试和修改，我对 Touchtouch 脚本中的 loadImage 回调函数进行了以下修改：-

function loadImage(src, callback){
            var img = $('<img>').on('load', function(){
                callback.call(img);
            });

            img.attr('src', src);



                // get all the captions (should probably be done with variable referring to something about above selector)
                var allcaptions = $("figure span");

                // setTimeout is a hack here, since the ".placeholders" don't exist yet
                setTimeout(function () {
                    $(".placeholder").each(function (i) {

                        // in each .placeholder, copy its caption's mark-up into it (remove the img first)
                        var caption = allcaptions.eq(i).clone();
                       // caption.find("img").remove();
                        $(this).append("<div class='caption'>" + caption.html() + "</div>");
                    });
        }, 500
        );
}

这似乎正确显示跨度如下：-

但是当我将网站部署到我的托管服务器时我遇到了这个问题（那里有互联网延迟，不像在我的机器上本地工作），现在当我单击图像时，它会显示滑块和加载图像标题如下：-

然后当图像完全渲染时，标题将被删除，并且仅显示图像而没有标题文本。现在，如果我单击将从浏览器缓存中加载图像的滑块内的下一个和上一个箭头，则不会有任何加载时间，并且标题将正确显示。那么有没有办法解决这个问题，例如修改我的脚本以仅在图像完全呈现时显示标题文本？那么任何人都可以告诉我如何解决这个问题吗？

Answer 1

1. 这是一个拉入 touchTouch 和您的一些文件的模型，同时还添加了一些额外的 JS 功能和 CSS 以在图像在滑块中放大时显示标题：

   http://jsfiddle.net/dx8qdoph/

   一些注意事项：我没有打扰悬停时滑入和滑出的字幕（我只是将它们隐藏了）。 setTimeout 的一部分是为了节省我的时间。我添加了 setTimeout，因为当点击缩略图时 touchTouch 添加的 .placeholder 元素还不存在。正确的方法可能是在超时循环或 MutationObserver 或类似的东西告诉你它们何时存在（不是我的强项）之后附加标题。或者，如果您可以选择自定义 touchTouch.jquery.js 文件，您可以在其中制作添加标题的 JS。

2. 我认为您不需要两个版本的 touchTouch 来隐藏一个实现中的箭头而不是另一个。您可以在小提琴中看到我只是通过 display:none'ing 在 CSS 中隐藏箭头（您仍然可以使用箭头键来回移动）。

Answer 2

尝试使用 css :after 伪元素，content 属性，将 attr(X) 设置为 data-* 属性集在 .placeholder 。请注意，:before 似乎在现有的 css 中使用，请参阅 touchTouch.css 行 51-60

#gallerySlider .placeholder:after {
  content: attr(data-placeholder);
  color: yellow;
  font-size: 36px;
  font-family: arial;
  position: relative;
  display: block;
  height: 20px;
  width: 200px;
  z-Index: 1;
  bottom: 42px;
  text-align: right;
  margin: -8px;
}

<div id="gallerySlider" style="left: -400%;">
  <div class="placeholder" data-placeholder="cats">
    <img src="http://lorempixel.com/200/200/cats">
  </div>
  <div class="placeholder" data-placeholder="nature">
    <img src="http://lorempixel.com/200/200/nature">
  </div>
  <div class="placeholder" data-placeholder="animals">
    <img src="http://lorempixel.com/200/200/animals">
  </div>
</div>