在 Prettyphoto.js 或 Fancybox 中...如何在标题中添加链接

发布于 2024-10-15 17:01:00 字数 636 浏览 3 评论 0原文

帮助!我正在为一个作家团队开发一个网站。

他们希望通过使用阴影盒效果来展示他们从事过的特定工作(作品集)的示例。

一旦打开(覆盖)图片(例如,实际上是 .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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

往事风中埋 2024-10-22 17:01:00

如果它像大多数“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

星軌x 2024-10-22 17:01:00

非常感谢这篇文章!它对我帮助很大,但随后出现的工具提示却让我大吃一惊。然后!我也找到了该部分的简单修复方法。在锚标签内的img中添加包含空格(必须有空格)的title属性:

    <a title="<p><a href="http://www.mysite.com" title=""   target="_blank">http://www.mysite.com</a></p> " rel="prettyPhoto" href="http://www.mysite.com/wm/wp-content/themes/site/images/portfolio/image.jpg" style=""><img alt="Interactive" **title=" "** src="http://www.mysite.com/wm/wp-content/themes/site/images/portfolio/image.jpg"></a>

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:

    <a title="<p><a href="http://www.mysite.com" title=""   target="_blank">http://www.mysite.com</a></p> " rel="prettyPhoto" href="http://www.mysite.com/wm/wp-content/themes/site/images/portfolio/image.jpg" style=""><img alt="Interactive" **title=" "** src="http://www.mysite.com/wm/wp-content/themes/site/images/portfolio/image.jpg"></a>

Wahoo! No Tooltip and the caption works with a link added.

孤寂小茶 2024-10-22 17:01:00

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文