Menu icon Foundation
Orbit + Clearing Lightbox

<!doctype html>
<html class="no-js" lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/font-awesome.min.css" >
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<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/flowtype.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>

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?

Thx Anjenehm

Orbitclearingclearing lightbox

<!doctype html>
<html class="no-js" lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="HandheldFriendly" content="true">
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/font-awesome.min.css" >
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<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/flowtype.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>

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?

Thx Anjenehm

Angela over 5 years ago

I'm wondering the same thing myself

Xavi Pujolras over 5 years ago

Same problem here... any solution please?

John Griffiths over 5 years ago

Managed to get this working with orbit slider, though my solution was to use the magnific-slider plugin to handle the lightbox. the clearing plugin just won't work with orbit slider it seems.

http://dimsemenov.com/plugins/magnific-popup/

render orbit slider like:

<div class="orbit-container">
            <ul class="example-orbit " data-orbit data-options="navigation_arrows: true; slide_number: true; timer: false; animation: slide;">
              <li>
                  <a href="img/galerie/tattoo/colored/col.jpg" title="slide 1">
                    <img src="img/galerie/tattoo/colored/col.jpg" />
                  </a>
              </li>
              <li>
                  <a href="img/galerie/tattoo/colored/col2.jpg" title="slide 2">
                    <img src="img/galerie/tattoo/colored/col2.jpg" />
                  </a>
              </li>
              <li>
                  <a href="img/galerie/tattoo/colored/col3.jpg" title="slide 3">
                    <img src="img/galerie/tattoo/colored/col3.jpg" />
                </a>
              </li>
            </ul>
        </div>

$('.orbit-container li').magnificPopup({
        delegate: 'a',
        type: 'image',
        gallery: {
          enabled: true
        }
});

the data attributes will handle the generation of the orbit slider and the extra js will apply the magnific popup on top of it.