Kontakt

Christina Riedl

Telefon: 07223 967-326

Telefax: 07223 967-7326

E-Mail: christina.riedl@schoeck.de

Nadine Seifried

Telefon: 07223 967-128

Telefax: 07223 967-7128

E-Mail: nadine.seifried@schoeck.de

Elementbaukasten Overlay

Verwendung

Zur vergrößerten Darstellung von Bildern, Einbindung von Formularen, Länderauswahl oder weiterführenden Informationen, ohne dabei die Seite verlassen zu müssen.

Vorschau

HTML

                
                  <a href="/appresources/styleguide/img/1024x768.png" class="fancybox">Overlay öffnen</a>

CSS

              @charset "UTF-8";
.fancybox-wrap.fancybox-schoeck .fancybox-skin {
  background-color: #fff;
}
.fancybox-wrap.fancybox-schoeck .fancybox-skin .fancybox-close {
  top: 0;
  right: 0;
  background: none;
  width: 45px;
  height: 45px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
}
.fancybox-wrap.fancybox-schoeck .fancybox-skin .fancybox-close:before {
  font-family: 'schoeck';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "";
}
.fancybox-wrap.fancybox-schoeck .fancybox-skin .fancybox-close:before {
  transition: 0.2s color ease;
  color: #0069b4;
  font-size: 25px;
}
@media screen and (max-width: 767) {
  .fancybox-wrap.fancybox-schoeck .fancybox-skin .fancybox-close:before {
    transition: none;
  }
}
.fancybox-wrap.fancybox-schoeck .fancybox-skin .fancybox-close:hover:before {
  color: #f9b200;
}

body .fancybox-overlay {
  background: none;
  background-color: rgba(0, 105, 180, 0.2);
}

.fancybox-lock .fancybox-overlay {
  overflow: auto;
}

a {
  font-family: 'Corpid_TT7_Bold', Arial;
  font-weight: normal;
  font-style: normal;
}

SCSS

              @import "../general/_general";

.fancybox-wrap {
  &.fancybox-schoeck {
    .fancybox-skin {
      background-color:$white;

      .fancybox-close {
        top:0;
        right:0;
        background:none;
        width:45px;
        height:45px;
        padding:10px;
        background-color:rgba($white, 0.8);

        @include schoeck-icon($icon-cross);

        &:before {
          @include linkcolor-transition;
          color:$blue;
          font-size:25px;
        }

        &:hover {
          &:before {
            color:$orange;
          }
        }
      }
    }
  }
}

body {
  .fancybox-overlay {
    background:none;
    background-color:rgba($blue, 0.2);
  }
}

.fancybox-lock {
  .fancybox-overlay {
    overflow:auto;
  }
}

JavaScript

                jQuery(document).ready(function(){
  var fancyboxSettings={
    padding:0,
    margin:0,
    wrapCSS:'fancybox-schoeck',
    width:'1024',
    height:'768',
    helpers: {
      overlay: {
        locked:true,
        closeClick:false
      },
      media:{}
    },
    beforeShow:function(){
      jQuery('html').css('overflowX', 'visible');
      jQuery('body').css('overflowY', 'hidden');
    },
    afterClose:function(){
      jQuery('html').css('overflowX', 'hidden');
      jQuery('body').css('overflowY', 'visible');
    }
  };

  jQuery('a.fancybox').fancybox(fancyboxSettings);
});

Abhängigkeiten

www.fancyapps.com/fancybox