Форум

рони · #11 (**permalink**) 26.04.2020, 23:43

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

dizelvis · #12 (**permalink**) 27.04.2020, 14:29

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

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

используя

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

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

рони · #13 (**permalink**) 27.04.2020, 14:51

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

dizelvis · #14 (**permalink**) 27.04.2020, 15:37

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

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

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

рони · #15 (**permalink**) 27.04.2020, 15:59

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

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

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

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

рони · #16 (**permalink**) 27.04.2020, 16:33

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>

dizelvis · #17 (**permalink**) 27.04.2020, 16:51

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

рони · #18 (**permalink**) 27.04.2020, 17:11

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

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

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

рони · #19 (**permalink**) 27.04.2020, 17: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>

Форум

Справочник

Discord чат

Курсы javascript