Портфолио shuffle js не работает при первой загрузке страницы, но прекрасно работает после обновления страницы - PullRequest
Новая
       23

Портфолио shuffle js не работает при первой загрузке страницы, но прекрасно работает после обновления страницы

0 голосов
/ 31 мая 2019

При каждой первой загрузке страницы галерея фильтров Portfolio shuffle js не работает должным образом (загружается только некоторая часть изображений, а изображения 2-го и 3-го рядов перекрываются с верхним рядом), но когда я обновляю страницу, скрипт запускается без проблем (изображения загружаются правильно и хорошо расположены, не перекрывая друг друга). Может кто-нибудь помочь мне с этим вопросом, пожалуйста? 

var $ptsh = jQuery.noConflict();
$ptsh(document).ready(function() {
  var $main = $ptsh('#shuffle-wrapper');
  $main.shuffle({
    itemSelector: '.item'
  });

  /* reshuffle when user clicks a filter item */
  $ptsh('#filter a').on('click', function(e) {
    e.preventDefault();
    $ptsh('#filter a').removeClass('active');
    $ptsh(this).addClass('active');
    var groupName = $ptsh(this).attr('data-group');
    $main.shuffle('shuffle', groupName);
  });
});

<section class="gallery padding_tp_90">
  <div class="container">
    <div class="row content">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 padding_lt_0 padding_rt_0">
        <ul id="filter">
          <li><a href="#" class="active" data-group="all">All</a></li>
          <li><a href="#" data-group="webdesign">Web Design</a></li>
          <li><a href="#" data-group="mobile">Mobile App</a></li>
          <li><a href="#" data-group="brand">Branding</a></li>
          <li><a href="#" data-group="graphics">Graphics</a></li>
        </ul>
      </div>
    </div>
    <div id="shuffle-wrapper" class="boxed_three_column_port row margin_lt_0 margin_rt_0 popup-gallery">
      <div class="team_pan col-lg-4 col-md-4 col-sm-6 col-xs-12 item padding_rt_5 padding_lt_5 margin_btm_10" data-groups='["all", "webdesign"]'>
        <div class="our-team wow fadeInUp">
          <div class="team_member_pan"> <img src="images/dummy-imgs/800x650.jpg" alt="Gallery image" class="img img-responsive">
            <div class="social_media_team">
              <div class="team-prof top_25">
                <h3 class="post-title bttm_5"><a href="portfolio-1-details.html" class="white_txt_link">Mercedes AMG</a></h3>
                <span class="post bttm_10">Website Development</span>
                <ul class="team_social xlg">
                  <li><a href="portfolio-1-details.html"><i class="fas fa-link"></i></a></li>
                  <li>
                    <a href="images/dummy-imgs/800x650.jpg" class="mpopup" title="Mercedes AMG"> <i class="fas fa-search"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="team_pan col-lg-4 col-md-4 col-sm-6 col-xs-12 item padding_rt_5 padding_lt_5 margin_btm_10" data-groups='["all", "brand", "graphics"]'>
        <div class="our-team">
          <div class="team_member_pan wow fadeInUp" data-wow-delay="0.2s"> <img src="images/dummy-imgs/800x650.jpg" alt="Gallery image" class="img img-responsive">
            <div class="social_media_team">
              <div class="team-prof top_25">
                <h3 class="post-title bttm_5"><a href="portfolio-2-details.html" class="white_txt_link">New york times</a></h3>
                <span class="post bttm_10">Branding and Identity</span>
                <ul class="team_social xlg">
                  <li><a href="portfolio-2-details.html"><i class="fas fa-link"></i></a></li>
                  <li>
                    <a href="images/dummy-imgs/800x650.jpg" class="mpopup" title="New york times"> <i class="fas fa-search"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="team_pan col-lg-4 col-md-4 col-sm-6 col-xs-12 item padding_rt_5 padding_lt_5 margin_btm_10" data-groups='["all",  "mobile"]'>
        <div class="our-team wow fadeInUp" data-wow-delay="0.4s">
          <div class="team_member_pan"> <img src="images/dummy-imgs/800x650.jpg" alt="Gallery image" class="img img-responsive">
            <div class="social_media_team">
              <div class="team-prof top_25">
                <h3 class="post-title bttm_5"><a href="portfolio-3-details.html" class="white_txt_link">Lexus</a></h3>
                <span class="post bttm_10">Mobile App Development</span>
                <ul class="team_social xlg">
                  <li><a href="portfolio-3-details.html"><i class="fas fa-link"></i></a></li>
                  <li>
                    <a href="images/dummy-imgs/800x650.jpg" class="mpopup" title="Lexus"> <i class="fas fa-search"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="team_pan col-lg-4 col-md-4 col-sm-6 col-xs-12 item padding_rt_5 padding_lt_5 margin_btm_10" data-groups='["all", "webdesign"]'>
        <div class="our-team wow fadeInUp">
          <div class="team_member_pan"> <img src="images/dummy-imgs/800x650.jpg" alt="Gallery image" class="img img-responsive">
            <div class="social_media_team">
              <div class="team-prof top_25">
                <h3 class="post-title bttm_5"><a href="portfolio-1-details.html" class="white_txt_link">Microsoft</a></h3>
                <span class="post bttm_10">Website Development</span>
                <ul class="team_social xlg">
                  <li><a href="portfolio-1-details.html"><i class="fas fa-link"></i></a></li>
                  <li>
                    <a href="images/dummy-imgs/800x650.jpg" class="mpopup" title="Microsoft"> <i class="fas fa-search"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="team_pan col-lg-4 col-md-4 col-sm-6 col-xs-12 item padding_rt_5 padding_lt_5 margin_btm_10" data-groups='["all", "graphics", "brand"]'>
        <div class="our-team wow fadeInUp" data-wow-delay="0.2s">
          <div class="team_member_pan"> <img src="images/dummy-imgs/800x650.jpg" alt="Gallery image" class="img img-responsive">
            <div class="social_media_team">
              <div class="team-prof top_25">
                <h3 class="post-title bttm_5"><a href="portfolio-2-details.html" class="white_txt_link">Emirates Airlines</a></h3>
                <span class="post bttm_10">Brochure and Graphics</span>
                <ul class="team_social xlg">
                  <li><a href="portfolio-2-details.html"><i class="fas fa-link"></i></a></li>
                  <li>
                    <a href="images/dummy-imgs/800x650.jpg" class="mpopup" title="Emirates Airlines"> <i class="fas fa-search"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="team_pan col-lg-4 col-md-4 col-sm-6 col-xs-12 item padding_rt_5 padding_lt_5 margin_btm_10" data-groups='["all", "webdesign", "brand"]'>
        <div class="our-team wow fadeInUp" data-wow-delay="0.4s">
          <div class="team_member_pan"> <img src="images/dummy-imgs/800x650.jpg" alt="Gallery image" class="img img-responsive">
            <div class="social_media_team">
              <div class="team-prof top_25">
                <h3 class="post-title bttm_5"><a href="portfolio-3-details.html" class="white_txt_link">Nike Shoes</a></h3>
                <span class="post bttm_10">Website Design</span>
                <ul class="team_social xlg">
                  <li><a href="portfolio-3-details.html"><i class="fas fa-link"></i></a></li>
                  <li>
                    <a href="images/dummy-imgs/800x650.jpg" class="mpopup" title="Nike Shoes"> <i class="fas fa-search"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="team_pan col-lg-4 col-md-4 col-sm-6 col-xs-12 item padding_rt_5 padding_lt_5 margin_btm_10" data-groups='["all",  "graphics", "brand"]'>
        <div class="our-team wow fadeInUp">
          <div class="team_member_pan"> <img src="images/dummy-imgs/800x650.jpg" alt="Gallery image" class="img img-responsive">
            <div class="social_media_team">
              <div class="team-prof top_25">
                <h3 class="post-title bttm_5"><a href="portfolio-1-details.html" class="white_txt_link">Dell</a></h3>
                <span class="post bttm_10">Brochure and Graphics</span>
                <ul class="team_social xlg">
                  <li><a href="portfolio-1-details.html"><i class="fas fa-link"></i></a></li>
                  <li>
                    <a href="images/dummy-imgs/800x650.jpg" class="mpopup" title="Dell"> <i class="fas fa-search"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="team_pan col-lg-4 col-md-4 col-sm-6 col-xs-12 item padding_rt_5 padding_lt_5 margin_btm_10" data-groups='["all",  "mobile"]'>
        <div class="our-team wow fadeInUp" data-wow-delay="0.2s">
          <div class="team_member_pan"> <img src="images/dummy-imgs/800x650.jpg" alt="Gallery image" class="img img-responsive">
            <div class="social_media_team">
              <div class="team-prof top_25">
                <h3 class="post-title bttm_5"><a href="portfolio-2-details.html" class="white_txt_link">Burger King</a></h3>
                <span class="post bttm_10">Mobile App Development</span>
                <ul class="team_social xlg">
                  <li><a href="portfolio-2-details.html"><i class="fas fa-link"></i></a></li>
                  <li>
                    <a href="images/dummy-imgs/800x650.jpg" class="mpopup" title="Burger King"> <i class="fas fa-search"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="team_pan col-lg-4 col-md-4 col-sm-6 col-xs-12 item padding_rt_5 padding_lt_5 margin_btm_10" data-groups='["all", "brand", "graphics"]'>
        <div class="our-team wow fadeInUp" data-wow-delay="0.4s">
          <div class="team_member_pan"> <img src="images/dummy-imgs/800x650.jpg" alt="Gallery image" class="img img-responsive">
            <div class="social_media_team">
              <div class="team-prof top_25">
                <h3 class="post-title bttm_5"><a href="portfolio-3-details.html" class="white_txt_link">Adidas</a></h3>
                <span class="post bttm_10">Branding and Identity</span>
                <ul class="team_social xlg">
                  <li><a href="portfolio-3-details.html"><i class="fas fa-link"></i></a></li>
                  <li>
                    <a href="images/dummy-imgs/800x650.jpg" class="mpopup" title="Adidas"> <i class="fas fa-search"></i></a>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
...