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>

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

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

和JSFIDDLE。

＆＃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;

Answer 2

这种情况正在发生，因为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>

Answer 3

从网址中删除; (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>

Fancybox无法从外部URL加载图像

3 个答案: