CODEWITHSUNDEEP
phphtmlcss
Bob Greenalch
Bob Greenalch

Reputation: 5

adding different data-id to PHP / HTML loop

I have created a loop to call posts so I can display posts easily on my website, however... I'm using animate.css to add animations, and a problem I'm now facing is all of these elements have the same data-id so they scroll in at the same time...

I'm very new to PHP and so I don't know if there's a way that I can give each of the divs a different data-id so they scroll in one by one?

Here's my code thus far;

<div class="animatedParent animateOnce" data-appear-top-offset='-525' data-sequence='500' style="margin: 40px 0; text-align: center;">
<h2 class="animated bounceInUp" data-id='14' style="text-transform: uppercase;">Recent Events at Pontins!</h2>
    <div class="past-events">
    <?php query_posts('cat=#&posts_per_page=4'); ?>
        <?php while (have_posts()) : the_post(); ?>
            <div class="one-fourth animated bounceInLeft" data-id='15'>
                <a href="<?php echo get_permalink(); ?>">
                    <?php the_post_thumbnail('large_wide'); ?>
                </a>
                <h4><a href="<?php echo get_permalink(); ?>"><?php the_title(); ?></a></h4>
            <?php the_excerpt(); ?>
            </div>
        <?php endwhile; ?>
    <?php wp_reset_query(); ?>
    </div>
<div style="clear:both;"></div>
</div>

http://www.stuartgreen.me.uk/pontins-events/wp-content/themes/genesis-sample/js/css3-animations.js here's a link to the JS (I'm using 'Jack McCourt - Animate It')

Upvotes: 0

Views: 208

Answers (2)

kendepelchin
kendepelchin

Reputation: 2984

You can use this in the data-id attribute of your div.

<?php while (have_posts()) : the_post(); ?>
   <div class="one-fourth animated bounceInLeft" data-id='<?php echo the_ID(); ?>'>
...

Upvotes: 1

Juan Bonnett
Juan Bonnett

Reputation: 1853

You can just replace data-id value with the current post id, now you have different ids for each element.

 <?php while (have_posts()) : the_post(); ?>
      <div class="one-fourth animated bounceInLeft" data-id='<?php echo the_ID();?>'>
                <a href="<?php echo get_permalink(); ?>">
                    <?php the_post_thumbnail('large_wide'); ?>
                </a>
                ...

Upvotes: 0

Related Questions