CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Rushabh Shah
Rushabh Shah

Reputation: 515

Fancybox not loading image from external URL

Working HTML code:

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

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

When I tried to load the image from my website than it successfully executed but when I tried to load the image from external URL the fancybox is redirecting to that URL. How can I resolve this issue, and why is it happening?

Upvotes: 1

Views: 1183

Answers (3)

Ionut Necula
Ionut Necula

Reputation: 11472

Check my working code on both of your cases.

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

Upvotes: 1

Sachin Sanchaniya
Sachin Sanchaniya

Reputation: 1044

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>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

It's happening because Fancybox isn't recognising that the link is pointing to an image, because the URL doesn't end with a .jpg (or any other image type).

To fix this, simply remove the &#10; from the end of the URLs:

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

Upvotes: 0

Related Questions