Fancybox thumbnail is not working

Question

I'm trying to imitate this jsfiddle: http://jsfiddle.net/kevin11189/uZCC6/1269/ however the thumbnails are not appearing.

Here's my code:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Gallery</title>
        <meta name="description" content="An interactive getting started guide for Brackets.">
        <link rel="stylesheet" href="">

        <style>
        .hidden {
    display: none;
}
        </style>

<!-- Add jQuery library -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


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


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

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

        <script type="text/javascript" src="js/jquery.fancybox-media.js"></script>

        <script type="text/javascript" src="js/jquery.fancybox.pack.js"></script>
        <script>
           $('.fancybox-thumbs').fancybox({
                prevEffect : 'fade',
                nextEffect : 'fade',

                closeBtn  : true,
                arrows    : true,
                nextClick : true,                

                helpers : {
                    thumbs : {
                        width  : 40,
                        height : 40

                    }
                }
            });</script>


    </head>

    <body>
<a class="fancybox-thumbs" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/4_b.jpg"><img src="http://fancyapps.com/fancybox/demo/4_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs hidden" data-fancybox-group="thumb1" href="http://fancyapps.com/fancybox/demo/3_b.jpg"><img src="http://fancyapps.com/fancybox/demo/3_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/2_b.jpg"><img src="http://fancyapps.com/fancybox/demo/2_s.jpg" alt="" /></a>

        <a class="fancybox-thumbs hidden" data-fancybox-group="thumb2" href="http://fancyapps.com/fancybox/demo/1_b.jpg"><img src="http://fancyapps.com/fancybox/demo/1_s.jpg" alt="" /></a>






    </body>
</html>

jsfiddle: http://jsfiddle.net/3bbkjdcc/

i added the same resources as in the working jsfiddle but it didn't work.Any help?

Answer 1

You need to add absolute URL paths in external resources option, not relative. See the Console errors in Firebug.

Example: http://fancyapps.com/fancybox/source/jquery.fancybox.js instead of just jquery.fancybox.js

Check this: JSFiddle , I forked your JSfiddle and edited the external sources.

外部资源

Fancybox thumbnail is not working

Question

1 answers

solution1
3 ACCPTED 2015-06-22 13:02:38

Fancybox thumbnail is not working

Question

1 answers

solution1 3 ACCPTED 2015-06-22 13:02:38

solution1
3 ACCPTED 2015-06-22 13:02:38