Nano Hash - криптовалюты, майнинг, программирование

Flexslider с всплывающей галереей

Я использую flexslider для вращения некоторых изображений, теперь есть требование реализовать всплывающую галерею с этим слайд-шоу, т. Е. Когда пользователь нажимает на активный слайд внутри слайдера, он хочет показать в световом окне как галерею.

Итак, я попытался включить «magnificPopup», он работает, но проблема в том, что он захватывает все экземпляры слайдов, то есть, если у меня есть 2 изображения в слайдере, я получу 4 во всплывающей галерее, т. е. magnificpopup извлекает все экземпляры включая «клоны», так как я могу реализовать эту проблему, есть ли другой способ, или функции плагина или обратного вызова, которые я могу использовать ?? Ниже приведен код, который я пробовал, все они являются базовыми.

Flex Sldier:

$('.slideTwo').flexslider({
    animation: "slide",
    controlNav: true,
    directionNav: false,
    animationLoop: true,
    slideshow: false
});

Великолепное всплывающее окно:

$('.popup-link').magnificPopup({
    type: 'image',
    gallery:{enabled:true}
});

HTML:

<div class="slideTwo" id="slideTwo">
    <ul class="slides">
        <li>
            <a class="popup-link" href="img/room1.jpg"><img src="img/room1.jpg" alt="">
                <span>East Wall</span>
            </a>
        </li>
        <li>
            <a class="popup-link"href="img/room21.jpg"><img src="img/room21.jpg" alt="">
                <span>West Wall</span>
            </a>
        </li>
    </ul>
</div>

Ответы:


1

поставить magnificPopup перед flexSlider

$('.popup-link').magnificPopup({
      type: 'image',
      gallery:{enabled:true}
});

$('.slideTwo').flexslider({
   animation: "slide",
   controlNav: true,
   directionNav: false,
   animationLoop: true,
   slideshow: false
});

и это DEMO

11.06.2015
Новые материалы

Кластеризация: более глубокий взгляд
Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..

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

Частный метод Python: улучшение инкапсуляции и безопасности
Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..

Как я автоматизирую тестирование с помощью Jest
Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..

Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..

Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..

Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..