如何在 jQuery 图像滑块内呈现的图像内显示文本答案

【问题标题】：how to display a text inside an image that is rendered inside a jQuery image slider如何在 jQuery 图像滑块内呈现的图像内显示文本
【发布时间】：2015-08-20 00:56:07
【问题描述】：

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

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

  <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 的图像将显示在图像滑块内。

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

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

【问题讨论】：

Project name:Lorem ipsum dolore massa<img src="img/searchsmall.png" alt=""> 是如何在图像上渲染的？是否要求在图像或文本上显示相同的html？可以在 Question 中包含js、css 吗？
所以要测试和回答您的问题，应该从头开始创建一个示例来猜测您的风格和所有内容？
@guest271314 在滑块内我计划提供更详细的文本，所以如果可以定义不同的文本，这会更好..
@RokoC.Buljan 你是对的，但我在这个链接上有类似的例子livedemo00.template-help.com/wt_47767/index-2.html 它与我目前使用的模板相同

标签： javascript jquery html css image

【解决方案1】：

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

【讨论】：

但我需要指定要在跨度内呈现的文本是否正确，然后我应该强制 tochTouch 脚本读取此跨度？
@johnG 完全正确。不要认为这是强制...这不是强制，它只是关于修改。该脚本相当容易理解，并且注释很好。
所以我需要在我的网页标记中添加一个带有所需文本的跨度，然后我在脚本中指定以读取滑块内的相关跨度，这是正确的吗？