Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Mona Jalal
Mona Jalal
4,302 Points
Posted by Mona Jalal
Mona Jalal
4,302 Points

FancyBox is not working as shown in jsfiddle

I followed the code in this jsfiddle and wrote everything in a single html file. What is missing as it is not working as shown in jsfiddle? http://jsfiddle.net/kevin11189/uZCC6/1270/

<! DOCTYPE html>
<html>
<head>
<style>

.hidden {
    display: none;
}

</style>
</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>
<script language="JavaScript">

 $('.fancybox-thumbs').fancybox({
                prevEffect : 'none',
                nextEffect : 'none',

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

                helpers : {
                    thumbs : {
                        width  : 50,
                        height : 50
                    }
                }
            });

</script>
</html>

http://stackoverflow.com/questions/40730964/fancybox-not-working-as-expected

1 Answer

miikis
miikis
44,957 Points
miikis
miikis
44,957 Points

Hi Mona,

You're missing the jQuery FancyBox Plugin. If you look on the left sidebar in JSFiddle, you'll find a section labeled "External Resources." Clicking on it should present you with a list of, well, external resources. If you right-click and download each linked file in the list, then add each downloaded file to your HTML, everything should work as you expect.