文章/答案/技术大牛

发布

社区首页 >问答首页 >FancyBox不会“弹出”

问FancyBox不会“弹出”
EN

Stack Overflow用户

提问于 2014-09-23 00:01:05

回答 2查看 219关注 0票数 0

我已经尝试了2个小时让FancyBox正常工作，但我完全不知道它是如何不工作的。显然，我遗漏了一些东西，因为它只是链接到图像。

例如:我将图像链接到我的图像文件夹(包括拇指图像和大图像)，当我单击图像时，它只会将我带到一个新页面，并显示图像，而不是弹出。

下面是我的代码：

<head>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/stylish-portfolio.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="font-awesome-4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/jquery.fancybox.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-thumbs.css" media="screen"/>
    <link rel="stylesheet" type="text/css" href="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-buttons.css" media="screen"/>
    <script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.pack.js"></script>
    <script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.js"></script>
    <script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
    <script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
    <script type="text/javascript" src="/stylish-portfolio/fancybox/source/helpers/jquery.fancybox-media.js"></script>



    <script type="text/javascript">
        $(document).ready(function() {
        $(".fancyImg").fancybox();
});
        </script></head>


    <div class="row">
                        <div class="col-md-6">
                            <div class="portfolio-item">
                                <a class="fancyImg" href="img/portfolio-2.jpg" title="Lorem ipsum dolor sit amet"><img src="img/portfolio-2.jpg" alt="" /></a>
                            </div>
                        </div>

javascript

jquery

twitter-bootstrap

fancybox

回答 2

Stack Overflow用户

发布于 2014-09-23 00:11:11

我看到的第一件事是你正在加载fancybox两次。选一个。

 <script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.pack.js"></script>
 <script type="text/javascript" src="/stylish-portfolio/fancybox/source/jquery.fancybox.js"></script>

票数 0

Stack Overflow用户

发布于 2014-09-23 00:27:14

在html body部分中，我添加了以下代码

<a class="fancyImg" href="img1.jpg" title="Lorem ipsum dolor sit amet"><img src="img1.jpg" alt="" /></a>

        <script type="text/javascript">
            $(document).ready(function() {
                $(".fancyImg").fancybox();
                    type:"iframe"
                    });
        </script>

而且它似乎工作得很好:)

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/25978372

复制

相似问题

问FancyBox不会“弹出”
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FancyBox不会“弹出”EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问FancyBox不会“弹出”
EN