В отзывчивой галерее при нажатии кнопки «Загрузить еще» дополнительное изображение не загружается - PullRequest
Новая
       1

В отзывчивой галерее при нажатии кнопки «Загрузить еще» дополнительное изображение не загружается

0 голосов
/ 27 марта 2019

Я использую повторно открытый шаблон с сайта colorlib. На индексной странице есть галерея с 9 сетками изображений. внизу у меня есть загрузить больше изображения. когда я нажал «загрузить больше», нужно отобразить еще 9 изображений, но их показывается только 12, а не 18.

Отображение первых 9 изображений при загрузке страницы после нажатия кнопки «Загрузить больше изображений». Отображение только 12 изображений, а не 18 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="grid" id="portfolio">
  <div class="grid-sizer"></div>
  <div class="grid-item element-item p_one_third post blogBox moreBox">
    <a href="demo-images/reopen_home_image01.jpg" data-rel="prettyPhoto[gallery1]">
      <img src="demo-images/reopen_home_image01.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">SMARTPHONE</p>
        <p class="portfolio-type">GALLERY</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_one_third image blogBox moreBox">
    <a href="https://vimeo.com/157276599" data-rel="prettyPhoto[gallery1]">
      <img src="demo-images/reopen_home_image02.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">BOOK</p>
        <p class="portfolio-type">VIDEO</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_one_third post blogBox moreBox">
    <a href="https://www.youtube.com/watch?v=xEW_YXgRSIE" data-rel="prettyPhoto[gallery1]">
      <img src="demo-images/reopen_home_image03.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">DOODLE</p>
        <p class="portfolio-type">VIDEO</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_two_third image blogBox moreBox">
    <a href="demo-images/reopen_home_image05.jpg" data-rel="prettyPhoto[gallery1]">
      <img src="demo-images/reopen_home_image05.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">FOSTER</p>
        <p class="portfolio-type">GALLERY</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_one_third blogBox moreBox">
    <a href="single-portfolio.html">
      <img src="demo-images/reopen_home_image04.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">STARLIGHT</p>
        <p class="portfolio-type">ARTICLE</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_one_third blogBox moreBox">
    <a href="https://vimeo.com/168939109" data-rel="prettyPhoto[gallery1]">
      <img src="demo-images/reopen_home_image06.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">OPEN BOOK</p>
        <p class="portfolio-type">VIDEO</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_one_third blogBox moreBox">
    <a href="https://vimeo.com/166419987" data-rel="prettyPhoto[gallery1]">
      <img src="demo-images/reopen_home_image07.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">BURGER</p>
        <p class="portfolio-type">VIDEO</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_one_third blogBox moreBox">
    <a href="single.html">
      <img src="demo-images/reopen_home_image08.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">PRINTSCREEN</p>
        <p class="portfolio-type">ARTICLE</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_one_third blogBox moreBox">
    <a href="single.html">
      <img src="demo-images/reopen_home_image09.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">BOTTLE</p>
        <p class="portfolio-type">ARTICLE</p>
      </div>
    </a>
    <div class="clear"></div>
  </div>


  <!-- loadmore -->
  <div class="grid-item element-item p_one_third post blogBox moreBox" style="display: none;">
    <a href="single-portfolio.html">
      <img src="demo-images/11.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">SMARTPHONE</p>
        <p class="portfolio-type">GALLERY</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_one_third image blogBox moreBox" style="display: none;">
    <a href="single-portfolio.html">
      <img src="demo-images/12.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">BOOK</p>
        <p class="portfolio-type">VIDEO</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_one_third post blogBox moreBox" style="display: none;">
    <a href="single-portfolio.html">
      <img src="demo-images/13.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">DOODLE</p>
        <p class="portfolio-type">VIDEO</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_two_third image blogBox moreBox" style="display: none;">
    <a href="single.html">
      <img src="demo-images/14.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">FOSTER</p>
        <p class="portfolio-type">GALLERY</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_one_third blogBox moreBox" style="display: none;">
    <a href="single-portfolio.html">
      <img src="demo-images/15.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">STARLIGHT</p>
        <p class="portfolio-type">ARTICLE</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_one_third blogBox moreBox" style="display: none;">
    <a href="single.html">
      <img src="demo-images/16.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">OPEN BOOK</p>
        <p class="portfolio-type">VIDEO</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_one_third blogBox moreBox" style="display: none;">
    <a href="single.html">
      <img src="demo-images/17.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">BURGER</p>
        <p class="portfolio-type">VIDEO</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_one_third blogBox moreBox" style="display: none;">
    <a href="single.html">
      <img src="demo-images/18.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">PRINTSCREEN</p>
        <p class="portfolio-type">ARTICLE</p>
      </div>
    </a>
  </div>

  <div class="grid-item element-item p_one_third blogBox moreBox" style="display: none;">
    <a href="single.html">
      <img src="demo-images/19.jpg" alt="" />
      <div class="portfolio-text-holder">
        <p class="portfolio-text">BOTTLE</p>
        <p class="portfolio-type">ARTICLE</p>
      </div>
    </a>
  </div>


  <!-- loadmore end -->


</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...