Блоки с фото до и после, плюс подгрузка блоков по кнопке, есть 2 проблемы, как решить?

Question

[Антон Вебсайтовский]

Всем привет.
Сделал блоки для выведение фотографий, наши работы, в каждом блоке по 2 фото, до и после, блоки резиновые, к ним подключил скрипт для фото до и после twentytwenty, далее подключил скрипт, который показывает 6 блоков, а при клике подгружает еще 6 блоков, если все блоки загружены и больше нет, то скрипт скрывает кнопку (показать еще).

Проблема первая:
Почему-то появился отступ между блоками и кнопкой из-за скрипта, показать еще фото.
Пока не понял как его убрать, думал дело в css, но нет.


Проблема вторая:
Все это работает отлично, фото подгружаются при клике на кнопку (подгрузить еще), в примере на jsfiddle, все ок работает, а вот на сайте у меня идет конфликт со скриптом меню, вылезают в консоле ошибки, как исправить, подскажите. Я уже на кнопку (показать еще) вешал id, но все равно ошибки, думал может в этом дело.

Рабочий пример тут:
https://jsfiddle.net/vlit/ag14ju8s/11/

По поводу ошибки на сайте, конфликт с меню скрипта, по какой причине пока не понял.
Дело не в менюшке, так как менюшка сама работает без ошибок в консоле, я так понимаю скрипт коряво мне написали.


Дополняю, по запросу с консоля те самые ошибки, но как я выше писал, что меню ошибок не делает, если я не нажму кнопку (добавить еще фото).

Comments

[ThunderCat]

я так понимаю скрипт коряво мне написали.

Так в чем проблема, обратитесь к писателям...
PS: вообще искать надо начиная с 994 строки на соответствующей странице и смотреть что там вызывается.

[Антон Вебсайтовский]

ThunderCat, он сделал и покрылся, я у него спрашивал, он мне, мол это проблема в меню, а я ему говорю причем тут меню, если меню само по себе ошибок ни каких не выдает, если я его использую.
Это вот такие сидят на freelance.habr )))

[ThunderCat]

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

[Антон Вебсайтовский]

ThunderCat, да там дело в скрипте, не в плагинах, показать еще фото, в этом. Он и отступ, он и отступ делает, как-то странно блоки скрывает, ну и как-то конфликтует с менюшкой.

Вот тот самый скрипт

//подгрузить еще по кнопке, если все элемнты подгружены, скрывает кнопку
$(document).ready(function() {
  var list = $(".prfot .twentytwenty-container");
  var numToShow = 6; //сколько показывать элементов
  var button = $("button");
  var numInList = list.length;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    list.slice(showing - 1, showing + numToShow).fadeIn();
    var nowShowing = list.filter(':visible').length;
    if (nowShowing >= numInList) {
      button.hide();
    }
    initTwenty();
  });
});



  $(window).on('load', function() {
   	initTwenty();
  });
  
  // Фото, до и после
  function initTwenty()
  {
     $(".twentytwenty-container").twentytwenty({
      no_overlay: false, // Не показывать наложение было, стало, true скрыть
      move_slider_on_hover: false, // Перемещать ползунок при наведении курсора мыши
      move_with_handle_only: true, // Разрешить пользователю проводить пальцем в любом месте изображения для управления движением ползунка.
      before_label: 'До',
      after_label: 'После'
    });
  }

[ThunderCat]

Антон Вебсайтовский, ну и где тут 994 строка?

[Антон Вебсайтовский]

ThunderCat,
Вот скрин.

[ThunderCat]

Антон Вебсайтовский, гадание короче, на глаз - все ок, кроме что посмотреть в консоли что получается по слайсу, возможно фэйдИн где-то в жс меню переопределена и вызывается, или еще какая-то причина. Короче отладка нужна.

[Антон Вебсайтовский]

ThunderCat, ну это и так понятно, что где-то что-то совпадает ! вот и вопрос как скрипт этот что выше скинул поправить или привязать к id, чтоб скрипт не мешал другим скриптам как меню.

[Антон Вебсайтовский]

Между прочим я понял насчет отступов в чем проблема, скрипт же скрывает блоки, а показывает 6, и если нажать показать еще, он еще 6 показывает, так вот, то что он скрывает блоки, маргин как бы остается на блоках, как можно заменить в скрипте скрытие на hide, show. ну или как-то дисплай ноне задействовать, ибо щас он скрывает как-то не так.

Я про этот скрипт:

$(document).ready(function() {
  var list = $(".prfot .twentytwenty-container");
  var numToShow = 6; //сколько показывать элементов
  var button = $("button");
  var numInList = list.length;
  list.hide();
  if (numInList > numToShow) {
    button.show();
  }
  list.slice(0, numToShow).show();
  button.click(function() {
    var showing = list.filter(':visible').length;
    list.slice(showing - 1, showing + numToShow).fadeIn();
    var nowShowing = list.filter(':visible').length;
    if (nowShowing >= numInList) {
      button.hide();
    }
    initTwenty();
  });
});

[Антон Вебсайтовский]

Ну что горе помощники ), отступы я убрал, осталось исправить конфликт с меню.

Доработанный пример где нет лишних отступов
https://jsfiddle.net/vlit/ag14ju8s/34/

[Антон Вебсайтовский]

Исправил ошибку в консоле, конфликт с меню, это все из-за версии jquery 3.2.1.

Рабочая схема с менюшкой, все пашет
https://jsfiddle.net/vlit/ag14ju8s/42/