简体   繁体   English

Fancybox:原始图片的网址

[英]Fancybox: URL to raw image

是否可以在Fancybox的弹出窗口中显示指向原始图像的链接?

I did this here: http://photocontest.highpoint.edu/ 我在这里做的: http : //photocontest.highpoint.edu/

I had to hack/customize Fancybox to achieve this. 我必须破解/自定义Fancybox才能实现这一目标。

The biggest problem I had was that Fancybox creates clickable areas to go to the next/previous images. 我遇到的最大问题是Fancybox创建了可点击区域以转到下一个/上一个图像。 These clickable areas take 100% of vertical space. 这些可点击区域占据了垂直空间的100%。 That means you couldn't click on links below FancyBox. 这意味着您无法单击FancyBox下面的链接。 It took a bit of jQuery to manipulate CSS to work around that. 要解决此问题,需要一些jQuery来操纵CSS。

This is my javascript function to fix Fancybox CSS: 这是我的用于修复Fancybox CSS的javascript函数:

function fix_fancybox_css() {
  if ($("div#fancybox-content a").length>0) {
    $("#fancybox-left, #fancybox-right").css({
      'height':Math.floor($("div#fancybox-content a:visible").position().top)+'px',
      'top':'0px',
      'bottom':''
    });
  }
}

I assume you are trying to display the URL along with the image in a popup window. 我假设您正在尝试在弹出窗口中显示URL和图像。 I haven't used Fancybox myself but there is a similar jQuery lightbox clone called prettyPhoto which is very simple to use. 我自己还没有使用过Fancybox,但是有一个类似的jQuery lightbox克隆叫做prettyPhoto ,使用起来非常简单。 You can add your own content (URL in your case) as a description for the image which appears just below the image in the popup. 您可以添加自己的内容(在您的情况下为URL)作为对图像的描述,该描述显示在弹出窗口中的图像下方。 You can check out a demo on its website. 您可以在其网站上查看演示。

Sure. 当然。 Check out the inline examples on fancybox.net. 在fancybox.net上查看内联示例 They're just HTML. 它们只是HTML。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM