CODEWITHSUNDEEP
jqueryhtmlfancybox
Parker Richard
Parker Richard

Reputation: 196

Can't get fancybox to load images

I've integrated fancybox successfully before so I'm aware of the usual suspects in trying to troubleshoot it - I still can't seem to get it to work. I've even tried directly linking the url of the fancybox js and css, as well as deleting all of my other jQuery libraries/scripts except for the fancybox specific ones. I'm stumped.

Link to the test site: http://parkerrichard.com/studiogreen/html/elements/fire.html

html:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=“UTF-8”>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

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

    <!-- Bootstrap Custom CSS -->
    <link href="../css/custom.css" rel="stylesheet">

    <!-- fancybox -->
    <link rel="stylesheet" href="../fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="../fancybox/source/jquery.fancybox.pack.js"></script>

    <!-- Typekit Custom Fonts -->
    <script src="//use.typekit.net/bcn3ife.js"></script>
    <script>try{Typekit.load();}catch(e){}</script>

    <link href="../css/flexslider.css" rel="stylesheet">

    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><![endif]-->

    <!-- Javascript Library -->
    <script src="../js/respond.min.js"></script>

</head>

<body>  
    <div>
        <div>
            <!-- elements row -->           
            <div class="col-lg-7 col-md-8 col-sm-7 pull-left">
                <!-- elements images -->  
                <div class="mb-sm row elements">
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <a class="fancybox" href="../img/elements/fire/img-01.jpg"><img src="../img/elements/fire/img-01.jpg" class="img-responsive pull-left"></a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <a class="fancybox" href="../img/elements/fire/img-02.jpg"><img src="../img/elements/fire/img-02.jpg" class="img-responsive img-centered"></a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <a class="fancybox" href="../img/elements/fire/img-03.jpg"><img src="../img/elements/fire/img-03.jpg" class="img-responsive pull-right"></a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <a class="fancybox" href="../img/elements/fire/img-04.jpg"><img src="../img/elements/fire/img-04.jpg" class="img-responsive pull-left"></a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <a class="fancybox" href="../img/elements/fire/img-05.jpg"><img src="../img/elements/fire/img-05.jpg" class="img-responsive img-centered"></a>
                    </div>
                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
                        <a class="fancybox" href="../img/elements/fire/img-06.jpg"><img src="../img/elements/fire/img-06.jpg" class="img-responsive pull-right"></a>
                    </div>
                </div>
            </div><!--/elements row -->
        </div><!--/body row -->
    </div><!--/container -->


    <!-- javascript -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/jquery.flexslider.js"></script>
    <script src="../js/jquery.studio-green.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
    });
    </script>


</body>
</html>

Upvotes: 0

Views: 315

Answers (2)

Roy Sonasish
Roy Sonasish

Reputation: 4599

add "jquery.fancybox.pack.js" at the bottom of the page after "jquery.studio-green.js" like this:

<!-- javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/jquery.flexslider.js"></script>
<script src="../js/jquery.studio-green.js"></script>
<script type="text/javascript" src="../fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".fancybox").fancybox();
});
</script>

hope this will solve your issue.

Upvotes: 1

Troy Thompson
Troy Thompson

Reputation: 371

You should include jquery.fancybox.pack.js after you include jQuery.

There is also an error in jquery.studio-green.js where you refer to "Query".

Get rid of those JS errors and try again.

Upvotes: 1

Related Questions