Как отображать в оверлее под картинками текст, который берется с дата атрибутов?

Question

[olya_097]

Картинки меняються успешно при листании
https://codepen.io/Olya097/pen/qBWGGJr

нужно как на скриншоте
Чтобы при листании менялся текст
а брался он из дата атрибутов

Answer 1

[Дмитрий]

$(".gallery__item div").on({
    mouseenter: function () {
        $(this).text($(this).data('text'));
    },
    mouseleave: function () {
        $(this).text("");
    }
});

Ну и сам текст стилизовать - добавить z-index для отображения сверху оверлея, позиционирование и так далее.
Текст лучше заключить во внутренний селектор и работать с ним.

Comments

[olya_097]

Дмитрий, так мне нужно чтобы текст из дата атрибутов выводилось только в оверлее
типа того

[Дмитрий]

olya_097, а, пардон. Думал, речь о том, чтобы наложить на саму карточку при наведении.

[Дмитрий]

olya_097, так а в чём проблема при помощи $('.selector').data('text') вытащить нужный текст и вставить в нужное место, хоть через text(), хоть подставив при помощи append()?

[olya_097]

Дмитрий, при листании в оверлее текст также должен меняться

[Дмитрий]

olya_097, у вас в вашем примере вообще дублируется текст в data-атрибуте - он присутствует и в изображениях-карточках, и в элементах слайдера. Имеет смысл оставить их где-то в одном месте и использовать в нужное время.
Чтобы текст в слайдере менялся, его стоит засунуть в сам слайд, а не прикручивать к оверлею. Так, чтобы нужный текст был связан с нужным слайдом. Для этого в элементе (например) inner__image можно создать еще один слой для текста, например, .inner_text, и подставлять его как-то так:

$('.gallery__image').on('click', function() {
        var item = $(this).data('index');
        var text_val = $(this).data('text');
        /* Ваш код */
        $('.slide-item[data-index="' + item + '"]').find('.inner_text').text(text_val);
});

[olya_097]

Дмитрий, все равно не хочет отработать как нужно

[olya_097]

Дмитрий, вот
некорректно работает только в первом итеме отображается https://codepen.io/Olya097/pen/YzKbmgq

[Дмитрий]

olya_097, я адаптировал код под ваши нужды и всё работает:

$(document).ready(function(){
   $('.gallery__image').each(function() {
        var item = $(this).data('index');
        var text_val = $(this).data('text');

        $('.slide-item[data-index="' + item + '"]').find('h3').text(text_val);
   });
 });

Скрипт автоматически проставляет соответствующим слайдам текст из data-атрибутов картинок, по которым был клик. Сравнение идёт по data-index. Попробуйте на вашем примере, только добавьте h3 везде в слайдере после div.inner__image.

<div class="slide-item" data-index="7" data-text="">
				<div class="inner__image">
					<img src="img/gallery-2.jpg" alt="">
				</div>
        <h3></h3>
			</div>

[olya_097]

Дмитрий, спасибо что помогаете
но все -равно не то
очень близко но не то
у меня теперь попап открыт всегда

https://codepen.io/Olya097/pen/qBWGGJr

а мне нужно только по клику

а если меняю скрипт - то поведение не то
вообще не то((

[Дмитрий]

Вы зачем-то переместили вот эту строчку:
$('.overlay-img').addClass('overlay-active');
Из вашего блока, обрабатывающего клик, в мой блок, где я присваивал текстовое значение. Оттуда и проблемы.
Вот полностью весь код JS, вставьте его и убедитесь в том, что все работает.

$(".overlay-slider").owlCarousel({
  dots: false,
  nav: true,
  navText: ["", ""],
  smartSpeed: 500,
  autoHeight: false,
  loop: true,
  autoplay: false,
  items: 1
});
$(".gallery__image").each(function() {
  var item = $(this).data("index");
  var text_val = $(this).data("text");

  $('.slide-item[data-index="' + item + '"]')
    .find("h3")
    .text(text_val);
});

$(".gallery__image").on("click", function() {
  var item = $(this).data("index");

  $(".overlay-slider").trigger("to.owl.carousel", [item, 500]);
  $(".overlay-img").addClass("overlay-active");
});

$(".overlay-close").click(function() {
  $(".overlay").removeClass("overlay-active");
  $owlG.trigger("destroy.owl.carousel");
});

[olya_097]

Дмитрий, супер
Спасибо огромное!!

[Дмитрий]

olya_097, на здоровье) Удачи в постижении разработки.

[olya_097]

Дмитрий, спасибо
взаимно)