Menu icon Foundation
Orbit Slider not working with Grails

So I'm building a website using groovy grails, and I'm developing in Netbeans IDE 8.0
I attempted to use the Orbit slider in order to create a slide show, but the images are all just stacked on top of each other, and It seems to not be working at all.

This is the stuff in the head

        <script src="${resource(dir: 'js/vendor',file:'modernizr.js')}"></script>
        <script src="${resource(dir: 'js/vendor',file:'jquery.js')}"></script>
        <script src="${resource(dir: 'js/vendor',file:'fastclick.js')}"></script>

        <script src="${resource(dir: 'js',file:'foundation.min.js')}"></script>

        <script>
            $(document).foundation();
            $('#scope').foundation();
        </script>
            

         

And this is the stuff in the body.

            

         <ul  data-orbit>
                <li>
                    <img src="${resource(dir: 'images',file:'Dot01.png')}" alt="slide 1" />
                    <div class="orbit-caption">
                        Caption One.
                    </div>
                </li>
                <li class="active">
                    <img src="${resource(dir: 'images',file:'Dot01.png')}" alt="slide 2" />
                    <div class="orbit-caption">
                        Caption Two.
                    </div>
                </li>
                <li>
                    <img src="${resource(dir: 'images',file:'Dot01.png')}" alt="slide 3" />
                    <div class="orbit-caption">
                        Caption Three.
                    </div>
                </li>
            </ul>

Am I missing something important here or what?

orbit slidernot workinggroovygrails

So I'm building a website using groovy grails, and I'm developing in Netbeans IDE 8.0
I attempted to use the Orbit slider in order to create a slide show, but the images are all just stacked on top of each other, and It seems to not be working at all.

This is the stuff in the head

        <script src="${resource(dir: 'js/vendor',file:'modernizr.js')}"></script>
        <script src="${resource(dir: 'js/vendor',file:'jquery.js')}"></script>
        <script src="${resource(dir: 'js/vendor',file:'fastclick.js')}"></script>

        <script src="${resource(dir: 'js',file:'foundation.min.js')}"></script>

        <script>
            $(document).foundation();
            $('#scope').foundation();
        </script>
            

         

And this is the stuff in the body.

            

         <ul  data-orbit>
                <li>
                    <img src="${resource(dir: 'images',file:'Dot01.png')}" alt="slide 1" />
                    <div class="orbit-caption">
                        Caption One.
                    </div>
                </li>
                <li class="active">
                    <img src="${resource(dir: 'images',file:'Dot01.png')}" alt="slide 2" />
                    <div class="orbit-caption">
                        Caption Two.
                    </div>
                </li>
                <li>
                    <img src="${resource(dir: 'images',file:'Dot01.png')}" alt="slide 3" />
                    <div class="orbit-caption">
                        Caption Three.
                    </div>
                </li>
            </ul>

Am I missing something important here or what?

PhilW over 5 years ago

Looks like you're only including foundation.min.js which doesn't include the orbit js code. If you include the orbit js code it should spring into life....

Hope this helps.

Duncan Baird over 5 years ago

I tried including the orbit code but it didn't really help. It seems like its not executing any of the code at all.
```HTML
script src="${resource(dir: 'js/vendor',file:'jquery.js')}" script
script src="${resource(dir: 'js/foundation',file:'foundation.js')}" script
script src="${resource(dir: 'js/foundation',file:'foundation.orbit.js')}" script
script
$(document).foundation({
orbit: {
animation: 'slide',
timer_speed: 7000,
pause_on_hover: true
}
});
$('#scope').foundation();
script