FancyBox單擊后不顯示圖像

Question

我正在使用FancyBox插件來為我的圖像獲取漂亮的圖庫查看器。 我在索引頁面上顯示了圖像，但是當我單擊它們時，花式框顯示的圖像具有所需圖像的正確尺寸，但沒有圖像。 甚至沒有損壞的圖像路徑符號，只是空白，就好像其顯示只是關閉了一樣。 我的html如下，

<a class="fancybox" rel="fancybox-thumb" href="unveil1.jpg" title="Title">
    <img src="img/loading.gif" data-src="unveil1.jpg"/>
</a> 
<a class="fancybox" rel="fancybox-thumb" href="img/unveil2.jpg" title="Title">
    <img src="img/loading.gif" data-src="img/unveil2.jpg"/>
 </a> 

雖然我的js是：

$(document).ready(function() {
 $(".fancybox").fancybox({
    prevEffect  : 'none',
    nextEffect  : 'none',
    helpers : {
        title   : {
            type: 'outside'
        }

    }
 });

 $("img").unveil(200, function() {
    $(this).load(function() {
        this.style.opacity = 1;
    });
 });
});

您可以忽略launch插件，它所做的只是延遲加載圖像，而我嘗試將其取出來，但仍然遇到相同的問題。 如果JSFiddles外部庫有問題，那么這是我的保管箱的鏈接

感謝大伙們！

Answer 1

找出問題所在。 我設置了一個過渡，使用揭幕從不透明度0開始並從那里開始過渡。 這是在單擊時設置我的圖像，使其不過渡並保持不透明度0！