Fancybox无法从外部URL加载图像

时间:2016-11-07 11:39:51

标签: javascript jquery html css

使用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。我该如何解决这个问题,为什么会这样?

3 个答案:

答案 0 :(得分:1)

检查两个案例的工作代码。

JSFIDDLE

&#13;
&#13;
function check_validation()
{

    $this->load->helper(array('form', 'url'));
    $this->load->library('form_validation');

    //default result
    $finalResult = array('code' => 500, 'msg' => 'Unknow Error', 'data' => array());

    if($this->input->post()) {
        //set validaton
        $this->form_validation->set_rules('firstname', 'Username', 'trim|strip_tags|required');
        $this->form_validation->set_rules('lastname', 'Lastname', 'trim|strip_tags|required');
        $this->form_validation->set_rules('email', 'Email', 'trim|strip_tags|required');

        //check form
        if($this->form_validation->run() == TRUE) {
            $finalResult = array('code' => 200, 'msg' => 'Success', 'data' => array()); 
        }else {
            $finalResult = array('code' => 400, 'msg' => validation_errors(), 'data' => array());
        }
    }

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

答案 1 :(得分:0)

这种情况正在发生,因为Fancybox没有意识到链接指向图像,因为URL不以.jpg(或任何其他图像类型)结尾。

要解决此问题,只需从网址末尾删除&#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>

答案 2 :(得分:0)

从网址中删除; (Semicolon)

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