[英]Fancybox not loading image from external URL
有效的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
(或任何其他圖像類型)。
要解決此問題,只需刪除
從網址末尾開始:
<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>
刪除; (Semicolon)
; (Semicolon)
來自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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.