Форум программистов, компьютерный форум, киберфорум
jQuery
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
0 / 0 / 0
Регистрация: 27.02.2019
Сообщений: 1

Как в Fancybox 3 сбросить значение index в $.fancybox.open?

04.12.2019, 18:48. Показов 1234. Ответов 0

Студворк — интернет-сервис помощи студентам
Всем привет!

Подключил слайдер Slick с изображениями. Fancybox открывает изображения при нажатии на кнопку, а не на само изображение.

У каждой ссылки с изображением прописан data-order с нумерацией от 1 до 5.

При перелистывании слайдера, кнопке передаётся значение data-order от текущего открытого изображения слайдера и задаётся индексом в $fancybox.open. Благодаря этому, при нажатии на кнопку, в fancybox открывается изображение с указанным index, которое необходимо открыть.

Всё отлично срабатывает, открывается нужное изображение, но при закрытии fancybox, листаю в слайдере до другого изображения, нажимаю на кнопку и мне открывается изображение из предыдущего индекса.

В fancybox есть настройка срабатывания события после закрытия слайдера – afterClose, но нигде не могу найти информацию, как сбросить или обновить значение index.

Буду благодарен за любые идеи!

Весь код со слайдером загрузил на Jsfiddle
Ниже часть кода вызывающая fancybox.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
// сортировка массива объектов по свойству
    let sortObjectsBy = function(field, reverse, primer) {
      let key = primer ? function(x) {
        return primer(x[field])
      } : function(x) {
        return x[field]
      };
      reverse = !reverse ? 1 : -1;
      return function(a, b) {
        return a = key(a),
          b = key(b),
          reverse * ((a > b) - (b > a));
      }
    }
 
 
    jQuery('#wcOpenFullPhoto').on('click', function(e) {
      var fancyElements = [];
 
      e.preventDefault();
 
      // создание массива объектов fancybox
      jQuery('.product-gallery__item a').each(function(index) {
        var el = jQuery(this).get(0),
          order = jQuery(this).data("order");
 
        fancyElements.push({
          src: el.href,
          caption: el.title,
          order: order
        });
      });
 
      // сортировка массива объектов fancybox по свойству "order"
      fancyElements.sort(sortObjectsBy("order", false, function(a) {
        return a;
      }));
 
      // запуск fancybox программно
      jQuery.fancybox.open(
        fancyElements, {
          // пользовательские опции
          loop: false,
          afterClose: function() {
 
          }
        },
        jQuery("#wcOpenFullPhoto").data("order") - 1 // запустить галерею из выбранного индекса
 
      );
    });
Добавлено через 3 часа 46 минут
Получил ответ на другом форуме. Настройка afterClose не понадобилась, я не в ту сторону копал.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
var fancyElements = jQuery.map(jQuery('.product-gallery__item a'), function(el) {
      return{
      src: el.href,
      caption: el.title
     }
    });
 
jQuery(".product-gallery__wrapper").slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: false,
  centerMode: false,
  focusOnSelect: true,
  asNavFor: '.gallery-thambnails'
});
 
// Highlight thumbnail if large image is the same
jQuery(".gallery-thambnails").on("afterChange", function(event, slick, currentSlide, nextSlide) {
  // remove all active class
  jQuery(".gallery-thambnails .slick-slide").removeClass("slick-current");
  // set active class for current slide
  jQuery(".gallery-thambnails .slick-slide:not(.slick-cloned)").eq(currentSlide).addClass("slick-current");
  jQuery("#wcOpenFullPhoto").data("order", currentSlide);
});
 
jQuery(".gallery-thambnails").slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  infinite: false,
  dots: false,
  centerMode: false,
  focusOnSelect: true,
  asNavFor: '.product-gallery__wrapper'
});
 
jQuery('#wcOpenFullPhoto').on('click', function(e) {
  e.preventDefault();
  jQuery.fancybox.open(
    fancyElements, {
      // Custom options
      loop: false,
    },
    jQuery("#wcOpenFullPhoto").data("order")  // Start gallery from selected index
  );
});
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
04.12.2019, 18:48
Ответы с готовыми решениями:

Как отключить fancybox?
Здравствуйте! подскажите, как "отключить" fancybox? предположим, у меня есть $('a').fancybox();а потом, где-то дальше, хочу (при...

Как задать размеры fancybox?
Вывожу сообщение при нажатии на кнопку с помощью fancybox: $.fancybox("Hello, world!"); Как задать размер окна?

Как связать Quicksand с Fancybox
Здравствуйте. Решил использовать Quicksand. http://razorjack.net/quicksand/ Начал делать фотогалерею, но столкнулся с проблемой. ...

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
04.12.2019, 18:48
Помогаю со студенческими работами здесь

Fancybox или как реализовать
Возникла задача в fancybox версии 1.3.4 вывести изображение оригинального размера. Сразу отмечу, что изображения большие по высоте...

как в galleriffic внедрить fancybox
Здравствуйте. На сайте используется галерея galleriffic. Все как обычно: маленькие иконки и большая картинка. Выбираешь определенную...

Как открыть модальное окно Fancybox
Всем доброго времени суток. Прошу помочь советом или ссылкой. Проблема такая: Раньше на сайте использовал плагин Fancybox версии 2 и...

Как сделать группы картинок в fancybox
Добрый день, уважаемые форумчане! Возник вот такой вопрос: как сделать галлерею фоток, разбитую по альбомам, с возможностью...

fancybox - как выводить номер изображения в галлерее
Доброго времени суток. Может кто работал с fancybox и знает, как выводить номер просматриваемого изображения, например: "Изображение...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru