CODEWITHSUNDEEP
jqueryhtml
sebastian montes
sebastian montes

Reputation: 45

Fancybox does not work fine

my fancybox code does not work when I add the following script in the body. What's the problem here? 

$(document).ready(function() {
    $("a#example4").fancybox({
        'opacity'       : true,
        'overlayShow'	: false,
        'transitionIn'	: 'elastic',
        'transitionOut'	: 'none'
    });
});
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" Src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
</head>

<body>
    <a id='example4' href='./example/4_b.jpg'>Image</a>

    <!--WHEN I ADD THIS LINES-->
    <!-------------------------------------------->
    <script src="assets/js/jquery.min.js"></script>
    <script src="assets/js/skel.min.js"></script>
    <!-------------------------------------------->
</body>

Upvotes: 0

Views: 46

Answers (1)

vronjec
vronjec

Reputation: 259

I think one of the issues is that you are including jQuery twice, once in the <head> section and once in the <body> section. You should include it only once.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <link rel="stylesheet" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
</head>

<body>
    <a id='example4' href='./example/4_b.jpg'>Image</a>

    <!--WHEN I ADD THIS LINES-->
    <!-------------------------------------------->
    <!-- <script src="assets/js/jquery.min.js"></script>  -->
    <script src="assets/js/skel.min.js"></script>
    <!-------------------------------------------->
</body>
</html>

Upvotes: 2

Related Questions