How to change the .fancybox-content css in js? #384
-
|
Hi, Recently, I'd like to add Fancybox to my JekyII generated site, and it works with the following code. <head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.css"/>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/fancybox.umd.js"></script>
<script>
$(document).ready(function() {
$("p img").each(function() {
var strA = "<a data-fancybox='gallery' href='" + this.src + "'></a>";
$(this).wrapAll(strA);
});
Fancybox.bind('[data-fancybox="gallery"]', {
});
});
</script>
</body>The picture looks well in web page. However it looks weird when clicking the picture, due to its transparent background. Previously, I came across this same issue when using Hexo + Next theme, and solved it by modifying the ".fancybox-content". .fancybox-content {
background: #fff !important;
}So how can I achieve the same purpose with javascript? I looked at the offcial documents, and didn't find a solution. Thanks in advance! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
|
Hi, The answer is very simple - use callbacks, you can access container element ( |
Beta Was this translation helpful? Give feedback.
-
|
Hi, Thanks for your suggestions. I'll check the demos again. Previously, I didn't know which attributes or functions are available in callbacks. I'm not familiar with front-end development. Thanks! |
Beta Was this translation helpful? Give feedback.
-
|
According to your suggestions, I solved it successfully. Thanks! |
Beta Was this translation helpful? Give feedback.
Hi,
The answer is very simple - use callbacks, you can access container element (
slide.$el) and wrapping element (slide.$content) from almost any callback. There are many demos on the home page about using callbacks, did you find it difficult to use them or something was not clear in the docs?