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

Question

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

<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.it 将显示以下内容：-

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

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

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

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

项目名称：Lorem ipsum dolore massa

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

第二个问题。现在我有 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

这里是一个 mock-up 拉入 touchTouch 和你的一些文件，同时还添加了一些额外的 JS 功能和 CSS 来让标题在图像是在滑块中放大：

http://jsfiddle.net/dx8qdoph/

一些注意事项：我没有理会悬停时滑入和滑出的字幕（我只是隐藏了它们）。 setTimeout 部分是为了节省我的时间。我添加了 setTimeout，因为单击缩略图时 touchTouch 添加的 .placeholder 元素尚不存在。正确的方法大概是在超时循环或 MutationObserver 之后附加字幕或类似的东西告诉你它们何时存在（不是我的强项）。或者，如果您可以选择自定义 touchTouch.jquery.js 文件，则可以在其中制作 caption-adding JS。
我认为您不需要两个版本的 touchTouch 来在一种实现中隐藏箭头，而另一种则不需要。您可以在 fiddle 中看到我只是通过 display:none 将它们隐藏在 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>

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

how to show a text inside the images that are rendered inside jquery slider

html

javascript

css

jquery

slider