Beiträge getaggt mit fancybox

Fancybox mit Icon Font

Geschrieben von in css am

Ein Kunde von mir liebt die Fancybox, daher möchte er es gerne in seinen Projekten drin haben. Ich finde sie gut, allerdings gefällt mir nicht, wenn die Blätterpfeile und der Schließen-Button mit Hintergrundbildern gestylt werden. In den Zeiten der Icon Fonts finde ich diese einfach viel besser (und flexibler). Font-Awesome habe ich als Scss eingebunden und kann die Mixins und Variablen davon nutzen.

So kann man das X mit Fontawesome umsetzen:

.fancybox-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  z-index: 8040;
  background-color: $white;
  border-radius: 16px;
  border: 3px solid $body-font-color;
  color: $body-font-color;
  box-shadow: 0 5px 10px rgba($dark-gray, 0.5);
  font-size: rem-calc(18);
 
  &::before {
    @include fa-icon;
    content: $fa-var-times;
    display: block;
    position: absolute;
    top: 5px;
    left: 6px;
  }
}

Und so werden aus den Icons für die Pfeile ebenfalls Font Icons:

.fancybox-nav span {
  position: absolute;
  top: 50%;
  width: 21px;
  margin-top: -8px;
  cursor: pointer;
  z-index: 8040;
  visibility: visible;
  opacity: 0.5;
  color: $white;
  &::before {
    @include fa-icon;
    font-size: rem-calc(24);
    text-shadow: 0px 0px 5px rgba($dark-gray, 0.5);
  }
}
 
.fancybox-prev span {
  left: 10px;
  &::before {
    content: $fa-var-chevron-left;
  }
}
 
.fancybox-next span {
  right: 10px;
  &::before {
    content: $fa-var-chevron-right;
  }
}

Selbst das Loader Bild kann man ersetzen: mit Css Animations. Das zu testen ist allerdings etwas tricky. Man kann beim Aufruf der Seite das Fancybox-Loading anzeigen lassen.

$(document).ready(function () {
    $.fancybox.showLoading();
});

Weil man denn den Loader endlich mal länger sieht, kann man den entsprechend stylen:

#fancybox-loading {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -22px;
  background-position: 0 -108px;
  opacity: 0.8;
  cursor: pointer;
  z-index: 8060;
}
 
#fancybox-loading div {
  width: 44px;
  height: 44px;
  color: $body-font-color;
  &::before {
    @include fa-icon;
    content: $fa-var-spinner;
    font-size: rem-calc(44);
    animation: fa-spin 1s infinite steps(8);
  }
}