我正在使用一个 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 内。
现在我有以下问题,关于如何添加这些功能。
当图像在 slider 内呈现时,如何将 slider 图像内的标记显示为固定文本? :-
元素名称:Lorem ipsum dolore massa
目前,当图像在 slider 内呈现时,即使我将鼠标悬停在它上面,也不会显示任何文本或描述?
- 第二个问题。现在我有 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 内的下一个和上一个箭头,将不会有任何加载时间,并且标题将正确显示。那么有没有办法解决这个问题,例如修改我的脚本以仅在图像完全呈现时显示标题文本?那么任何人都可以告诉我如何解决这个问题吗?
最佳答案
这是一个引入 touchTouch 和您的一些文件的模型,同时还添加了一些额外的 JS 功能和 CSS 以在 slider 中放大图像时显示标题:
一些注意事项:我没有理会在悬停时滑入和滑出的字幕(我只是隐藏了它们)。其中的
setTimeout
部分是一个小技巧,可以节省我的时间。我添加了 setTimeout,因为单击缩略图时 touchTouch 添加的 .placeholder 元素尚不存在。正确的方法大概是在超时循环或 MutationObserver 之后附加字幕或类似的东西告诉你它们何时存在(不是我的强项)。或者,如果您可以选择自定义 touchTouch.jquery.js 文件,则可以在其中制作添加字幕的 JS。我认为您不需要两个版本的 touchTouch 来在一种实现中隐藏箭头,而另一种则不需要。您可以在 fiddle 中看到我只是通过 display:none 在 CSS 中隐藏了箭头(您仍然可以使用箭头键来回移动)。
关于javascript - 如何在 jquery slider 内呈现的图像内显示文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32343590/