ZitatDer Hintergrund für die Pfeile soll rund werden und die Pfeile selbst würde ich auch gern durch andere ersetzen.
Daran haben die Entwickler der Fancybox schon gedacht: Für alle Buttons gibt es Templates, die man durch Konfiguration ändern kann.
Suche in der Doku nach btnTpl:
https://fancyapps.com/fancybox/3/docs/#options
Ich habe das mal beispielhaft für den Nextbutton durchgezogen:
Code
<script>
// Durch Klick auf das Startbild öffnen wir die Fancybox:
$('#startimg').on('click', () => {
$.fancybox.open(
// Die Liste der Bilder, die in der Galerie
// angezeigt werden sollen
[
// gekuerzt
], {
loop: true,
// Als Template fuer den Nexbutton sehen wir ein Div mit einem Pfeil darin vor.
// Damit Fancybox diesen erkennt, müssen wir das entspr. data-Attribut
// und die Klassen zuweisen.
btnTpl: {
arrowRight:
'<div data-fancybox-prev class="fancybox-button fancybox-button--arrow_right">></div>'
}
});
});
</script>Und dann können wir den Button mit CSS selbst gestalten:
Code
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<style>
div.fancybox-button.fancybox-button--arrow_right {
padding: 0;
background-clip: initial;
width: 50px;
height: 50px;
border-radius: 25px;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
</style>Funktioniert dann in meiner Testseite.