LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
  • Steven
  • Bultot
  • Account Manager
è qwè chale ? ké novel à Boncelles ?

In the mood

  • Yves
  • Joris
  • Web Developer
Victoriae mundis et mundis lacrima. Bon, ça ne veut absolument rien dire, mais je trouve que c’est assez dans le ton.

In the mood

  • Joévin
  • Licot
  • Web Hairstyle Creator
Ca passe crème !

In the mood

  • Fabrice
  • Hackin
  • Web Designer
C'est pas faux !

In the mood

  • Geoffray
  • Warnants
  • Web Developer
Fred, tu as 2 minutes ?

In the mood

  • Steven
  • Maquinay
  • Graphics & Motion Maker
Dans la vie, j’avais deux ennemis : le vocabulaire et les épinards. Maintenant j’ai la botte secrète et je bouffe plus d’épinards. Merci, de rien, au revoir messieurs-dames.

In the mood

  • Robin
  • Theys
  • IT Manager
Think different !

In the mood

  • Mario
  • Super
  • Pixel lover
Mama Mia!

In the mood

  • Yannick
  • Germeau
  • Drupal Developer
Space. It seems to go on and on forever. But then you get to the end and a giant monkey starts throwing barrels at you.

In the mood

  • Michaël
  • Venuto
  • Assistant Manager
et quoi ? On fait un kicker?

In the mood

  • Paul-Philippe
  • Nelles
  • Front-End Engineer
Et tout ça pourquoi Monsieur Manatane, pour du Schnaps ?

In the mood

  • Rodolphe
  • de Callatay
  • Flash & Web Developer
WTF ?

In the mood

  • Nicolas
  • Discry
  • Operation Manager
Comment est-ce qu'on vit ?

In the mood

  • Audrey
  • Brouir
  • Web Designer / Front-End Developper
Suis toujours les noiraudes, ils te mèneront sur le bon chemin.

In the mood

  • Jean-Marc
  • Lhuire
  • General Manager
Un chameau, c'est un cheval de course décidé par une commission

In the mood

  • Thomas
  • Jenke
  • Senior Account Manager
Evidemment, " ça dépend", ça dépasse !

In the mood

  • Nicolas
  • Courtoy
  • Graphic Designer
This is an adventure!

In the mood

  • Delphine
  • Winand
  • Senior Account Manager
Bon, je vous préviens, je vais dire un truc méchant là...

In the mood

  • Géraldine
  • Leblanc
  • Senior Account Manager
T'es sur quoi là ?

In the mood

  • Frédéric
  • Schluntz
  • Lead Developer
Tu n'irais pas me chercher un café?

Musiques que je n'aime pas

  • Tom
  • Glückmann
  • Art Direktor
Un peu. Un peu mais guère.

In the mood

  • Sandrine
  • Thiry
  • Graphic Designer, Office Expert
A 35 ans, j'assume tout... et surtout mes goûts musicaux !

In the mood

  • Dino
  • Zara
  • Lead & Product Designer
All the dinosaurs feared the T-Rex.

In the mood

CSS
.page-template-team-php #hero {
    height: 300px;
    margin-bottom: 70px;
    border-bottom: 1px solid #e4e4e4
}

.page-template-team-php #hero div {
    height: 300px;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow: hidden
}

.page-template-team-php #hero div p {
    font-family: "pill-gothic-300mg",sans-serif;
    font-style: normal;
    font-weight: 700;
    color: white;
    width: 80%;
    text-align: center;
    font-size: 150%;
    margin: 90px auto 0;
    line-height: 110%;
    text-transform: uppercase
}

.page-template-team-php #hero div p span {
    font-family: "pill-gothic-300mg",sans-serif;
    font-style: normal;
    font-weight: 400;
    display: block
}

.page-template-team-php #team {
    overflow: hidden
}

.page-template-team-php #team .title {
    margin-bottom: 50px;
    text-align: center
}

.page-template-team-php #team .title span {
    font-family: "kepler-std-semicondensed-cap",serif;
    font-style: normal;
    font-weight: 300;
    color: #848484
}

.page-template-team-php #team .title h2 {
    margin: 0;
    padding-bottom: 20px;
    margin-bottom: 15px;
    margin-top: 5px;
    font-size: 2.5em;
    font-family: "pill-gothic-300mg",sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #ffcf01;
    background: transparent url(https://www.globulebleu.com/wp-content/themes/gbl-toolbox-2/img/cross.png) bottom center no-repeat
}

.page-template-team-php #team .title h2 b {
    color: #000
}

.page-template-team-php #team .title i.icon {
    display: block;
    text-indent: -999em;
    overflow: hidden;
    text-align: left;
    direction: ltr;
    display: inline-block;
    width: 25px;
    height: 22px;
    margin-top: 1px;
    line-height: 22px;
    vertical-align: text-top;
    background-image: url(https://www.globulebleu.com/wp-content/themes/gbl-toolbox-2/img/sprite.png);
    background-position: -670px -126px;
    background-repeat: no-repeat
}

.page-template-team-php #team #full-team {
    clear: both;
    position: relative;
    background-repeat: no-repeat
}

.page-template-team-php #team #full-team article {
    position: relative;
    float: left;
    width: 33.33333333333333%;
    background-color: #000;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    border-right: 1px solid #fff
}

.page-template-team-php #team #full-team article .hover {
    background: transparent url(https://www.globulebleu.com/wp-content/themes/gbl-toolbox-2/img/team-hover.png) 0 0;
    display: none;
    width: 193px;
    height: 193px;
    left: 7px;
    top: -182px;
    position: absolute;
    -webkit-transition: all 200ms ease-in-out;
    transition: all 200ms ease-in-out
}

.page-template-team-php #team #full-team article a {
    width: 100%;
    display: block;
    height: 100%;
    text-align: center
}

.page-template-team-php #team #full-team article a i.line {
    background-color: #fff;
    display: block;
    height: 1px;
    width: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -5px;
    opacity: 0;
    -webkit-transition: all 250ms ease-in-out;
    transition: all 250ms ease-in-out
}

.page-template-team-php #team #full-team article a span {
    z-index: 10;
    opacity: 0;
    position: absolute;
    top: 49%;
    color: white;
    left: 0;
    width: 90%;
    padding: 0 5%
}

.page-template-team-php #team #full-team article a span.fname {
    text-transform: uppercase;
    margin-top: -30px;
    font-size: 15px;
    font-family: "pill-gothic-300mg",sans-serif;
    font-style: normal;
    font-weight: 400;
    padding-bottom: 25px
}

.page-template-team-php #team #full-team article a span.position {
    font-family: "kepler-std-semicondensed-cap",serif;
    font-style: normal;
    font-weight: 300;
    margin-top: 13px;
    font-size: 14px;
    line-height: 14px
}

.page-template-team-php #team #full-team article a:hover i.line {
    opacity: 1;
    width: 30px;
    margin-left: -15px
}

.page-template-team-php #team #full-team article a:hover span {
    opacity: 1
}

.page-template-team-php #team #full-team article a:hover figure {
    opacity: .2
}

.page-template-team-php #team #full-team article:hover {
    opacity: 1
}

.page-template-team-php #team #full-team article:nth-child(3n) {
    border-right: 0
}

.page-template-team-php #team #full-team .close {
    display: none
}

.page-template-team-php #team .info-team {
    display: none;
    position: absolute;
    right: 0;
    top: 0
}

.page-template-team-php #team .info-team .profile {
    display: none
}

.page-template-team-php #team .info-team .profile ul {
    margin-bottom: 45px
}

.page-template-team-php #team .info-team .profile ul li {
    list-style: none;
    font-family: "pill-gothic-300mg",sans-serif;
    font-style: normal;
    font-weight: 700;
    line-height: 38px;
    font-size: 2.625em;
    text-transform: uppercase;
    color: #000
}

.page-template-team-php #team .info-team .profile ul li:nth-child(3n) {
    font-family: "pill-gothic-300mg",sans-serif;
    font-style: normal;
    font-weight: 400;
    color: #e4e4e4
}

.page-template-team-php #team .info-team .profile ul li:last-child {
    width: 63px;
    height: 3px;
    display: block;
    background-color: #ffcf01;
    margin: 27px 0
}

.page-template-team-php #team .info-team .profile ul li span.yellow {
    color: #ffcf01
}

.page-template-team-php #team .info-team .profile blockquote {
    font-family: "kepler-std-semicondensed-cap",serif;
    font-style: italic;
    font-weight: 300;
    position: relative;
    max-width: 350px;
    padding-left: 25px;
    padding-right: 25px;
    margin: 0 0 37px 0
}

