dizelvis,
вам что мешает применить сss? |
Цитата:
$.fancybox.defaults.afterShow = function(){ $('.fancybox-image').css('opacity', '0.1'); }; во-первых, стили применяются к фото после первоначального просмотра (т.е. первый раз галерея открывается без них, Затем если закрыть и открыть повторно - то уже стили работают) во-вторых, применяется стиль для всей галереи, а мне нужно раздельно на каждую фото |
dizelvis,
не используйте js, напишите стили в css!!! |
Цитата:
|
dizelvis,
документацию прочитайте есть beforeShow, есть функция function( instance, slide ) { может вам нужно $.fancybox.defaults.beforeShow = function(instance, slide){ slide.$slide.css('opacity', '0.1'); }; мне сложно понять, с чем у вас проблема |
fancybox v3.5
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? Простите, но я никак не могу понять. |
Цитата:
|
Цитата:
<!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> |
Часовой пояс GMT +3, время: 06:32. |