javascript - 如何在 jquery slider 内呈现的图像内显示文本

Question

我正在使用一个 web 模板，它有一个使用 jQuery touchTouch.jquery.js 插件版本 1.0 的 jquery slider 。可以从此链接访问 slider 的实时示例 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.当我将鼠标悬停在图像上时，它会显示以下内容:-

<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">图像将显示在 slider 内。

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

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

   元素名称:Lorem ipsum dolore massa

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

1. 第二个问题。现在我有 2 个使用 slider 功能的网页。在一个网页内，我想隐藏 slider 内的下一个和上一个箭头，同时在第二个网页内显示这些箭头，这是否可能，或者在这种情况下，我需要有两个版本的 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
        );
}

这似乎正确显示了跨度，如下所示:-

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

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

Answer 1

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

   http://jsfiddle.net/dx8qdoph/

   一些注意事项:我没有理会在悬停时滑入和滑出的字幕(我只是隐藏了它们)。其中的 setTimeout 部分是一个小技巧，可以节省我的时间。我添加了 setTimeout，因为单击缩略图时 touchTouch 添加的 .placeholder 元素尚不存在。正确的方法大概是在超时循环或 MutationObserver 之后附加字幕或类似的东西告诉你它们何时存在(不是我的强项)。或者，如果您可以选择自定义 touchTouch.jquery.js 文件，则可以在其中制作添加字幕的 JS。

2. 我认为您不需要两个版本的 touchTouch 来在一种实现中隐藏箭头，而另一种则不需要。您可以在 fiddle 中看到我只是通过 display:none 在 CSS 中隐藏了箭头(您仍然可以使用箭头键来回移动)。