Fancybox没有从外部URL加载图像

Fancybox not loading image from external URL

本文关键字：加载 图像 URL 从外部 Fancybox      更新时间：2023-09-26

工作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。如何解决这个问题，为什么会发生这种情况?

检查我的工作代码。

和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>

这是因为Fancybox没有识别链接指向图像，因为URL没有以.jpg(或任何其他图像类型)结束。

要解决这个问题，只需从url末尾删除&#10;:

<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>

Remove ; (Semicolon) From 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>
相关文章：