Flexslider in Contao 3.2 integrieren

Für ein Projekt habe ich heute den Flexslider in Contao 3.2 integriert. Wer den Flexslider statt der Swipe Slideshow in Contao nutzen möchte, kann sich das angehängte zip-Paket herunterladen. Enthalten ist der Flexslider und die angepassten Templates. Die angepassten Dateien sorgen dafür, dass der Flexslider statt des Wipe Sliders genutzt wird. Der Flexlsider ist out of the box nutzbar und übernimmt ebenfalls die Einstellungen aus dem Backend. Wenn Ihr Probleme oder Feedback habt: nur zu. Der Kommentarbereich steht euch offen.

Full screen background image

//-------------------------------------------------
//  Images Fullscreen

function fullbg(wrapper) {

$(wrapper).each(function() {
var $self = $(this),
$iWidth = $self.find('> img').width(),
$iHeight = $self.find('> img').height(),
$wWidth = $self.width(),
$wHeight = $self.height(),
iRatio = $iWidth / $iHeight,
wRatio = $wWidth / $wHeight,
vspace = ($wWidth - ($wHeight * iRatio)) / 2,
hspace = ($wHeight - ($wWidth / iRatio)) / 2;

if(iRatio >= wRatio) {
$self.find('> img').css({
width: $wHeight * iRatio + 'px',
height: $wHeight + 'px',
marginLeft: vspace + 'px'
})
} else {
$self.find('> img').css({
width: '100%',
height: 'auto',
marginTop: hspace + 'px'
})
}

$self.find('> img').animate({
opacity: 1
}, 600);
});
}


//-------------------------------------------------
//  Window Load

$(window).load(function() {
fullbg('.fullbg');
});

//-------------------------------------------------
//  Window Resize

$(window).resize(function() {
fullbg('.fullbg');
});

See the Pen Image Fullscreen by John (@herr_john) on CodePen

jQuery Plugin: Automatische Anchor Navigation

Sprungmarken helfen große Seiten besser zu navigieren. Dies ist zum Beispiel der Fall bei FAQ-Seiten. Niklas und ich haben ein jQuery Plugin geschrieben, was die entsprechende Navigation automatisch generiert. Das Plugin ist Modular aufgebaut und kann schnell um eigene Aktionen erweitert werden. Durch dynamische Generierung muss nicht aufwendig eine separate Navigation gepflegt werden. Als zusätzliches "Eyecandy" ist ein weiches "Scrollen" eingebaut.

Vertical align center mit jQuery

Ein altes Problem von HTML und CSS ist die mangelnde Möglichkeit ein DIV vertikal zu zentrieren ohne negative Werte oder eine Tabelle zu nutzen. Eine Lösung sah so aus, dass die zu zentrierende Box feste Abmessungen bekommt, sie absolut positioniert, von den Rändern 50% entfernt wird und um den halbierten negativen Wert der eigenen Abmessungen zurück geschoben wird. Dies führt jedoch dazu, dass wenn der Viewport zu klein wird, ein Teil der Box aus dem Viewport verschwindet. Um dies schnell und einfach zu lösen, kann einfach Javascript, bzw. in diesem Fall jQuery genutzt werden:

Update: Blöcke verstecken und einige grafische Änderungen

Nun ist es auf jooon.de möglich die oberen Blöcke auszublenden. Dies soll erreichen, dass man beim lesen der Artikel weniger abgelenkt wird. Neben der neuen Funktion, die ein jQuery-Update erforderlich gemacht hat, habe ich einige Details, wie zum Beispiel die Anzeige der Artikelüberschriften und der Artikelinformation verändert. In den kommenden Tagen werde ich vermutlich noch etwas zu dem jQuery-Update schreiben. Neu ist ebenfalls die Silhouette unten rechts.