在 Prettyphoto.js 或 Fancybox 中...如何在标题中添加链接
帮助!我正在为一个作家团队开发一个网站。
他们希望通过使用阴影盒效果来展示他们从事过的特定工作(作品集)的示例。
一旦打开(覆盖)图片(例如,实际上是 .doc 的屏幕截图),就会有一个标题来粗略地解释它。问题是,他们想要在标题中添加一个链接,以便用户可以将文件(.doc、.pdf)下载到他们的桌面或链接到他们曾经处理过的另一个网站。
我已经成功地使用 Fancybox 做到了这一点,但是链接包含在其中的方式在悬停时显示了不需要的文本(浏览器黄色工具提示)。
这是代码:
<a class="group" rel="portfolio"
href="../../images/pf_nat/cfcBig.png" title="Rédaction de plus de 300 articles. <a href='http://www.groupecfc.com/fr-Ca/' target='_blank'>Visiter le site</a>"><img src="../../images/pf_nat/tn_nat_cfcBig.gif" alt="" width="40" height="40"/></a>
在本例中,它是指向某个网站的链接。
Help! I'm working on a website for a team of writers.
They want to show examples of specific jobs they've worked on (portfolio) by using the shadowbox effect.
Once opened (in overlay) the picture which is actually a screenshot of a .doc for instance, would have a caption to explain it roughly. The thing is, they want a link inside the caption so the user can download the files (.doc, .pdf) to their desktop or link to another site that they haved worked on.
I've managed to do it with Fancybox but the way the link is included in the it shows undesirable text when hovered (the browser yellow tooltip).
Here is the code:
<a class="group" rel="portfolio"
href="../../images/pf_nat/cfcBig.png" title="Rédaction de plus de 300 articles. <a href='http://www.groupecfc.com/fr-Ca/' target='_blank'>Visiter le site</a>"><img src="../../images/pf_nat/tn_nat_cfcBig.gif" alt="" width="40" height="40"/></a>
in this case it's a link to some site.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
如果它像大多数“lightbox”插件一样,我相信您需要使用字符实体来执行此操作,例如:
hello
将变为
将其放入标题标签中,它将链接。
获取 HTML 字符实体的完整列表,请访问 http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
If it's like most 'lightbox' plugins, I believe you need to do this use character entities for example:
<a href="test.html">hello</a>
would become
<a href="text.html">hello</a>
Put this in your title tag and it will link.
Get a full list of HTML character entities at http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references
非常感谢这篇文章!它对我帮助很大,但随后出现的工具提示却让我大吃一惊。然后!我也找到了该部分的简单修复方法。在锚标签内的img中添加包含空格(必须有空格)的title属性:
Wahoo!没有工具提示,并且标题可以在添加链接的情况下使用。
Thanks so much for this post! It helped me greatly, but then the tooltip showing up blew it all out of the water for me. THEN! I found an easy fix to that part also. Add a title attribute that contains a space (must have a space) to the img inside the anchor tag:
Wahoo! No Tooltip and the caption works with a link added.
PrettyPhoto的这个主题以及无法添加照片下载链接
这个问题已经讨论了好几年了。我很惊讶原来的
据我所知,作者还没有解决这个问题。
PrettyPhoto 现在有多个版本,包括一些混搭版本
用作Joomla、WordPress等的插件。
所以我拿了Joomla插件并进行了修改。它可以独立运行,无需
Joomla(因为我不使用 Joomla)。你可以在这里看到我的修改:
http://www.catpin.com/prettyphoto
我还包括两个压缩文件:
1) 实际的 jquery.prettyPhoto.js 文件
2) 执行下载的 PHP 脚本(打开浏览器下载对话框)。
我希望这对您有所帮助……或者至少让您知道这是可以做到的。
This topic of PrettyPhoto and the inability to add a photo download link
has been a discussion for a couple of years now. I'm amazed that the original
authors have not addressed this ... as far as I know.
There are now several versions of PrettyPhoto, including some mash-ups that
are used as plugins for Joomla, WordPress, etc.
So I took the Joomla plugin and modified it. It can run stand-alone, without
Joomla (as I don't use Joomla). You can see my modification here:
http://www.catpin.com/prettyphoto
I also include two zipped files:
1) the actual jquery.prettyPhoto.js file
2) the PHP script that does the download (opens the browser download dialog box).
I hope this helps out ... or at least gives you an idea that it can be done.