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顯示圖像

回答

相關問題