галерея изображений fancybox не работает

Я пробовал, но не повезло с fancybox

В голове я связываю страницу с

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css">

Вот мои ссылки на cdnjs

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.6/jquery.mousewheel.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js"></script>
<script src="js/main.js"></script>

Вот мой код в JS

  $("a .fancybox").fancybox({
        openEffect  : 'none',
        closeEffect : 'none'
    });

$("a[href$='.jpg'],a[href$='.jpeg'],a[href$='.png'],a[href$='.gif']").attr('rel', 'gallery').fancybox();

Вот мой html

    <section class="col-1 first">
        <a class="fancybox" rel='gallery' href="images/my-office.jpg"><img src="images/my-office.jpg" /></a>

        <h3>My office</h3>
        <p>This is also called "The circle of neglect".</p>
    </section>

    <section class="col-1">
        <a class="fancybox" rel='gallery' href="images/my-cousin.jpg"><img src="images/my-cousin.jpg" alt="Eli Newton" title="Eli Newton" /></a>
        <h3>My dear cousin</h3>
        <p>My cousin is from Canada.</p>
    </section>