.page-template-team-php #team .info-team .profile blockquote:before {
    width: 17px;
    height: 12px;
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    background: transparent url(https://www.globulebleu.com/wp-content/themes/gbl-toolbox-2/img/sprite.png) -252px -7px no-repeat
}

.page-template-team-php #team .info-team .profile blockquote:after {
    width: 37px;
    height: 17px;
    content: " ";
    position: absolute;
    background: transparent url(https://www.globulebleu.com/wp-content/themes/gbl-toolbox-2/img/sprite.png) -242px -22px no-repeat
}

.page-template-team-php #team .info-team .profile .spotify {
    max-height: 191px;
    overflow: hidden;
    margin-bottom: 30px
}

@media(min-width: 481px) {
    .page-template-team-php #hero {
        height:300px
    }

    .page-template-team-php #hero div {
        height: 300px
    }

    .page-template-team-php #hero div p {
        width: 80%;
        font-size: 170%;
        margin: 110px auto 0;
        line-height: 100%
    }

    .page-template-team-php #team #full-team article a span {
        width: 70% padding:0 15%;
        font-size: 1.2em
    }

    .page-template-team-php #team #full-team article a span.fname {
        font-size: 1.2em
    }

    .page-template-team-php #team #full-team article a span.position {
        line-height: 14px;
        font-size: 1em
    }
}

@media(min-width: 768px) {
    .page-template-team-php #hero {
        height:400px
    }

    .page-template-team-php #hero div {
        height: 400px
    }

    .page-template-team-php #hero div p {
        width: 80%;
        font-size: 230%;
        margin: 130px auto 0;
        line-height: 110%
    }

    .page-template-team-php #team #full-team {
        margin: 0 auto;
        width: 770px;
        background-position: 0 0;
        padding-bottom: 50px;
        -webkit-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out
    }

    .page-template-team-php #team #full-team .mask-team {
        overflow: hidden;
        padding: 69px 0 50px 28px;
        background: transparent url(https://www.globulebleu.com/wp-content/themes/gbl-toolbox-2/img/team-mask-small.png) 0 0 no-repeat
    }

    .page-template-team-php #team #full-team .info-team {
        left: 0;
        top: 720px;
        position: absolute
    }

    .page-template-team-php #team #full-team .info-team .profile {
        width: 400px;
        position: relative;
        margin: 0 auto
    }

    .page-template-team-php #team #full-team .info-team .profile ul li {
        text-align: center
    }

    .page-template-team-php #team #full-team .info-team .profile ul li:last-child {
        margin: 27px auto
    }

    .page-template-team-php #team #full-team .info-team .profile blockquote {
        text-align: center;
        font-size: 150%;
        font-family: "kepler-std-semicondensed-cap",serif;
        font-style: normal;
        font-weight: 500;
        width: 100%
    }

    .page-template-team-php #team #full-team .info-team .profile blockquote:after {
        right: 0;
        position: absolute;
        background-position: -233px -22px
    }

    .page-template-team-php #team #full-team .info-team .profile h3 {
        text-align: center
    }

    .page-template-team-php #team #full-team .info-team .profile .spotify {
        max-height: 191px;
        padding-left: 55px
    }

    .page-template-team-php #team #full-team .close {
        display: none;
        width: 135px;
        height: 135px;
        background-color: #ffcf01;
        text-align: center;
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        position: absolute;
        overflow: hidden;
        left: 124px;
        z-index: 10;
        top: 606px
    }

    .page-template-team-php #team #full-team .close a {
        position: relative;
        width: 135px;
        height: 135px;
        display: inline-block;
        display: block;
        text-indent: -999em;
        overflow: hidden;
        background-repeat: no-repeat;
        text-align: left;
        direction: ltr;
        top: 0;
        left: 0
    }

    .page-template-team-php #team #full-team .close a i {
        -webkit-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        display: inline-block;
        width: 135px;
        height: 135px;
        position: absolute;
        line-height: 18px;
        top: 0;
        left: 0;
        vertical-align: text-top;
        background-image: url(https://www.globulebleu.com/wp-content/themes/gbl-toolbox-2/img/white-cross.png);
        background-position: center center;
        background-repeat: no-repeat
    }

    .page-template-team-php #team #full-team .close a span {
        position: absolute;
        text-indent: 0;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 43%;
        color: white;
        text-transform: uppercase;
        font-family: "proxima-nova",sans-serif;
        font-style: normal;
        font-weight: 300;
        left: 32%;
        opacity: 0;
        -webkit-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out
    }

    .page-template-team-php #team #full-team .close:hover a i {
        top: -6px;
        left: -6px
    }

    .page-template-team-php #team #full-team .close:hover span {
        opacity: 1;
        top: 51%;
        left: 40%
    }

    .page-template-team-php #team #full-team article {
        width: 135px;
        height: 135px;
        background-color: #fff;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        -webkit-background-size: auto 173px;
        -moz-background-size: auto 173px;
        -ms-background-size: auto 173px;
        -o-background-size: auto 173px;
        float: left;
        margin: 25px 5px;
        text-align: center;
        zoom:1;-webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        transform: rotate(45deg);
        overflow: hidden;
        margin: 0;
        margin-right: 57px;
        margin-top: -39px;
        position: relative;
        border: 0;
        -webkit-transition: all 300ms ease-in-out;
        transition: all 300ms ease-in-out;
        -webkit-transition-delay: .9s;
        transition-delay: .9s;
    }

    .page-template-team-php #team #full-team article .hover {
        display: block
    }

    .page-template-team-php #team #full-team article:nth-child(7),.page-template-team-php #team #full-team article:nth-child(14),.page-template-team-php #team #full-team article:nth-child(21) {
        margin-right: 0
    }

    .page-template-team-php #team #full-team article:first-child,.page-template-team-php #team #full-team article:nth-child(8),.page-template-team-php #team #full-team article:nth-child(15),.page-template-team-php #team #full-team article:nth-child(22) {
        margin-left: 96px
    }

    .page-template-team-php #team #full-team article:hover {
        background-color: #000;
        border: 5px solid #ffcf01;
        -webkit-transition: border 200ms ease-in-out;
        transition: border 200ms ease-in-out
    }

    .page-template-team-php #team #full-team article:hover .hover {
        top: 9px
    }

    .page-template-team-php #team #full-team article a {
        display: block;
        width: 150%;
        height: 150%;
        -webkit-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        position: absolute;
        top: -36px;
        left: -38px;
        transform: rotate(-45deg)
    }

    .page-template-team-php #team #full-team article a i.line {
        -webkit-transition-delay: .1s;
        transition-delay: .1s;
        opacity: 1;
        width: 0
    }

    .page-template-team-php #team #full-team article a span {
        top: 94px;
        width: 54%;
        padding: 0 23%
    }

    .page-template-team-php #team #full-team article a span.fname {
        -webkit-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
        -webkit-transition-delay: 0;
        transition-delay: 0;
        left: -150px;
        font-size: 1.2em;
        opacity: 1
    }

    .page-template-team-php #team #full-team article a span.position {
        -webkit-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
        -webkit-transition-delay: 0;
        transition-delay: 0;
        font-size: 1em;
        opacity: 1;
        left: auto;
        right: -150px
    }

    .page-template-team-php #team #full-team article a figure img {
        -webkit-transition: all 200ms ease-in-out;
        transition: all 200ms ease-in-out;
    }

    .page-template-team-php #team #full-team article a:hover i.line {
        -webkit-transition-delay: .4s;
        transition-delay: .4s
    }

    .page-template-team-php #team #full-team article a:hover span.fname {
        left: 0;
        -webkit-transition-delay: .25s;
        transition-delay: .25s
    }

    .page-template-team-php #team #full-team article a:hover span.position {
        right: 0;
        -webkit-transition-delay: .3s;
        transition-delay: .3s
    }

    .page-template-team-php #team #full-team article a:hover figure {
        opacity: .3
    }

    .page-template-team-php #team #full-team article a.team135 span.fname,.page-template-team-php #team #full-team article a.team129 span.fname {
        font-size: 1em
    }

    .page-template-team-php #team #full-team.open .close {
        display: block
    }

    .page-template-team-php #team #full-team.open .mask-team article a .hover,.page-template-team-php #team #full-team.open .mask-team article a span {
        visibility: hidden
    }

    .page-template-team-php #team #full-team.openHover {
        padding-bottom: 590px
    }

    .page-template-team-php #team #full-team.openHover .mask-team article {
        border: 0
    }

    .page-template-team-php #team #full-team.openHover .mask-team article a {
        cursor: default
    }

    .page-template-team-php #team #full-team.openHover .mask-team article a .hover,.page-template-team-php #team #full-team.openHover .mask-team article a span {
        visibility: hidden
    }

    .page-template-team-php #team #full-team.openHover .mask-team article a i.line {
        display: none
    }

    .page-template-team-php #team #full-team.openHover .mask-team article.cropShow {
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
    }

    .page-template-team-php #team #full-team.openHover .mask-team article:nth-child(19).cropShow,.page-template-team-php #team #full-team.openHover .mask-team article:nth-child(20).cropShow {
        border-bottom: 0
    }

    .page-template-team-php #team #full-team.openHover .mask-team article:nth-child(8),.page-template-team-php #team #full-team.openHover .mask-team article:nth-child(15) {
        border-bottom: 0
    }

    .page-template-team-php #team #full-team.openHover .mask-team article:nth-child(19),.page-template-team-php #team #full-team.openHover .mask-team article:nth-child(17),.page-template-team-php #team #full-team.openHover .mask-team article:nth-child(10),.page-template-team-php #team #full-team.openHover .mask-team article:nth-child(20) {
        border-right: 0
    }
}

@media(min-width: 980px) {
    .page-template-team-php #hero {
        height:500px
    }

    .page-template-team-php #hero div {
        height: 500px
    }

    .page-template-team-php #hero div p {
        width: 60%;
        font-size: 260%;
        margin: 170px auto 0;
        line-height: 120%
    }
}

@media(min-width: 1200px) {
    .page-template-team-php #hero {
        height:500px
    }

    .page-template-team-php #hero div {
        height: 500px;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover
    }

    .page-template-team-php #hero div p {
        width: 60%;
        font-size: 260%;
        margin: 200px auto 0
    }

    .page-template-team-php #team {
        padding-bottom: 60px
    }

    .page-template-team-php #team #full-team {
        width: 1157px;
        padding-bottom: 0;
        background-position: 0 center
    }

    .page-template-team-php #team #full-team .close {
        left: 28px;
        top: 28px
    }

    .page-template-team-php #team #full-team .info-team {
        top: 0;
        left: inherit;
        right: 0
    }

    .page-template-team-php #team #full-team .info-team .profile ul li {
        text-align: left
    }

    .page-template-team-php #team #full-team .info-team .profile ul li:last-child {
        margin: 27px 0
    }

    .page-template-team-php #team #full-team .info-team .profile blockquote {
        text-align: left
    }

    .page-template-team-php #team #full-team .info-team .profile blockquote:after {
        right: inherit
    }

    .page-template-team-php #team #full-team .info-team .profile h3 {
        text-align: left
    }

    .page-template-team-php #team #full-team .info-team .profile .spotify {
        padding-left: 0
    }

    .page-template-team-php #team #full-team .mask-team {
        padding-left: 28px;
        background: transparent url(https://www.globulebleu.com/wp-content/themes/gbl-toolbox-2/img/team-mask.png) 0 0 no-repeat;
    }

    .page-template-team-php #team #full-team article:nth-child(7),.page-template-team-php #team #full-team article:nth-child(14),.page-template-team-php #team #full-team article:nth-child(21) {
        margin-right: 57px
    }

    .page-template-team-php #team #full-team article:first-child,.page-template-team-php #team #full-team article:nth-child(8),.page-template-team-php #team #full-team article:nth-child(22) {
        margin-left: 0
    }

    .page-template-team-php #team #full-team article:first-child,.page-template-team-php #team #full-team article:nth-child(21) {
        margin-left: 192px
    }

    .page-template-team-php #team #full-team article:nth-child(5),.page-template-team-php #team #full-team article:nth-child(16) {
        margin-left: 96px
    }

    .page-template-team-php #team #full-team article:nth-child(15) {
        margin-left: 0;
        margin-right: 0
    }

    .page-template-team-php #team #full-team.openHover {
        padding-bottom: 0
    }

    .page-template-team-php #team #full-team.openHover .mask-team article:nth-child(8),.page-template-team-php #team #full-team.openHover .mask-team article:nth-child(15) {
        border-bottom: 2px solid #fff
    }

    .page-template-team-php #team #full-team.openHover .mask-team article:nth-child(19),.page-template-team-php #team #full-team.openHover .mask-team article:nth-child(17),.page-template-team-php #team #full-team.openHover .mask-team article:nth-child(10),.page-template-team-php #team #full-team.openHover .mask-team article:nth-child(20) {
        border-right: 2px solid #fff
    }
}
JS
var crops = {
    //'768' : [10,14,11,7,3,0,4,1,5,8,12,15],
    '768': [7, 4, 8, 5, 9, 12, 16, 19, 15, 18, 14, 11],
    '1200': [15, 10, 4, 0, 5, 1, 6, 11, 17, 21, 16, 20],
    isOpen: false
};


var team = team || {
    members: [],
    timeOuts: [],
    increment: 15,
    speed: 25,
    size: false,
    images: []

};


var nav = {};

nav.isNotMobile = '1200';

team.openCrops = function(_element) {
    var element = _element;
    team.increment = 15;
    team.size = nav.isNotMobile;
    var profile = team.getInfos(_element);
    jQuery('#full-team').addClass('openHover');
    jQuery.each(team.members, function(index, value) {
        if (team.increment < 1500) {
            team.increment = 25 + team.increment;
        }

        var _class = 'cropHide';
        
        if (jQuery.inArray(jQuery(value).index(), crops[team.size])){
            _class = 'cropShow';
        }
        var p = this;
        var t = setTimeout(function() {
            if (_class == 'cropHide') {
                jQuery('img', p).animate({
                    opacity: 0
                }, 500, function() {
                    jQuery(p).addClass(_class);
                    jQuery(p).css('background-color', 'rgba(255,255,255,1)');
                    if (team.members.length - 1 == index) {
                        jQuery('#full-team').addClass('open');
                        jQuery('.info-team').fadeIn(250);
                        var frameSrc = jQuery('iframe', profile).data('src');
                        if (frameSrc != '') {
                            jQuery('iframe', profile).prop('src', frameSrc);
                        }
                    }
                });

            } else {
                jQuery('img', p).animate({
                    opacity: 0
                }, 500, function() {
                    jQuery(p).addClass(_class);
                    jQuery(p).css('background-color', 'rgba(255,255,255,0)');
                    if (team.members.length - 1 == index) {
                        jQuery('#full-team').addClass('open');
                        jQuery('.info-team').fadeIn(250);

                        var frameSrc = jQuery('iframe', profile).data('src');
                        if (frameSrc != '') {
                            jQuery('iframe', profile).prop('src', frameSrc);
                        }

                    }
                });
            }
        }, team.increment);
        team.timeOuts.push(t);

    });
    team.scrollTop();

}
team.scrollTop = function() {
    jQuery('body, html').animate({
        scrollTop: jQuery('#full-team').offset().top - 190
    });
}
team.closeCrops = function() {
    jQuery('#full-team').css('background-image', '');
    jQuery('.profileOpen').removeClass('profileOpen').fadeOut(250);
    jQuery('.info-team').fadeOut(250);
    jQuery('.member').css('background-color', '');
    jQuery('.member img').animate({
        opacity: 1
    }, 350, function() {
        jQuery('.cropHide').removeClass('cropHide');
        jQuery('.cropShow').removeClass('cropShow');
        jQuery('#full-team').removeClass('open');
        jQuery('#full-team').removeClass('open');
        jQuery('#full-team').removeClass('openHover');
    });

    jQuery.each(team.timeOuts, function() {
        clearTimeout(this);
    });
    team.timeOuts = [];
}

team.getInfos = function(_element) {
    var id = jQuery('a', _element).prop('class');

    var profile = jQuery('#' + id);
    var profileImg = jQuery('span.posture', profile).data('768');

    jQuery('#full-team').css('background-image', 'url(' + team.images[id].prop('src') + ')');

    jQuery(profile).addClass('profileOpen').fadeIn(250);
    return profile;
}

team.loadImg = function() {
    jQuery.each(team.members, function(index, member) {
        var id = jQuery('a', member).prop('class');
        var url = jQuery('span.posture', '#' + id).data('768');
        var img = jQuery('').prop('src', url);
        team.images[id] = img;
    })
}


team.init = function() {
    crops.isOpen = false;
    jQuery('.member').each(function() {
        team.members.push(this);
    })
    jQuery('.member a').click(function(event) {

        if (!crops.isOpen) {
            crops.isOpen = true;
            event.preventDefault();
            var element = jQuery(this).parent();
            team.members.sort(function() {
                return 0.5 - Math.random()
            });
            team.openCrops(element);
            return false;
        }

    });
    jQuery('#full-team .close a').click(function(event) {
        event.preventDefault();
        team.closeCrops();
        crops.isOpen = false;
        return false;
    });

    team.loadImg();

}

setTimeout(function() {
        team.init();
    }, 600);
Term
Wed, 12/27/2017 - 06:59

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv