Question

我用图像缩略图查看器2＆＃39;制作了一个小图库。 Link here

脚本允许扩展图像下方的title属性。一切正常，但我找不到一种方法来设置title属性中的文本样式。

我想要做的就是更改一些基本功能，即字体系列，字体大小，边距等等。没什么好看的。

<tr>
    <td>
        <a href="img/test%20images/IMG305eng.jpg" 
           rel="enlargeimage"  
           rev="targetdiv:main,trigger:click,preload:yes,fx:fade" 
           title="&lt;em&gt;Hello World&lt;/em&gt; - 2014 - 20x30x5cm">
           <img src="img/test%20images/IMG305eng.jpg">
        </a>
    </td>
</tr>

以上是一个图像缩略图的示例

每张图片下方都需要不同的标题。不确定它是否值得使用title属性或完全以另一种方式完成。

谢谢 - 关于堆栈溢出的第二篇帖子让我知道我是否做错了。

Answer 1

您需要定位插件生成的标记（HTML），如@Aziz指出的那样。

您的文字（悬停图片时）包含在ID为#loadedarea的元素中。

#loadedarea {
    font-weight: bold;
    color: red;
}

Answer 2

您可能需要修改js脚本以插入特定标记：例如：<br/>我添加了<p> https://jsfiddle.net/x7w12etr/2/（固定和更新的小提琴）

已修改：（请注意，您可以在此额外标记中添加类或ID，并保留图像的alt属性值）

 if (setting.link)
            imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
        imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<p>'+$anchor.attr('title') : '')+'</p></div>'
        return $(imghtml)
    }

从此处，您可以使用css定位p。

原：

if (setting.link)
            imghtml='<a href="'+setting.link+'">'+imghtml+'</a>'
        imghtml='<div>'+imghtml+((setting.enabletitle!='no' && $anchor.attr('title')!='')? '<br />'+$anchor.attr('title') : '')+'</div>'
        return $(imghtml)
    },

造型标题＆＃39;属性与CSS或可能的替代？

2 个答案: