Fancybox loop:false not working

Question

I am not a webdev but I tried to get the Fancybox working. Everything works fine except the loop:false attribute. The pictures don't stopp at the end of the gallery.

Here is my code

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

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="source/jquery.fancybox.js?v=2.1.5"></script>
<link rel="stylesheet" type="text/css" href="source/jquery.fancybox.css?v=2.1.5" media="screen" />



<script type="text/javascript">
    $(document).ready(function() {
        /*
         *  Simple image gallery. Uses default settings
         */

        $('.fancybox').fancybox({'loop': false, });

        /*
         *  Different effects
         */

        // Change title type, overlay closing speed
   /*     $(".fancybox-effects-a").fancybox();*/

        // Disable opening and closing animations, change title type
        $(".fancybox-effects-b").fancybox({
            openEffect: 'none',
            closeEffect: 'none',

        });

        // Set custom style, close if clicked, change title type and overlay color
        $(".fancybox-effects-c").fancybox({
            wrapCSS: 'fancybox-custom',
            closeClick: true,

            openEffect: 'none',


        });
        // Set custom border-width
        $(".fancybox")
            .attr('rel', 'gallery')
            .fancybox({
                padding: 2
            });



    });
</script>
<style type="text/css">
    .fancybox-custom .fancybox-skin {
        box-shadow: 0 0 50px #222;
    }

    body {
        text-align: center;
        max-width: 1250px;
        margin: 0 auto;
    }

    div {
        /*text-align:center;*/
        width: 100%;
    }

    iframe {
        width: 1200px;
    }
</style>

<div>
    <iframe width='800' height='400' frameborder='0' src='/island/island_2015.html' allowfullscreen webkitallowfullscreen mozallowfullscreen oallowfullscreen msallowfullscreen></iframe>
</div>



<h3>Simple image gallery</h3>
<p>
    <a class="fancybox" href="/island/img/photoblog/Image01.JPG" data-fancybox-group="gallery" title=""><img src="/island/img/photoblog/thumbs/Image01.JPG" alt="" /></a>
    <a class="fancybox" href="/island/img/photoblog/Image02.JPG" data-fancybox-group="gallery" title=""><img src="/island/img/photoblog/thumbs/Image02.JPG" alt="" /></a>
    <a class="fancybox" href="/island/img/photoblog/Image03.JPG" data-fancybox-group="gallery" title=""><img src="/island/img/photoblog/thumbs/Image03.JPG" alt="" /></a>
</p>

<p>
    <a href="www.google.com">ZURÜCK</a>
</p>

Does anyone has an idea why the box is not reacting? thanks for help

If you meant is not working on IE, then remove the trialing comma after false in 'loop': false, otherwise it works fine for me jsfiddle.net/az9p9gsg — JFK

hoge6b01 hoge6b01 · Accepted Answer · 2015-07-25T09:36:36

Okay, I got it. Had to play a bit in a Sandbox. I had to take the 'loop':false to this part of the code:

        // Set custom border-width
        $(".fancybox")
            .attr('rel', 'gallery')
            .fancybox({
                padding: 2,
                'loop': false
            });

Now working as charme (eventhough got some strange "row" displayed when picture is loading).

Thanks

Fancybox loop:false not working

1 Answers