Fancybox无法从外部URL加载图像

Question

有效的HTML代码：

<a class="fancybox-gallery" href="http://sale.coupsoft.com/uploads/938218/logo.png">
    <img class="animate scale animated" src="http://sale.coupsoft.com/uploads/938218/logo.png" alt="Image1">
    <div class="image-hover">
        <i class="icon-zoom-in-2"></i>
    </div>
</a>

失败的HTML代码：

<a class="fancybox-gallery" href="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg">
    <img class="animate scale animated" src="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg" alt="Image1" style="height:75px">
    <div class="image-hover">    
        <i class="icon-zoom-in-2"></i>
    </div>
</a>

当我尝试从我的网站加载图像时，它无法成功执行，但是当我尝试从外部URL加载图像时，fancybox将重定向到该URL。 如何解决此问题，为什么会发生？

Answer 1

在这两种情况下，请检查我的工作代码。

还有一个JSFIDDLE 。

 $("a.fancybox-gallery").fancybox({ 'transitionIn': 'elastic', 'transitionOut': 'elastic', 'speedIn': 600, 'speedOut': 200, 'overlayShow': false }); 

 <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/2.1.5/jquery.fancybox.min.js"></script> <link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" /> <a class="fancybox-gallery" href="http://sale.coupsoft.com/uploads/938218/logo.png"> <img class="animate scale animated" src="http://sale.coupsoft.com/uploads/938218/logo.png" alt="Image1"> <div class="image-hover"> <i class="icon-zoom-in-2"></i> </div> </a> <a class="fancybox-gallery" href="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg"> <img class="animate scale animated" src="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg" alt="Image1" style="height:75px"> <div class="image-hover"> <i class="icon-zoom-in-2"></i> </div> </a> 

Answer 2

之所以发生这种情况，是因为Fancybox无法识别链接指向的是图像，因为URL的结尾不是.jpg （或任何其他图像类型）。

要解决此问题，只需删除
 从网址末尾开始：

<a class="fancybox-gallery" href="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg">
    <img class="animate scale animated" src="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg" alt="Image1" style="height: 75px">
    <div class="image-hover">    
        <i class="icon-zoom-in-2"></i>
    </div>
</a>

Answer 3

删除; (Semicolon) ; (Semicolon)来自URL：

<a class="fancybox-gallery" href="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg&#10;">
    <img class="animate scale animated" src="http://wallpapercraze.com/images/wallpapers/nowallpaper-585747.jpeg&#10;" alt="Image1" style="height:75px">
    <div class="image-hover">    
        <i class="icon-zoom-in-2"></i>
    </div>
</a>