Is it impossible to have a orbit slider and a clearing lightbox within? So that I can slide the image carousel and when I click or tab on a image the lightbox opens? So what can I do to force it?
<!doctype html>
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
<script src="js/modernizr.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<div class="row">
<div class="small-12 columns">
<div class="orbit-container">
<ul class="example-orbit clearing-thumbs" data-orbit data-clearing>
<li>
<a href="img/galerie/tattoo/colored/col.jpg">
<img src="img/galerie/tattoo/colored/col.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</a>
</li>
<li>
<a href="img/galerie/tattoo/colored/col2.jpg">
<img src="img/galerie/tattoo/colored/col2.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</a>
</li>
<li>
<a href="img/galerie/tattoo/colored/col3.jpg">
<img src="img/galerie/tattoo/colored/col3.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
<script src="js/jquery.js"></script>
<script src="js/function.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.orbit.js"></script>
<script>
$(document).foundation();
</script>
</body>
</html>
my js file to handle the slider crash the slider. syntax fail?
$(document).foundation({
orbit: {
animation: 'slide',
navigation_arrows: true,
slide_number: false,
bullets: false,
timer: false,
variable_height: false,
swipe: true
}
});