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

Question

我正在使用 asp.net mvc web 应用程序 + JQuery + Bootstrap 3 构建一个网站。

现在我正在使用一个提供图片库的网络模板，当我点击图片库中的图片时，将显示一个图片 slider 。现在图库中单个图像的标记是:-

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

现在如上面的标记所示，在图片库中，当页面加载时将显示一个名为 gallery_image1.jpg 的图像，当我将鼠标悬停在它上面时将显示一个文本

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

现在，如果我单击上面的图像，另一个名为 slide_image1.jpg 的图像将显示在图像 slider 内。

我面临的问题是，当我将鼠标悬停在 slider 上时， slider 内的图像不会有任何文本，这与图片库内的图像不同。那么任何人都可以告诉我如何在 slider 内呈现时在图像内显示固定文本吗？

这是我正在处理的网络模板图像 slider 的示例 http://livedemo00.template-help.com/wt_47767/index-2.html

Answer 1

找到 jQuery's touchTouch plugin code在 js/touchTouch.jquery.js 中。
它的评论很好，您应该能够轻松修改叠加画廊 View ，以便为每张幻灯片添加所需的内容。
所以这里没有 Bootstrap 魔法。在 CSS 中设计您需要的一切样式。如果需要，可以重复使用一些已有的样式。