fancybox显示图像

我试图使用fancybox显示图像，但无法正常工作。fancybox显示图像

我的代码：

<div id="example2" style="display:none;"> 
<a id="single_image" href="#"><img src="style/images/promocional-01.jpg" alt=""/></a> </div> 

<script type="text/javascript"> 
     $(document).ready(function() { 
     $("a#single_image").fancybox(); 
    }); 
</script>

来源

2017-05-08 HawkB

如果你有一个显示：没有在div ..你期望什么是可点击区域？ – guergana

是的...在页面的加载..在加载fancybox根据文档显示 – HawkB

，您可以添加此代码，而不是在js中做它：Open image – guergana

到滑块的链接不应该是在div与

style="display:none;"

所以

<a id="single_image" href="big_version_of_image.jpg"> 
    <img src="style/images/smaller_version_of_img.jpg" alt=""/> 
    </a>

应该工作。

这里是一个工作钢笔链接：

https://codepen.io/faw/pen/KmZdbK

来源

2017-05-08 14:44:29

几个问题：

您需要添加fancybox click事件
你忘了添加适当的href。
在这种情况下，您不需要img标记。

$(document).ready(function() { 
 
    $("a#single_image").fancybox().click(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script> 
 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" /> 
 

 
<div id="example2" style="display:none;"> 
 
    <a id="single_image" href="http://i.imgur.com/uN7Y8gw.jpg"></a> 
 
</div>

来源

2017-05-08 14:45:57 Neil

以及...'display：none'它不工作，fancybox显示此消息：'所请求的内容无法加载。请稍后再试。' – HawkB

@HawkB更新。 – Neil

这工作..但我怎么可以把0？

$(document).ready(function() { 
    $.fancybox({ 
    'width': '800px', 
    'height': '286px', 
    'autoScale': true, 
    'transitionIn': 'fade', 
    'transitionOut': 'fade', 
    'type': 'image', 
    'href': 'style/images/banner.jpg' 
});

在正常屏幕中正常工作，但响应不起作用。

最多...

来源

2017-05-08 14:56:09 HawkB

fancybox显示图像

回答

相关问题