Adding a number sequence for attributes

  • I’ve been looking for solutions for hours and I know this should be super simple to do but I have a loop for some gallery items and I need to be able to have a different number for X.

    <a href="#" data-gallery-id="X">

    On the live site it should look like this:

    <a href="#" data-gallery-id="1">
<a href="#" data-gallery-id="2">
<a href="#" data-gallery-id="3">

    If anyone can help I’d appreciate it!

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter vectyr

    (@vectyr)

    Ok, I figured it out. Turned out to be a more complex problem and complex solution.

    Thread Starter vectyr

    (@vectyr)

    My original question was not nearly detailed enough but that’s because I didn’t understand the problem entirely at the time. It ended up being a late night and so here’s the solution I came up with.

    What I have here is an Advanced Custom Fields repeater with a custom carousel solution via https://responsiveslides.com/. I ended up adding a counter that adds a unique class to each carousel on the page. Some pages have many carousels.

              <div class="sections">
            <?php if( have_rows('sections') ) : $counter = 2; while( have_rows('sections') ): the_row(); $counter++ ?>
              <div class="sections__carousel">
                <?php 
                $images = get_sub_field('section_gallery'); if( $images ): ?>
                  <ul class="section-page__slider slider slider<?php echo $counter; ?>">
                    <?php foreach( $images as $image ): ?>
                      <li>
                        <a class="lightbox-trigger" href="<?php echo esc_url($image['url']); ?>"><span class="iconify" data-icon="ic:baseline-fullscreen" data-inline="true"></span><img src="<?php echo esc_url($image['sizes']['large']); ?>"></a>
                        <div class="bg-fill">
                          <div class="bg-fill__img" style="background-image: url('<?php echo esc_url($image['sizes']['large']); ?>');"></div>
                        </div>
                      </li>
                    <?php endforeach; ?>
                  </ul>
                <?php endif; ?>
              </div>
              <div class="sections__content">
                <?php if( $title = get_sub_field('section_title') ): ?><h2 class="sections__title"><?php echo $title; ?></h2><?php endif; ?>
                <?php if( $description = get_sub_field('section_description') ): ?><div class="sections__description"><?php echo $description; ?></div><?php endif; ?>
              </div>
            <?php endwhile; endif; ?>

    Then, ungh, here’s the ugly part. I am definitely not a pro at this but I have some javascript that targets each slider and adds the attribute that I need.

        $(".slider0 .lightbox-trigger").attr("data-gallery-id", "0");
    $(".slider1 .lightbox-trigger").attr("data-gallery-id", "1");
    $(".slider2 .lightbox-trigger").attr("data-gallery-id", "2");
    $(".slider3 .lightbox-trigger").attr("data-gallery-id", "3");
    $(".slider4 .lightbox-trigger").attr("data-gallery-id", "4");
    $(".slider5 .lightbox-trigger").attr("data-gallery-id", "5");
    $(".slider6 .lightbox-trigger").attr("data-gallery-id", "6");
    $(".slider7 .lightbox-trigger").attr("data-gallery-id", "7");
    $(".slider8 .lightbox-trigger").attr("data-gallery-id", "8");
    $(".slider9 .lightbox-trigger").attr("data-gallery-id", "9");
    $(".slider10 .lightbox-trigger").attr("data-gallery-id", "10");

    This allows the lightbox solution I’m using: “Lightbox with PhotoSwipe” to only show the images for that specific gallery without just showing every gallery image in a single lightbox.

    This is not an elegant solution but it WORKS.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Adding a number sequence for attributes’ is closed to new replies.