Question

我正在使用一个带有jquery滑块的web模板，该滑块使用jQuery touchTouch.jquery.js插件版本1.0。可以从此链接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">图片将显示在滑块内。

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

当图像在滑块内渲染时，我如何在滑块图像中将此标记显示为固定文本？： -

项目名称： Lorem ipsum dolore massa

目前，当图像在滑块内呈现时，即使我将鼠标悬停在滑块上，也不会显示文字或说明？

第二个问题。现在我有2个使用滑块功能的网页。在一个网页内我想隐藏滑块内的下一个和上一个箭头，同时在第二个网页内显示这些箭头，这是可能的，或者在这种情况下我需要有两个版本的{{1}文件并在每个网页内单独加载？

----------------------- EDIT ---------------- -------------

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

touchTouch.query.js

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

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

然后当图像完全渲染时，将删除标题，并且仅显示没有标题文本的图像。现在如果我点击下一个＆amp;滑块内的前一个箭头将从浏览器缓存加载图像，没有任何加载时间，标题将正确显示。那么有没有办法解决这个问题，例如修改我的脚本以仅在图像完全渲染时显示标题文本？所以有人可以解释我如何解决这个问题吗？

Answer 1

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

http://jsfiddle.net/dx8qdoph/

一些注意事项：我没有打扰在悬停时滑入和滑出的标题（我只是隐藏它们）。它的setTimeout部分是一个节省时间的黑客攻击。我添加了setTimeout，因为clickTouch添加的.placeholder元素在单击缩略图时仍然存在。正确的方法可能是在超时循环或MutationObserver之后附加字幕或类似的东西告诉你它们何时存在（而不是我的强项）。或者，如果您可以选择自定义touchTouch.jquery.js文件，则可以在其中添加标题 -
我认为你不应该需要两个版本的touchTouch来隐藏一个实现中的箭头，而不是另一个。你可以在小提琴中看到我只是通过显示隐藏箭头：没有用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滑块

2 个答案: