Menu icon Foundation

My Posts

No Content

My Comments

John Griffiths commented on Sebastian Anjenehm's post over 5 years

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.

John Griffiths commented on Ryan Burnett's post over 5 years

had the same issue with custom breakpoints not being applied, adding:

@import "foundation/functions";

resolved the issue, obviously needed to use upper/lower bound methods.

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Sebastian Anjenehm's post over 5 years

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.

You commented on Ryan Burnett's post over 5 years

had the same issue with custom breakpoints not being applied, adding:

@import "foundation/functions";

resolved the issue, obviously needed to use upper/lower bound methods.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content