Lightbox Slider with Unique Classes

• edarioq

• October 28, 2016 at 1:38 pm

I purchased the plugin and it’s been great so far, however I’m having a bit of trouble implementing one thing.

I build a site that has a slider that when you click on an image opens up another slider in a lightbox. The lightbox plugin I used is http://noelboss.github.io/featherlight/. Here’s a bit of the HTML I have:

<section data-featherlight-gallery data-feather-filter=”a”>
  <a class=”apt-gallery-k” href=”<?php echo get_template_directory_uri(); ?>/imgs/lightbox_tipo_k1.png”>
    <img class=”module-img-size” src=”<?php echo get_template_directory_uri(); ?>/imgs/tipo_k1_on.png” alt=”2 Alcobas”>
  </a>
  <a class=”apt-gallery-k hidden” href=”<?php echo get_template_directory_uri(); ?>/imgs/lightbox_tipo_k2.png”>
    <img class=”module-img-size” src=”<?php echo get_template_directory_uri(); ?>/imgs/tipo_k2_on.png” alt=”2 Alcobas”>
  </a>
</section>

and I activate it with:

      jQuery(document).ready(function() {
        jQuery('a.apt-gallery-k').featherlightGallery({
            openSpeed: 300,
            previousIcon: ' ',
            nextIcon: ' ',
            variant: 'custom-lightbox-css',
        });
      })

Now every lightbox gallery that opens has a unique class in a seperate jQuery code. Example (notice .apt-gallery-l):

<section data-featherlight-gallery data-feather-filter="a">
  <a class="apt-gallery-l" href="<?php echo get_template_directory_uri(); ?>/imgs/lightbox_tipo_l1.png">
    <img class="module-img-size" src="<?php echo get_template_directory_uri(); ?>/imgs/tipo_l1_on.png" alt="2 Alcobas">
  </a>
  <a class="apt-gallery-l hidden" href="<?php echo get_template_directory_uri(); ?>/imgs/lightbox_tipo_l2.png">
    <img class="module-img-size" src="<?php echo get_template_directory_uri(); ?>/imgs/tipo_l2_on.png" alt="2 Alcobas">
  </a>
</section>

      jQuery(document).ready(function() {
        jQuery('a.apt-gallery-l').featherlightGallery({
            openSpeed: 300,
            previousIcon: ' ',
            nextIcon: ' ',
            variant: 'custom-lightbox-css',
        });
      })

So now that I need to make this CMS friendly so that it can be managed with WP, I have no idea how to best implement this using ACF.

This is because each lightbox image link has a unique class (a.apt-gallery-l, a.apt-gallery-k, etc…) so that it can be activated with jQuery. If I use the same class in all, then the lightbox slider shows all the images, not just the ones within it’s own HTML section code block. I can’t anticipate how many lightbox sliders someone will use and hard code it in every time, and I admit it’s not very dynamic.

I’ll gladly accept any feedback info/help. Much appreciate it. Thanks.

You can check out what I made at http://www.life72bogota.com/staging/apartamentos/:

• edarioq

• October 28, 2016 at 3:53 pm

I’ve decided to do something like this using a repeater field… not the prettiest thing but it will probably work the way I need it too.

<?php if ( have_rows('apartamento_1_alcoba') ): ?>
<div id="img-module-slider-1" class="vivienda-slider">

  <?php while( have_rows('apartamento_1_alcoba') ) : the_row();
    $icono_1_alcoba = get_sub_field('icono');
    $gallery = get_sub_field('lightbox');
    $id_1_alcoba = get_sub_field('plano_id');
  ?>

  <section data-featherlight-gallery data-feather-filter="a">
    <?php if ( $gallery ): ?>
      <?php foreach ( $gallery as $image ): ?>
        <a class="apt-gallery-<?php echo $id_1_alcoba ?>" href="#" data-featherlight="image">
          <img class="module-img-size" src="<?php echo $icono_1_alcoba['url'] ?>" alt="<?php echo $icono_1_alcoba['alt'] ?>">
        </a>
        <a class="apt-gallery-<?php echo $id_1_alcoba ?>" href="<?php echo $image['url'] ?>" alt="<?php echo $image['alt']?>"></a>
      <?php endforeach; ?>
    <?php endif; ?>
  </section>
  <?php endwhile; ?>

</div>
<?php endif; ?>

However, I’d like to be able to get just the first image of the gallery in the for each, how can I do that?

• edarioq

• October 28, 2016 at 4:27 pm

Another question, how do I omit the first image in the gallery from the loop?

<?php foreach ( $gallery as $image ): ?>
  <a class="apt-gallery-<?php echo $id_1_alcoba ?>" href="<?php echo $image['url'] ?>" alt="<?php echo $image['alt']?>"></a>
<?php endforeach; ?>

• edarioq

• October 28, 2016 at 5:01 pm

I got it, my code is now:

<?php if ( have_rows('apartamento_1_alcoba') ): ?>
<div id="img-module-slider-1" class="vivienda-slider">

  <?php while( have_rows('apartamento_1_alcoba') ) : the_row();
    $icono_1_alcoba = get_sub_field('icono');
    $gallery = get_sub_field('lightbox');
    $id_1_alcoba = get_sub_field('plano_id');
  ?>

  <section data-featherlight-gallery data-feather-filter="a">
    <a class="apt-gallery-<?php echo $id_1_alcoba ?>" href="<?php echo $gallery[0]['url'] ?>">
      <img class="module-img-size" src="<?php echo $icono_1_alcoba['url'] ?>" alt="<?php echo $icono_1_alcoba['alt'] ?>">
    </a>
    <?php if ( $gallery ): ?>
      <?php unset($gallery[0]); ?>
      <?php foreach ( $gallery as $image ): ?>
        <a class="apt-gallery-<?php echo $id_1_alcoba ?>" href="<?php echo $image['url'] ?>" alt="<?php echo $image['alt']?>"></a>

      <?php endforeach; ?>
    <?php endif; ?>
  </section>
  <?php endwhile; ?>

</div>
<?php endif; ?>