Get your ticket! JETZT Ticket sichern! Contao Camp am 03. & 04. November 2018 & Contao College am 02. November 2018 im Basislager Leipzig, Deutschland
Ergebnis 1 bis 9 von 9

Thema: Colorbox #cboxClose #cboxPrevious #cboxNext

  1. #1
    Contao-Fan Avatar von mapfei
    Registriert seit
    11.05.2010.
    Ort
    Hennef
    Beiträge
    448
    Partner-ID
    10223
    User beschenken
    Wunschliste

    Frage Colorbox #cboxClose #cboxPrevious #cboxNext

    Hi zusammen.

    Ich versuche#cboxClose (oben rechts), #cboxPrevious (mitte links) und #cboxNext (mitte rechts) absolut zu positionieren. Mit purem CSS scheint das nicht so ohne weiteres umsetzbar. Irgendwelche Tipps?
    Grüße,
    mapfei

  2. #2
    Community-Moderator
    Wandelndes Contao-Lexikon
    Avatar von Spooky
    Registriert seit
    12.04.2012.
    Ort
    Vienna, Austria
    Beiträge
    17.249
    User beschenken
    Wunschliste

    Standard

    Warum nicht? Link zur Seite?

  3. #3
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.555
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von mapfei Beitrag anzeigen
    Irgendwelche Tipps?
    Ja, die sind bereits absolut positioniert. Siehe demo.contao.org.

    Ansonsten hatte ich mir die Colorbox in Contao 3.5 mal so angepasst, dass ich nicht auf die Pfeile für next und previous zielen muss, sondern direkt jeweils die Hälfte des Bildes ein next oder previous auslöst. Hier das CSS:
    PHP-Code:
    /* ... Colorbox click 50/50 ...
    -------------------------------------------------------------------------------------------------*/
    #cboxPrevious,
    #cboxNext {
      
    backgroundtransparent;
      
    width50%;
      
    height100%;
      
    top0;
      
    margin-top0;
    }
    #cboxPrevious {
      
    left0;
    }
    #cboxNext {
      
    right0;
    }
    #cboxPrevious:before,
    #cboxNext:before {
      
    background-imageurl("../../assets/jquery/colorbox/1.6.1/images/controls.png"); /* Contao 3.5 */
      /* background-image: url("https://demo.contao.org/assets/colorbox/images/controls.png"); Contao 4 */
      
    positionabsolute;
      
    width28px;
      
    height65px;
      
    top50%;
      
    margin-top: -33px;
      
    content'';
    }
    #cboxPrevious:before {
      
    background-positionleft top;
      
    left5px;
    }
    #cboxNext:before {
      
    background-positionright top;
      
    right5px;
    }
    #cboxPrevious:hover:before {
      
    background-positionleft bottom;
    }
    #cboxNext:hover:before {
      
    background-positionright bottom;
    }
    /* ... Colorbox click 50/50 ... END
    -------------------------------------------------------------------------------------------------*/ 
    Geändert von Andreas (10.02.2018 um 00:31 Uhr)
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  4. #4
    Contao-Fan Avatar von mapfei
    Registriert seit
    11.05.2010.
    Ort
    Hennef
    Beiträge
    448
    Partner-ID
    10223
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von Andreas Beitrag anzeigen
    Ja, die sind bereits absolut positioniert. Siehe demo.contao.org.
    Hm, ich möchte aber das close und vor/zurück jeweils am Rand des Browserfensters platzieren. Aktuell stehts ja absolut am Rand des jeweiligen Fotos. Irgendwie stehe ich da gerade aufm Schlauch...
    Grüße,
    mapfei

  5. #5
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.555
    User beschenken
    Wunschliste

    Standard

    Das ist auch nicht so einfach, weil einige Elternelemente auf overflow:hidden und position:not-static stehen. Deswegen sieht man sie zum einen nicht bei Neuausrichtung außerhalb des parents und zum anderen orientiert sich die Positionierung am ersten parent mit position:not-static.
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  6. #6
    Contao-Fan Avatar von mapfei
    Registriert seit
    11.05.2010.
    Ort
    Hennef
    Beiträge
    448
    Partner-ID
    10223
    User beschenken
    Wunschliste

    Standard

    Hab jetzt ne andere Lightbox eingebaut, ist wohl unkomplizierter.
    Grüße,
    mapfei

  7. #7
    Contao-Fan Avatar von aadursun
    Registriert seit
    25.09.2011.
    Beiträge
    523

    Standard

    Wie hast du's gelöst?
    VG
    aadursun

  8. #8
    Contao-Fan Avatar von mapfei
    Registriert seit
    11.05.2010.
    Ort
    Hennef
    Beiträge
    448
    Partner-ID
    10223
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von aadursun Beitrag anzeigen
    Wie hast du's gelöst?
    Indem ich eine andere Lightbox verwendet habe.
    Grüße,
    mapfei

  9. #9
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.555
    User beschenken
    Wunschliste

    Standard

    Zitat Zitat von aadursun Beitrag anzeigen
    Wie hast du's gelöst?
    Z.B. so:
    PHP-Code:
            // Put custom options here
            
    ...
            
    maxWidth'100%',
            
    maxHeight'100%',
            
    width'100%',
            
    height'100%'
            
    ... 
    Siehe auch hier: http://www.jacklmoore.com/colorbox/#setting-dimensions
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •