Галерея изображений с нумерацией страниц Jquery - PullRequest
Новая
       5

Галерея изображений с нумерацией страниц Jquery

0 голосов
/ 06 апреля 2020

Хотите отобразить 4 изображения в строке и 3 строки на странице. Таким образом, всего 12 изображений на странице. В галерее изображений, если у меня более 12 изображений, необходимо реализовать разбиение на страницы.

С трудом пытались получить ссылки, источники или плагины для достижения этой цели. Я понятия не имею, как это сделать. Я новичок в jquery. kinldy, помоги мне в этом.

1 Ответ

0 голосов
/ 06 апреля 2020

Окей, не могли бы вы рассмотреть этот солютон:

Моя скрипка здесь: https://jsfiddle.net/u4y1t6ga/1/

Я настроил его на 2x2, но вы можете изменить его как Вы будете sh.

Если вы хотите sh, чтобы обновить его до 12 - 3 строки по 4 в JS обновить nb = 12 в CSS обновить n-го ребенка, чтобы он был 4n + 1

HTML: 

<div class="img-list">
    <img src="" alt="1" />
    <img src="" alt="2" />
    <img src="" alt="3" />
    <img src="" alt="4" />
    <img src="" alt="5" />
    <img src="" alt="6" />
    <img src="" alt="7" />
    <img src="" alt="8" />
    <img src="" alt="9" />
    <img src="" alt="10" />
    <img src="" alt="11" />
    <img src="" alt="12" />
</div>
<a href="#" class="prev">Page 1</a>
<a href="#" class="next">Page 2</a>

CSS: 

.img-list, .pagination
{
  float: left;
  clear:both;
  display: block;
}

.img-list img {
 float: left;
}

.img-list img:nth-child(4n-1) {
 clear:both;
}

JS (+ jQuery) 

var start = 0;
var nb = 4;
var end = start + nb;
var length = $('.img-list img').length;
var list = $('.img-list img');

list.hide().filter(':lt('+(end)+')').show();


$('.prev, .next').click(function(e){
  e.preventDefault();

  if (($(this).hasClass('prev') && start > 0) || ($(this).hasClass('next') && end < length))
  {

    if( $(this).hasClass('prev') ){
      start -= nb;
    } else {
      start += nb;
    }

    end = start + nb;

    if((start/nb) < 1)
    {
      $('a.prev').html('Page 1');
    }
    else
    {
      $('a.prev').html('Page '+(start/nb));
    }


    if(end+nb > length) {
      $('a.next').html('Page '+((end/nb)));
    } else {
      $('a.next').html('Page '+((end/nb)+1));
    }
  }

  if( start == 0 ) list.hide().filter(':lt('+(end)+')').show();
  else list.hide().filter(':lt('+(end)+'):gt('+(start-1)+')').show();
});

Если вам нужно более сложное решение, я бы посоветовал вам использовать уже созданный плагин. Примерно так: https://pagination.js.org/ и просто обновите css, чтобы показать элементы ожидаемым образом. (т.е. элементы pu sh в 3 рядах по 4 изображения в каждом ряду).

...