Проблема повторителя настраиваемых полей Wordpress с полями повторителя, активирующими одинаковую анимацию для всех сразу - PullRequest
Новая
       9

Проблема повторителя настраиваемых полей Wordpress с полями повторителя, активирующими одинаковую анимацию для всех сразу

1 голос
/ 18 июня 2019

Я в настоящее время на работе и мне нужна помощь в решении этой проблемы. Я использовал расширенные настраиваемые поля с WordPress для создания сетки изображений размером 3x3, 200x300px, когда вы наводите курсор на эти изображения, появляется наложение, но повторитель толькоповторяя первый вариант для них всех, чтобы они все активировались сразу, а не по отдельности.Кроме того, изображения не отображаются и не могут понять, почему.заранее спасибо.

Я перепробовал все, что мог, даже искал и обыскивал по всему гуглу, но ничего, что я нашел, похоже, даже не похоже на мою проблему. 

<html> 
<section class="portfolio">



    <div class="container">
        <?php 
        if(get_field('port_title'))
        {
            echo '<h4 class="section_seven_title">' . get_field('port_title') . '</h4>';
        }
        ?>

        <div class="row" id="section_seven_options">
            <?php 
                if(have_rows('port_selection_options')):
                while(have_rows('port_selection_options') ) : the_row();
                    $PORT_OPTION_ONE = get_sub_field('port_option_one');
                    $PORT_OPTION_TWO = get_sub_field('port_option_two');
                    $PORT_OPTION_THREE = get_sub_field('port_option_three');
            ?>

                    <div class="col-md-4"><p class="section_seven_subtitle"><?php echo $PORT_OPTION_ONE; ?></p></div>
                    <div class="col-md-4"><p class="section_seven_subtitle"><?php echo $PORT_OPTION_TWO; ?></p></div>
                    <div class="col-md-4"><p class="section_seven_subtitle"><?php echo $PORT_OPTION_THREE; ?></p></div>
            <?php endwhile; endif; ?>
        </div>
    </div>




    <div class="container">
        <div class="row" id="section_seven_rowone">
                <?php 
            if(have_rows('port_picture_grid_repeater')):
            while(have_rows('port_picture_grid_repeater') ) : the_row();
                $PORT_ICONS = get_sub_field('port_icons');
                $PORT_PICTURE = get_sub_field('port_picture');
                $PORT_PICTURE_TITLE = get_sub_field('port_picture_title');
                $PORT_DESC = get_sub_field('port_desc');
        ?>

            <div class="col-md-4 col" id="section_seven_grid">
                <div class="bring_it_one">
                    <div class="outerbox_one" id="outerbox_fader_one">
                        <div class="innerbox_one">
                            <i id="icon_one"><?php echo $PORT_ICONS; ?></i>
                            <p class="people_one"><?php echo $PORT_PICTURE_TITLE; ?></p>
                            <div class="the_line_one"></div>
                            <br>
                            <p class="extra_one"><?php echo $PORT_DESC; ?></p>
                        </div>  
                    </div>
                </div>                               
                <div class="outerbox_back_one" id="image_grid_seven" style="background-image: url('<?php echo $PORT_PICTURE['url']; ?>');"></div>
            </div>
            <?php endwhile; endif; ?>
        </div>
    </div>
</section>
</html>






<style>

#image_grid_seven{width:350px; height:250px;}
@media only screen and (max-width:1024px){
    #image_grid_seven{width:250px; height:150px; transition:linear 0.5s;}
}
@media only screen and (max-width:992px){
    #image_grid_seven{width:200px; height:150px; transition:linear 0.5s;}
}
@media only screen and (max-width:768px){
    #image_grid_seven{width:150px; height:150px; transition:linear 0.5s;}
}
@media only screen and (max-width:640px){
    #image_grid_seven{width:150px; height:150px; transition:linear 0.5s;}
}



@media only screen and (max-width:767px){
    .portfolio{text-align: center; transition:linear 0.5s;}
}
#section_seven_options{width:50%; margin-left:25%;}



