Bilderalbum von Zeta

    • Offizieller Beitrag

    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:

    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


    • Offizieller Beitrag

    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.


  • Hallo Mario,

    ich habe die "Pfeile" als SVG Datei importiert.


    Meine Bild ID´s:

    oid://image/right

    oid://image/close

    oid://image/left


    Nun habe ich gar keine Pfeile mehr :saint: mit dem angepassten CSS, habe ich da etwas falsch umgesetzt?


    Das CSS angepasst:


    <style>


    #fancybox-left-ico {


    background-image: url(oid://image/left);


    background-position: 0 0;


    }


    #fancybox-right-ico {


    background-image: url(oid://image/right);


    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/close);


    }




    @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>

  • Svg als Datei ging nicht als Anhang, habe es dir zugemailt. Dankeschön

    Layout: Campfire Responsive

    Grüße Ela



    Ich verwende Zeta Producer 16.7

    2 Mal editiert, zuletzt von Ela ()

  • ich glaube ich muss die SVG Datei viel kleiner machen, nun sehe ich sie zumindest zum Teil/abgeschnitten bei den Bildern. Mario, welche Dateigröße hast du genommen?

    • Offizieller Beitrag
    • 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.
    • Offizieller Beitrag

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


    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.

  • Hallo Mario, ich habe es nun hinbekommen, ich habe nun eine Kombi bei den Pfeilen mit grün und weiß.


    Ganz herzlichen Dank für deine Geduld.

    LG Ela