Bilderalbum von Zeta

Ja das stimmt, die Fancybox von ZP ist schon ziemlich altbacken, lässt sich aber recht einfach anpassen.

• Unten findest du die originale PNG-Grafik welche hier verwendet wird.
• Passe diese nach deinen Bedürfnissen an.
• Importiere diese in ZP (Erweitert > Bilder).
• Vorsichtshalber Bild schützen (Eigenschaften > Weiteres ...).

Einsellungen > CSS:

<style>
#fancybox-close, #fancybox-left-ico, #fancybox-right-ico {
background-image: url(oid://image/icons);
}
</style>

• Kopiere in der Bildverwaltung die Objekt-ID deiner Grafik und tausche diese im CSS mit oid://image/icons aus.

Ein Beispiel-Bild im Anhang, und hier der Test damit. LINK

Hier ein weiteres Beispiel. LINK

Hier habe ich 3 einzelne SVG-Grafiken genutzt.

Diese dann wie oben beschrieben über Ojekt-ID eingefügt.

Somit lassen sich auch größere Grafiken einbinden und anders positionieren. Im Beispiel 60px und in Mobile 40px.

Nutze am besten SVGs ohne Größenangaben, diese werden ja im CSS vergeben.

<style>
#fancybox-left-ico {
background-image: url(oid://image/arrow-leftx);
background-position: 0 0;
}
#fancybox-right-ico {
background-image: url(oid://image/arrow-rightx);
background-position: 0 0;
}
#fancybox-left-ico, #fancybox-right-ico {
width: 60px;
height: 60px;
margin-top: -30px;
}
#fancybox-close {
top: 10px;
right: 10px;
width: 60px;
height: 60px;
background: none;
background-image: url(oid://image/closexxx);
}


@media (max-width: 780px) {
#fancybox-left-ico, #fancybox-right-ico {
width: 40px;
height: 40px;
margin-top: -20px;
}
#fancybox-close {
top: -20px;
right: -20px;
width: 40px;
height: 40px;
}}
</style>

Häng die verwendeten Grafiken Mal hier an und gib Bescheid welches Layout verwendet wird. Dann kann ich das Mal testen.

• Deine SVGs sind denkbar schlecht dafür geeignet weil sie ja bis auf den schwarzen Rahmen transparent sind.
• Ich habe mal ein Beispiel mit den SVGs in "Campfire" hochgeladen mit extra hellen Bildern damit man das sehen kann. LINK (noch am hochladen)
• Die Größenangaben in den SVGs habe vor dem Import entfernt weil man diese sonst nicht mit CSS skalieren kann.

Wie schon in Beitrag #3 geschrieben solltest du die Größenangaben in den SVGs entfernen weil man diese sonst nicht mit CSS skalieren kann.

Ich hänge diese mal hier mit entfernten Größenangaben an. Aber wie gesagt, diese sind so ein´gentlich ungeeignet.

fancy.zip

Am besten ist es immer wenn die Grafiken helle und dunkle Farben haben, somit sind diese auf hellen und dunklen Bildern zu erkennen.

Zitat von Ela

ja es ist als schwierig mit den Farben, ich habe nun nochmals 3 Dateien in grau. Wie entferne ich die Größenangeben bei den SVGs?

Mit einem Text-Editor öffnen und die Angaben height="512" und width="512" komplett entfernen, also nicht nur die Zahl, der Wert (512) ist nur ein Beispiel.

Schick mal einen Link wenn online.