Javascript-форум - Селектор для Fancybox

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Селектор для Fancybox (https://javascript.ru/forum/jquery/80094-selektor-dlya-fancybox.html)

Селектор для Fancybox

На моей странице открывается галерея Fancybox. Во время открытия мне нужно применить css стили к самому изображению, но никак не могу найти сам плагин в dom - пробовал разные селекторы, не получается. Пожалуйста, направьте в нужном направлении!

Вот пример https://codepen.io/fancyapps/pen/wEVOPa

Цитата:

Сообщение от dizelvis

Во время открытия мне нужно применить css стили к самому изображению

.fancybox-slide--complete .fancybox-image
   {
    transform: scale(1) rotate(720deg);
    transition: 2s;
   }
   .fancybox-image{
     transform: scale(.1);
   }

Стиль должен применяться динамически.
Пробовал через

$(document).ready(function(){
	$('.fancybox-image').css('opacity', '0.1');
});

не работает.
не подскажите?
https://codepen.io/dizelvis/pen/GRpmQjV

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

dizelvis,
почему бы стиль не прописать в css?
не работает потому что нет элементов с таким селектором, плагин создаёт их на время показа.
читайте документацию, beforeShow возможно вам поможет

Цитата:

Сообщение от dizelvis

$(document).ready(function(){
$('.fancybox-image').css('opacity', '0.1');
});

заменить на

$.fancybox.defaults.afterShow = function(){
	$('.fancybox-image').css('opacity', '0.1');
};

dizelvis,
почему не добавить
просто

<style type="text/css">
  .fancybox-slide--complete .fancybox-image
   {
     opacity: 1;

   }
   .fancybox-image{
       opacity: .1;transition: 1.2s;
   }

  </style>

dizelvis,
документация
http://fancyapps.com/fancybox/3/docs/#options

рони,
спасибо за подсказку! однако мне не удается получить именно элемент конкретно слайда, изменяя стиль для .fancybox-image я применяю его для всех фото в галерее

Цитата:

Сообщение от рони (Сообщение 523446)

dizelvis,
почему не добавить
просто

<style type="text/css">
  .fancybox-slide--complete .fancybox-image
   {
     opacity: 1;

   }
   .fancybox-image{
       opacity: .1;transition: 1.2s;
   }

  </style>

у меня пользователь на странице может выполнять некоторые действия с фото. Поворот, отображение, кроп. Все это с помощью css тут же отображается.
Нужно чтобы при просмотре в галерее fancybox пользователь видел фото с учетом тех стилей, что он уже применил

На странице https://codepen.io/dizelvis/pen/GRpmQjV я применил к некоторым фото

style="transform: scaleX(1) rotate(90deg)"

как отобразить теперь этот стиль при просмотре в галерее?

dizelvis,
вам что мешает применить сss?

Цитата:

Сообщение от рони (Сообщение 523452)

dizelvis,
вам что мешает применить сss?

используя

$.fancybox.defaults.afterShow = function(){
    $('.fancybox-image').css('opacity', '0.1');
};

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

dizelvis,
не используйте js, напишите стили в css!!!

Цитата:

Сообщение от рони (Сообщение 523461)

dizelvis,
не используйте js, напишите стили в css!!!

Поворот или отображение делает пользователь на странице, я не могу прописать стили сразу, если не знаю конкретно какой стиль будет применен пользователем... Или я что то не так понимаю?

dizelvis,
документацию прочитайте есть beforeShow, есть функция function( instance, slide ) {

может вам нужно

$.fancybox.defaults.beforeShow = function(instance, slide){
    slide.$slide.css('opacity', '0.1');
};

мне сложно понять, с чем у вас проблема

dizelvis,
возможно вы хотели так ...

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css">
    <script>
$(function() {
$.fancybox.defaults.beforeShow = function(instance, slide){
        var index = slide.index;
        var style = $('.imglist img').eq(index).attr('style')
        slide.$slide.attr('style', style);
};
});
    </script>
</head>
<body>
<h2>fancybox v3.5 - Initialize with data attributes</h2>

<p>
    Groups are created by adding the same <code>data-fancybox</code> attribute value
</p>

<hr class="my-5" />

<p class="imglist" style="max-width: 1000px;">
    <a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="images" data-caption="Backpackers following a dirt trail">
        <img src="https://source.unsplash.com/juHayWuaaoQ/240x160" style="transform: scaleX(1) rotate(90deg)" />
    </a>

    <a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="images" data-caption="Mallorca, Llubí, Spain">
        <img src="https://source.unsplash.com/eWFdaPRFjwE/240x160" />
    </a>

    <a href="https://source.unsplash.com/c1JxO-uAZd0/1500x1000" data-fancybox="images" data-caption="Danish summer">
        <img src="https://source.unsplash.com/c1JxO-uAZd0/240x160" style="transform: scaleX(1) rotate(90deg)" />
    </a>

    <a href="https://source.unsplash.com/eXHeq48Z-Q4/1500x1000" data-fancybox="images" data-caption="Sunrise above a sandy beach">
        <img src="https://source.unsplash.com/eXHeq48Z-Q4/240x160" />
    </a>

    <a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="images" data-caption="Woman on a slope by the shore">
        <img src="https://source.unsplash.com/RFgO9B_OR4g/240x160" style="transform: scaleX(1) rotate(90deg)"/>
    </a>

    <a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="images" data-caption="Mountain hiking sunset">
        <img src="https://source.unsplash.com/7bwQXzbF6KE/240x160" />
    </a>

    <a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="images" data-caption="Sunset Picnic">
        <img src="https://source.unsplash.com/NhU0nUR7920/240x160" style="transform: scaleX(1) rotate(90deg)"/>
    </a>

    <a href="https://source.unsplash.com/B2LYYV9-y0s/1500x1000" data-fancybox="images" data-caption="On them Indiana Nights">
        <img src="https://source.unsplash.com/B2LYYV9-y0s/240x160" />
    </a>
</p></body>
</html>

рони,
https://codepen.io/dizelvis/pen/GRpmQjV
вот здесь я сделал функцию, которая случайным образом меняет opacity для картинок.
Как теперь сделать, чтобы в галерее fancybox картинки отображались с учетом opacity?
Простите, но я никак не могу понять.

Цитата:

Сообщение от dizelvis

Как теперь сделать, чтобы в галерее fancybox картинки отображались с учетом opacity?

взять код из поста #16

Цитата:

Сообщение от dizelvis

вот здесь я сделал функцию, которая случайным образом меняет opacity для картинок.

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css">
    <script>
$(function() {
$.fancybox.defaults.beforeShow = function(instance, slide){
        var index = slide.index;
        var style = $('.imglist img').eq(index).attr('style')
        slide.$slide.attr('style', style);
};

$('img.my').each(function (k, v) {
        this.style.opacity = Math.random() > .5 ? 1 : .5
    });
});
    </script>
</head>
<body>
<h2>fancybox</h2>
<a onclick="randStyle();" href="#">Случайный стиль</a>
<p class="imglist" style="max-width: 1000px;">
    <a href="https://source.unsplash.com/juHayWuaaoQ/1500x1000" data-fancybox="images" data-caption="Backpackers following a dirt trail">
        <img src="https://source.unsplash.com/juHayWuaaoQ/240x160" class="my"/>
    </a>

    <a href="https://source.unsplash.com/eWFdaPRFjwE/1500x1000" data-fancybox="images" data-caption="Mallorca, Llubí, Spain">
        <img src="https://source.unsplash.com/eWFdaPRFjwE/240x160" class="my"/>
    </a>

    <a href="https://source.unsplash.com/c1JxO-uAZd0/1500x1000" data-fancybox="images" data-caption="Danish summer">
        <img src="https://source.unsplash.com/c1JxO-uAZd0/240x160" class="my"/>
    </a>

    <a href="https://source.unsplash.com/eXHeq48Z-Q4/1500x1000" data-fancybox="images" data-caption="Sunrise above a sandy beach">
        <img src="https://source.unsplash.com/eXHeq48Z-Q4/240x160" class="my"/>
    </a>

    <a href="https://source.unsplash.com/RFgO9B_OR4g/1500x1000" data-fancybox="images" data-caption="Woman on a slope by the shore">
        <img src="https://source.unsplash.com/RFgO9B_OR4g/240x160" class="my"/>
    </a>

    <a href="https://source.unsplash.com/7bwQXzbF6KE/1500x1000" data-fancybox="images" data-caption="Mountain hiking sunset">
        <img src="https://source.unsplash.com/7bwQXzbF6KE/240x160" class="my"/>
    </a>

    <a href="https://source.unsplash.com/NhU0nUR7920/1500x1000" data-fancybox="images" data-caption="Sunset Picnic">
        <img src="https://source.unsplash.com/NhU0nUR7920/240x160" class="my"/>
    </a>

    <a href="https://source.unsplash.com/B2LYYV9-y0s/1500x1000" data-fancybox="images" data-caption="On them Indiana Nights">
        <img src="https://source.unsplash.com/B2LYYV9-y0s/240x160" class="my"/>
    </a>
</p>
</body>
</html>