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> 

Failing 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

Это происходит потому, что Fancybox не признает, что ссылка указывает на изображение, потому что URL-адрес не заканчивается .jpg (или любым другим типом изображения).

Чтобы исправить это, просто удалите 
 от конца URL-адресов:

<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

Удалить ; (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> 

Answer 3

Проверьте мой рабочий код на оба ваших дел.

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