БЛОГ НА HUSL


Slick Slider + Lightgallery (При смене разрешения экрана не работает Lightgallery). Почему?

Автор вопроса: EXID

Вобщем пробема в том, что при смене размера экрана, например в мобильной версии, туда обратно - перестаёт работать LightGallery (всплывающие фото), просто открывает фото в новом окне. Почему то не срабатывают ява скрипты.

Ссылка на сам слайдер на сайте

$('.slider1').each(function () {
  $(this).slick({
    dots: true,
    infinite: true,
    rows: 2,
    slidesToShow: 3,
    slidesToScroll: 3,
    responsive: [{
      breakpoint: 992,
      settings: {
        arrows: false,
        dots: true,
        infinite: true,
        rows: 2,
        slidesToShow: 3,
        slidesToScroll: 3
      }
    }, {
      breakpoint: 768,
      settings: {
        arrows: false,
        dots: true,
        infinite: true,
        rows: 1,
        slidesToShow: 2,
        slidesToScroll: 2
      }
    }, {
      breakpoint: 576,
      settings: {
        arrows: false,
        dots: true,
        infinite: true,
        rows: 1,
        slidesToShow: 2,
        slidesToScroll: 2
      }
    }, {
      breakpoint: 480,
      settings: {
        arrows: false,
        dots: true,
        infinite: true,
        rows: 1,
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }]
  });
});
$('.slider1').lightGallery({
  selector: '.lightgallery',
});
$('.slider2').each(function () {
  $(this).slick({
    rows: 1,
    dots: true,
    arrows: true,
    infinite: true,
    speed: 300,
    slidesToShow: 3,
    slidesToScroll: 3,
    responsive: [{
      breakpoint: 992,
      settings: {
        arrows: false,
        dots: true,
        infinite: true,
        rows: 1,
        slidesToShow: 3,
        slidesToScroll: 3
      }
    }, {
      breakpoint: 768,
      settings: {
        arrows: false,
        dots: true,
        infinite: true,
        rows: 1,
        slidesToShow: 3,
        slidesToScroll: 3
      }
    }, {
      breakpoint: 577,
      settings: {
        arrows: false,
        dots: true,
        infinite: true,
        rows: 1,
        slidesToShow: 2,
        slidesToScroll: 2
      }
    }, {
      breakpoint: 376,
      settings: {
        arrows: false,
        dots: true,
        infinite: true,
        rows: 1,
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }]
  });
});
$('.slider2').lightGallery({
  selector: '.lightgallery'
});
.slick-slider{margin:0 -15px!important;}
.slick-slide{text-align:center;margin-right:15px!important;margin-left:15px!important;}
.kategory_izd {margin-bottom:50px;}
.kategory_izd .card {text-align:center;margin:10px 0;-webkit-box-shadow:0px 0px 10px #ccc;-moz-box-shadow:0px 0px 10px #ccc;-o-box-shadow:0px 0px 10px #ccc;box-shadow:0px 0px 10px #ccc;-moz-transition:all 100ms ease-in-out;-o-transition:all 100ms ease-in-out;-webkit-transition:all 100ms ease-in-out;transition:all 100ms ease-in-out;}
.kategory_izd .card:hover {-webkit-box-shadow:0px 0px 10px #C20B01;-moz-box-shadow:0px 0px 10px #C20B01;-o-box-shadow:0px 0px 10px #C20B01;box-shadow:0px 0px 10px #C20B01;-moz-transition:all 100ms ease-in-out;-o-transition:all 100ms ease-in-out;-webkit-transition:all 100ms ease-in-out;transition:all 100ms ease-in-out;}
.kategory_izd .card a:link,
.kategory_izd .card a:visited,
.kategory_izd .card a:hover{color:#212529!important;text-decoration:none!important;text-align:center!important;}
.kategory_izd .card img {max-width:350px;margin-left:auto;margin-right:auto;padding:15px;display:block;}
.kategory_izd .card .card-body {padding:0 15px 0 15px;min-height:60px;}
.kategory_izd .card .card-title {font-size:1rem;text-align:center!important;margin-bottom:0px;}
.kategory_izd .card .card-text {color:gray;font-size:12px;line-height:14px;}
.kategory_izd .card .col.text-right {font-weight:600;min-height:50px;}
.kategory_izd .card .ico {font-weight:normal;}
.kategory_izd .card .ico::before {margin-left:0;margin-right:0;}
.kategory_izd .card s {color:gray;font-weight:normal;}
.kategory_izd .card span {display:none;}
.kategory_izd .btn-secondary {color:#000;background:#BBB;border-color:#BBB;padding:5px 20px;}
.kategory_izd .btn-secondary:hover {color:#fff;background:#888;border-color:#888;}
.kategory_izd .sale_save_holder{position:absolute;top:0px;left:0px;}
.kategory_izd .sale_save_holder span{font-size:12px;}
.kategory_izd .sale_save_holder span.save{background-color:#ce2525;}
.kategory_izd .sale_save_holder span{padding:3px 8px;}
.kategory_izd .sale_save_holder span{display:block;float:left;font-size:12px;font-weight:bold;text-transform:uppercase;margin-right:1px;color:#ffffff;}
.kategory_izd .slick-dots {padding:0 10px;}
.kategory_izd .slick-next:hover,
.kategory_izd .slick-next:focus { background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.0001) 100%); background-image: -o-linear-gradient(left, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.0001) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0,0,0,0.2)), to(rgba(0,0,0,0.0001))); background-image: linear-gradient(to right, rgba(0,0,0,0.2) 0, rgba(0,0,0,0.0001) 100%); background-repeat: repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1)}
.kategory_izd .slick-prev:hover,
.kategory_izd .slick-prev:focus{ background-image: -webkit-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.2) 100%); background-image: -o-linear-gradient(left, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.2) 100%); background-image: -webkit-gradient(linear, left top, right top, color-stop(0, rgba(0,0,0,0.0001)), to(rgba(0,0,0,0.2))); background-image: linear-gradient(to right, rgba(0,0,0,0.0001) 0, rgba(0,0,0,0.2) 100%); background-repeat: repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1)}
.kategory_izd .slick-prev:hover,
.kategory_izd .slick-prev:focus,
.kategory_izd .slick-next:hover,
.kategory_izd .slick-next:focus{opacity:.5;filter:alpha(opacity=50)}
@media screen and (max-width:991px){
.container{max-width:100%;}
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://kenwheeler.github.io/slick/slick/slick.css" rel="stylesheet"/>
<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>
<link href="http://sachinchoolur.github.io/lightGallery/lightgallery/css/lightgallery.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kenwheeler.github.io/slick/slick/slick.min.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lightgallery.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-zoom.js"></script>
<script src="http://sachinchoolur.github.io/lightGallery/lightgallery/js/lg-thumbnail.js"></script>
<div class="container">
  <div class="row">
    <div class="col-12"><h2>SlickSlider и Lightgallery (В две строки)</h2></div>
  </div>
  <div class="slider1 kategory_izd row">
    <article class="card">
      <a href="https://via.placeholder.com/600.png" class="lightgallery">
        <img src="https://via.placeholder.com/600.png" class="card-img-top img-fluid" alt="Галерея 1 Фото 1" />
        <div class="card-body">
          <h5 class="card-title">Галерея 1 Фото 1</h5>
        </div>
      </a>
    </article>
    <article class="card">
      <a href="https://via.placeholder.com/600.png" class="lightgallery">
        <img src="https://via.placeholder.com/600.png" class="card-img-top img-fluid" alt="Галерея 1 Фото 2" />
        <div class="card-body">
          <h5 class="card-title">Галерея 1 Фото 2</h5>
        </div>
      </a>
    </article>
    <article class="card">
      <a href="https://via.placeholder.com/600.png" class="lightgallery">
        <img src="https://via.placeholder.com/600.png" class="card-img-top img-fluid" alt="Галерея 1 Фото 3" />
        <div class="card-body">
          <h5 class="card-title">Галерея 1 Фото 3</h5>
        </div>
      </a>
    </article>
    <article class="card">
      <a href="https://via.placeholder.com/600.png" class="lightgallery">
        <img src="https://via.placeholder.com/600.png" class="card-img-top img-fluid" alt="Галерея 1 Фото 4" />
        <div class="card-body">
          <h5 class="card-title">Галерея 1 Фото 4</h5>
        </div>
      </a>
    </article>
    <article class="card">
      <a href="https://via.placeholder.com/600.png" class="lightgallery">
        <img src="https://via.placeholder.com/600.png" class="card-img-top img-fluid" alt="Галерея 1 Фото 5" />
        <div class="card-body">
          <h5 class="card-title">Галерея 1 Фото 5</h5>
        </div>
      </a>
    </article>
    <article class="card">
      <a href="https://via.placeholder.com/600.png" class="lightgallery">
        <img src="https://via.placeholder.com/600.png" class="card-img-top img-fluid" alt="Галерея 1 Фото 6" />
        <div class="card-body">
          <h5 class="card-title">Галерея 1 Фото 6</h5>
        </div>
      </a>
    </article>
    <article class="card">
      <a href="https://via.placeholder.com/600.png" class="lightgallery">
        <img src="https://via.placeholder.com/600.png" class="card-img-top img-fluid" alt="Галерея 1 Фото 7" />
        <div class="card-body">
          <h5 class="card-title">Галерея 1 Фото 7</h5>
        </div>
      </a>
    </article>
    <article class="card">
      <a href="https://via.placeholder.com/600.png" class="lightgallery">
        <img src="https://via.placeholder.com/600.png" class="card-img-top img-fluid" alt="Галерея 1 Фото 8" />
        <div class="card-body">
          <h5 class="card-title">Галерея 1 Фото 8</h5>
        </div>
      </a>
    </article>
  </div>
  <div class="row">
    <div class="col-12"><h2>SlickSlider и Lightgallery (В одну строку)</h2></div>
  </div>
  <div class="slider2 kategory_izd row">
    <article class="card">
      <a href="https://via.placeholder.com/600.png" class="lightgallery">
        <div class="sale_save_holder"><span class="save"><i class="ico ico-tag"></i> Скидка</span></div>
        <img src="https://via.placeholder.com/600.png" class="card-img-top img-fluid" alt="Галерея 2 Фото 1" />
        <div class="card-body">
          <h5 class="card-title">Галерея 2 Фото 1</h5>
        </div>
      </a>
    </article>
    <article class="card">
      <a href="https://via.placeholder.com/600.png" class="lightgallery">
        <img src="https://via.placeholder.com/600.png" class="card-img-top img-fluid" alt="Галерея 2 Фото 2" />
        <div class="card-body">
          <h5 class="card-title">Галерея 2 Фото 2</h5>
        </div>
      </a>
    </article>
    <article class="card">
      <a href="https://via.placeholder.com/600.png" class="lightgallery">
        <img src="https://via.placeholder.com/600.png" class="card-img-top img-fluid" alt="Галерея 2 Фото 3" />
        <div class="card-body">
          <h5 class="card-title">Галерея 2 Фото 3</h5>
        </div>
      </a>
    </article>
    <article class="card">
      <a href="https://via.placeholder.com/600.png" class="lightgallery">
        <img src="https://via.placeholder.com/600.png" class="card-img-top img-fluid" alt="Галерея 2 Фото 4" />
        <div class="card-body">
          <h5 class="card-title">Галерея 2 Фото 4</h5>
        </div>
      </a>
    </article>
    <article class="card">
      <a href="https://via.placeholder.com/600.png" class="lightgallery">
        <img src="https://via.placeholder.com/600.png" class="card-img-top img-fluid" alt="Галерея 2 Фото 5" />
        <div class="card-body">
          <h5 class="card-title">Галерея 2 Фото 5</h5>
        </div>
      </a>
    </article>
    <article class="card">
      <a href="https://via.placeholder.com/600.png" class="lightgallery">
        <img src="https://via.placeholder.com/600.png" class="card-img-top img-fluid" alt="Галерея 2 Фото 6" />
        <div class="card-body">
          <h5 class="card-title">Галерея 2 Фото 6</h5>
        </div>
      </a>
    </article>
  </div>
</div>


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.