Why the sliding effect isn't working inside a loop?

Question

I have this code here which is working perfectly. It's a simple image and title that on mousehover it shows a descritpion.

    <div class="imageCont">
    <div class="imgBlock thumbnail">
        <a href="<?php the_permalink(); ?>" class="link-to-post" title="<?php the_title_attribute(); ?>" ><img width="300" height="150" src="http://www.tentacle.cat/wp-content/uploads/2014/11/DSC06267_Snapseed-Custom.jpg" class=" vc_box_border_grey attachment-thumbnail" alt="cartell2">
        </a>
            <div class="undertext">
                <h3 class="whiteText upperCase"><?php the_title(); ?> </h3>
                <p class="bildText" style="display: none;"><?php the_excerpt('60'); ?></p>
            </div>
    </div>
</div>

    <script>
    jQuery(document).ready(function() {
        jQuery('.imgBlock').hover(
            function() { 
                jQuery(this).find('.bildText').slideDown(300);
            },
            function () { 
                jQuery(this).find('.bildText').slideUp(300);
            }
        );
    });</script>

As I said... this is already working well but when I place it inside a post-type loop, the sliding effect stops working. This post-type loop is also working well by its own... but I'm not able to make this sliding effect to work.

     <?php
    $args = array(
        'numberposts'=>1, 
        'showpastevents'=>true,
        'orderby'=> 'eventstart',
        'order'=> 'ASC',
        'event-category' => 'portada-mini-a',
        'post_type'=>'event'
    );
    $eventloop = new WP_Query( $args );
        if ( $eventloop->have_posts() ) :?>

    <?php while ( $eventloop->have_posts() ) : $eventloop->the_post(); 
?>

 <div class="imageCont">
        <div class="imgBlock thumbnail">
            <a href="<?php the_permalink(); ?>" class="link-to-post" title="<?php the_title_attribute(); ?>" ><img width="300" height="150" src="http://www.tentacle.cat/wp-content/uploads/2014/11/DSC06267_Snapseed-Custom.jpg" class=" vc_box_border_grey attachment-thumbnail" alt="cartell2">
            </a>
                <div class="undertext">
                    <h3 class="whiteText upperCase"><?php the_title(); ?> </h3>
                    <p class="bildText" style="display: none;"><?php the_excerpt('60'); ?></p>
                </div>
        </div>
    </div>
    <script>
        jQuery(document).ready(function() {
            jQuery('.imgBlock').hover(
                function() { 
                    jQuery(this).find('.bildText').slideDown(300);
                },
                function () { 
                    jQuery(this).find('.bildText').slideUp(300);
                }
            );
        });
    </script>
    <?php
        endwhile;
        wp_reset_postdata();
    ?>

I know that inside the loop I should call the thumbnail... but in this case the slide effect it should work anyway, right ? As you can suspect I don't have so much experience in coding so I'd love that someone could give me a hand to sort this out! Thank you very much in advance

Yes, I place it also outside the loop and the problem is still there — user3489056, Feb 06 '15 at 10:47

cari · Accepted Answer · 2015-02-08T23:11:51.970

0

cut&paste this block

<script>
    jQuery(document).ready(function() {
        jQuery('.imgBlock').hover(
            function() { 
                jQuery(this).find('.bildText').slideDown(300);
            },
            function () { 
                jQuery(this).find('.bildText').slideUp(300);
            }
        );
    });
</script>

to the very start of your file. you have it inside your loop, so it gets outputted multiple times. you only need this block once. i can imagine that this kills the function, because it gets executed multiple times at once when hovering.

[edit]

use get_the_excerpt() instead of the_excerpt() and it will work in your example. for the first 60 chars use substr(get_the_excerpt(),0,60)

edited Feb 08 '15 at 23:11

answered Feb 06 '15 at 10:19

cari

2,251
2
18
27

Hey, Thanks for your fast answer. Now I place it outside the loop and the problem is still being there. – user3489056 Feb 06 '15 at 10:25
do you have an url for me to look at? – cari Feb 06 '15 at 15:45
its because your p.bildText is empty. you have `

Esdeveniment de mostra per al lloc web del Teatre
` instead of `
Esdeveniment de mostra per al lloc web del Teatre
`. the_excerpt() in wordpress uses auto-formatting, which includes the
you dont want. use get_the_excerpt() instead of it.
– cari Feb 08 '15 at 22:58

Why the sliding effect isn't working inside a loop?

1 Answers1