.section_seven_title{padding-bottom: 5%; text-align:center; font-weight:bolder; font-size:35px;}
.section_seven_subtitle{padding-bottom: 30%; text-align:center;}
@media only screen and (max-width:640px){
    .section_seven_subtitle{display: inline; margin-right:10%}
}




#section_seven_rowone{margin-bottom:15%; margin-left:2%;}


#outerbox_fader:hover{animation: linear 0.3s porter forwards; } 
#outerbox_fader::after{opacity: 0; background-color: transparent;}




#port_change::after{opacity: 0;}
.port_overlay{background-color:#80deea; position:relative; z-index:20; height:100%; width:100%; opacity: 0;}
#port_change:hover{animation:linear 0.3s porter forwards;}
@keyframes porter{
    0%{background-color:#80deea; opacity:0.4;}
    50%{background-color:#7296d0; opacity: 0.7;}
    100%{background-color:#80deea; opacity: 0.9;}
}



/***FIRST BOX****/
#section_seven_grid{padding-top:4%;}


#outerbox_fader_one:hover{animation: linear 0.3s porter forwards; }
#outerbox_fader_one{opacity: 1; background-color: transparent;}
    .bring_it_one{ position: absolute; z-index: 50; cursor: pointer;}
    .outerbox_one{text-align: center; height:250px; width:350px; padding-top:25px; opacity:0;}
    .innerbox_one{opacity:0; text-align:center; position: relative; z-index:50}
    #icon_one{color:white;}
    .people_one{color:white; font-size:25px;}
    .the_line_one{height:5px; width:1px; background-color:white; margin-left:36%;}
    .extra_one{color:white; margin-top:0px;}
    .outerbox_back_one{background-image:url('images/porto8.jpg'); background-repeat:no-repeat; background-size:100%; 
    height:250px; width:350px; box-shadow:8px 10px 35px rgba(0,0,0, 0.3);}
    @media only screen and (max-width:1024px){
        .the_line_one{margin-left:72px; font-size:10px; transition:linear 0.5s;} 
        .outerbox_one{width:250px; height:150px; transition:linear 0.5s;}
        #icon_one{font-size:30px; transition:linear 0.5s;}
        .people_one{font-size:10px; transition:linear 0.5s;}
    }
    @media only screen and (max-width: 768px){
        .the_line_one{margin-left:25px; font-size:10px; transition:linear 0.5s;}
        .outerbox_one{width:200px; height:150px; transition:linear 0.5s;}
        #icon_one{font-size:30px; transition:linear 0.5s;}
        .people_one{font-size:10px; transition:linear 0.5s;}
    }
    @media only screen and (max-width:640px){
        .the_line_one{margin-left:25px; transition:linear 0.5s; font-size:10px;}
        .outerbox_one{width:150px; height:150px; transition:linear 0.5s;}
        #icon_one{font-size:30px; transition:linear 0.5s;}
        .people_one{transition:linear 0.5s; font-size:10px;}
    }
</style>




<script>
var tl_one = new TimelineMax({paused:true, delay:0.});
var outbox_one = $('.outerbox_one');
var line_one = $('.the_line_one');
var inner_one = $('.innerbox_one');
var icons_one = $('#icon_one');
var peeps_one = $('.people_one');
var another_one = $('.extra_one');

tl_one.to(outbox_one, 0.1, {opacity: 1});
tl_one.to(inner_one, 0.1, {opacity:1});
tl_one.staggerTo(line_one, 0.1, {width:"100px", opacity:1, ease:Power1.easeOut});
tl_one.staggerTo(icons_one, 0.1, {y: -5, opacity:1, ease:Power1.easeOut});
tl_one.staggerTo(peeps_one, 0.1, {y:10, opacity:1, ease:Power1.easeOut});
tl_one.staggerTo(another_one, 0.1, {y:-10, opacity:1, ease:Power1.easeOut});


function over_one(){
  tl_one.play();}
function out_one(){
  tl_one.reverse();}

outbox_one.hover(over_one, out_one);
</script>

Я ожидал, что ониработать индивидуально (навести курсор на определенный и просто запустить анимацию для одного) не все из них одновременно

...