admin管理员组

文章数量:1022784

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
Share Improve this question edited May 10, 2019 at 22:21 div info asked May 2, 2019 at 23:16 div infodiv info 93 bronze badges 1
  • Please add the resulting inspected code to your question. – norman.lol Commented May 3, 2019 at 8:53
Add a comment  | 

1 Answer 1

Reset to default 0

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;
}

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
Share Improve this question edited May 10, 2019 at 22:21 div info asked May 2, 2019 at 23:16 div infodiv info 93 bronze badges 1
  • Please add the resulting inspected code to your question. – norman.lol Commented May 3, 2019 at 8:53
Add a comment  | 

1 Answer 1

Reset to default 0

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;
}

本文标签： loopProblem with msthumbframeselected class in Master Slider

版权声明：本文标题：loop - Problem with ms-thumb-frame-selected class in Master Slider 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745504290a2153534.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。