CODEWITHSUNDEEP
javascriptjqueryhtmlcssfancybox
Haley Torres
Haley Torres

Reputation: 3

Fancybox isn't working (Beginner)

My fancybox isn't working. I have looked through these forums and can't seem to figure out why. I'm somewhat new at this. I read that there could be an issue with the newer version of fancybox with jquery?

Any help would be greatly appreciated as I'd really like to implement fancybox into my portfolio site.

Here's a link to the site I'm working on (please bear with me as it is still in progress): http://calpoly.edu/~hmtorres/finalproject/index.html

Here's my code:

    <!DOCTYPE html>

<html>

<head>

    <title>Haley Torres</title>

    <link rel="stylesheet" href="main.css">

    <!--google font-->
    <link href='http://fonts.googleapis.com/css?family=Roboto:500,400italic,700,300italic,400' rel='stylesheet' type='text/css'>

    <!-- Add jQuery library -->
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

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

    <!-- Optionally add helpers - button, thumbnail and/or media -->
    <link rel="stylesheet" href="javascript/fancybox/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
    <script type="text/javascript" src="javascript/fancybox/source/helpers/jquery.fancybox-buttons.js"></script>
    <script type="text/javascript" src="javascript/fancybox/source/helpers/jquery.fancybox-media.js"></script>

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

    <!-- Add mousewheel plugin (this is optional) -->
    <script type="text/javascript" src="javascript/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>


</head>

<body>

    <div id="container">


    <div id="nav">

        <img src="images/identity-h80-w149.png" alt="Haley Torres">

        <ul>
            <li><a href="#work" class="smoothScroll">WORK</a></li>
            <li><a href="#about" class="smoothScroll">ABOUT</a></li>
            <li><a href="#resume" class="smoothScroll">RESUME</a></li>
            <li><a href="#contact" class="smoothScroll">CONTACT</a></li>
        </ul>


    </div><!--end of nav-->


    <div id="work">

        <br><!--line break pulls our computer from under navbar-->

        <img src="images/computer.png" alt="Work station">

        <h1>My Work</h1>

        <table>
            <tr>
                <td><a class="fancybox" href="images/moviepostermockup-large.png"  alt="Movie Poster"><img src="images/moviepostermockup-small.png" alt="Movie Poster"></a></td>
                <td><a class="fancybox" href="images/p4pmockup-large.png" alt="Pints for Pups Poster"><img src="images/p4pmockup-small.png" alt="Pints for Pups Poster"></a></td>
                <td><img src="images/personalidentity-small.png" alt="Personal Identity"></td>
            </tr>
            <tr>
                <td>row 2</td>
                <td>col 2</td>
                <td>col 3</td>
            </tr>

        </table>


    </div><!--end of work-->

And further down:

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

</body><!--end of body-->

</html>

I've downloaded everything to the correct folder and it is linked properly. When I click the image, it links to the bigger image, not popping up in the fancybox.

Upvotes: 0

Views: 217

Answers (1)

Dryden Long
Dryden Long

Reputation: 10182

You're calling jQuery twice in your HTML which will break Fancybox. Try removing 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

From line 143 in your HTML and it should work.

Upvotes: 2

Related Questions