I'm using Master Slider to provide a slideshow.

Inside a loop I've put some CSS to make the class .ms-thumb-frame-selected to dynamically use the thumb of a post as background. But now my problem is that all elements with .ms-thumb-frame class get the same image. But when I check from "Inspect element" in my browser I can see that the other images are correct.

Here's my code:

$loop = new WP_Query( 'posts_per_page=6&cat=');
while($loop->have_posts()) : $loop->the_post();
$bg= 0;
$slider_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '');

?>
<?php
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
if($bg == 0){ ?>

    <style>
        #masterslider .ms-thumb-frame-selected
        {
            background:linear-gradient( rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url("<?php echo $url;?>") no-repeat ;
            background-size:cover;
            opacity: .8;
            background-position: 100 0;
            transition: background .5s;
        }
    </style>

and this is loop

<!-- new slide -->
<div class="ms-slide">
    <!-- slide background -->
    <img src="<?php bloginfo('template_directory');?>/js/masterslider/blank.gif" data-src="<?php echo $slider_image[0];?> " alt="<?php the_title();?>" />
    <!-- slide text layer -->
    <div class="ms-layer ms-caption"  data-offset-x      = "10"
 data-offset-y      = "15"
 data-origin        = "tr"
 data-type          = "text"
 data-effect        = "bottom(90)"
 data-duration      = "900"
 data-ease          = "easeOutQuart">
        <h1><a href="<?php the_permalink();?>"><?php the_title();?> </a></h1>
    </div>
    <!-- slide text title it shows in thumbnail list. -->

    <div class="ms-thumb">
        <div class="ms-thumb-text">
            <h3><?php //the_title();?>
                <?php  if ( get_the_title() ) {
                    $t = get_the_title();
                    $t =  mb_substr($t, 0, 102, 'UTF-8');

                    }else{
                        the_ID();
                    }
                    echo $t;
                ?>
            </h3>



        </div>
    </div>
</div>
    <?php }?>
<!-- end of slide -->

and this is javascript

t.slideAction = function (t) {
        var r = n(t.$element.find(".ms-thumb"))
            , u = this
            , i = n("<div><\/div>").addClass("ms-thumb-frame").append(r).append(n('<div class="ms-thumb-ol"><\/div>')).bind("click", function () {
                u.changeSlide(i)
            });
        if (i[0].index = this.index_count++, this.$thumbscont.append(i), n.browser.msie) r.on("dragstart", function (n) {
            n.preventDefault()
        });

After looking at my slideshow I found all background images are the same but if check the code in my browser via "Inspect element" it get other image. How's this possible?

I'm using Master Slider to provide a slideshow.

Inside a loop I've put some CSS to make the class .ms-thumb-frame-selected to dynamically use the thumb of a post as background. But now my problem is that all elements with .ms-thumb-frame class get the same image. But when I check from "Inspect element" in my browser I can see that the other images are correct.

Here's my code:

$loop = new WP_Query( 'posts_per_page=6&cat=');
while($loop->have_posts()) : $loop->the_post();
$bg= 0;
$slider_image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), '');

?>
<?php
$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
if($bg == 0){ ?>

    <style>
        #masterslider .ms-thumb-frame-selected
        {
            background:linear-gradient( rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url("<?php echo $url;?>") no-repeat ;
            background-size:cover;
            opacity: .8;
            background-position: 100 0;
            transition: background .5s;
        }
    </style>

and this is loop

<!-- new slide -->
<div class="ms-slide">
    <!-- slide background -->
    <img src="<?php bloginfo('template_directory');?>/js/masterslider/blank.gif" data-src="<?php echo $slider_image[0];?> " alt="<?php the_title();?>" />
    <!-- slide text layer -->
    <div class="ms-layer ms-caption"  data-offset-x      = "10"
 data-offset-y      = "15"
 data-origin        = "tr"
 data-type          = "text"
 data-effect        = "bottom(90)"
 data-duration      = "900"
 data-ease          = "easeOutQuart">
        <h1><a href="<?php the_permalink();?>"><?php the_title();?> </a></h1>
    </div>
    <!-- slide text title it shows in thumbnail list. -->

    <div class="ms-thumb">
        <div class="ms-thumb-text">
            <h3><?php //the_title();?>
                <?php  if ( get_the_title() ) {
                    $t = get_the_title();
                    $t =  mb_substr($t, 0, 102, 'UTF-8');

                    }else{
                        the_ID();
                    }
                    echo $t;
                ?>
            </h3>



        </div>
    </div>
</div>
    <?php }?>
<!-- end of slide -->

and this is javascript

t.slideAction = function (t) {
        var r = n(t.$element.find(".ms-thumb"))
            , u = this
            , i = n("<div><\/div>").addClass("ms-thumb-frame").append(r).append(n('<div class="ms-thumb-ol"><\/div>')).bind("click", function () {
                u.changeSlide(i)
            });
        if (i[0].index = this.index_count++, this.$thumbscont.append(i), n.browser.msie) r.on("dragstart", function (n) {
            n.preventDefault()
        });

After looking at my slideshow I found all background images are the same but if check the code in my browser via "Inspect element" it get other image. How's this possible?

• loop
• css

• Please add the resulting inspected code to your question. – norman.lol Commented May 3, 2019 at 8:53

1 Answer 1

Seems you are simply overwriting #masterslider .ms-thumb-frame-selected with each loop. So in the end only the last iteration will take effect.

You maybe need to add the post ID as class somewhere as well and then target #masterslider .ms-thumb-frame-selected .post-<?php echo $post->ID; ?> { } in your CSS.

Adjust your markup inside The Loop to print the post ID as class on the same element/<div> you are targeting with #masterslider .ms-thumb-frame-selected. So that in the end you can use #masterslider .ms-thumb-frame-selected.my-post-id-class-<?php echo $post->ID; ?>.

So asuming your markup inside The Loop was:

<div id="masterslider">
    <div class=".ms-thumb-frame-selected">
        <!-- ... -->
    </div>
</div>

Now make it:

<div id="masterslider">
    <div class="ms-thumb-frame-selected post-<?php echo $post->ID; ?>">
        <!-- ... -->
    </div>
</div>

And your CSS should be:

#masterslider .ms-thumb-frame-selected.post-<?php echo $post->ID; ?> {
    background: linear-gradient( rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url("<?php echo $url; ?>") no-repeat ;
    background-position: 100 0;
    background-size: cover;
    opacity: .8;
    transition: background .5s;
}