@baris said:
You should change your selectors so it doesn’t look at the entire document. You probably only want to apply fancybox to stuff inside the #content element which is what changes when the user navigates around the page. So use $('#content a').... for your selectors then the forum logo in the header won’t be selected.
I modified the JS Fancybox code now and this code and it seem better
// ---------------------------------------------
// Fancybox Media Reader (Without Website Logo)
// ---------------------------------------------
if (top.location.pathname !== '/login') {
$(window).on('action:posts.loaded', function(data) {
console.log("Polling DOM for lazyLoaded images to apply Fancybox");
$(document).ready(function() {
$('#content a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
$('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate");
});
});
});
}
if (top.location.pathname !== '/login') {
$(document).ready(function() {
$(window).on('action:ajaxify.end', function(data) {
$('#content a').not('.logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
$('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate");
data.preventDefault()
// Strip out the images contained inside blockquotes as this looks nasty :)
$('#content blockquote img').remove();
});
Fancybox.bind(
'#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]',
{
groupAll: true,
}
);
});
});
}
// Chat fancybox - fires when chat module loaded and AJAX calls new chat
$(document).ready(function() {
$(window).on('action:chat.loaded', function(data) {
// >>> Se limiter au contenu principal uniquement <<<
$('#content img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
var newHref = $(this).attr("src");
$(this).wrap("<a class='fancybox' href='" + newHref + "'/>");
$('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate");
data.preventDefault();
// Strip out the images contained inside blockquotes as this looks nasty :)
$('#content blockquote img').remove();
});
Fancybox.bind(
'#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]',
{
groupAll: true,
}
);
});
});
For the logo, I must use overflow: visible !important; on [component="brand/logo"]
/* --- Logo --- */
[component="brand/logo"] {
max-height: 50px;
width: auto;
height: auto;
max-width: 100%;
display: block;
object-fit: contain;
object-position: left center;
overflow: visible !important;
}
Better result !!
