Mix It Up Demo - Mando Check in - out + Sortable + Lightbox

by bizamajig

HTML

<script src="http://mixitup.io/js/jquery.mixitup.min.js"></script>
<script src="http://mixitup.io/demos/js/jquery-ui.sortable.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.5/mousetrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.2/jquery.ui.touch-punch.min.js"></script>
<div class="controls"> <a href="#"></a>

    <ul>
         <h4>Filtering</h4>

        <li class="filter" data-filter="In">In</li>
        <li class="filter" data-filter="Out">Out</li>
    </ul>
</div>



<div id="TopBar">
    <span class="picIn"></span>
    <span class="phraseIn"><b>IN</b></span>
    <span class="logo">M<b>AND</b>O</span>
    <span class="phraseOut"><b>OUT</b></span>
    <span class="picOut"></span>
<div class="DropArea">
        <div class="DropIn">
            <p>In the Office</p>
        </div>
        <div class="DropOut">
            <p>Out of the Office</p>
        </div>
    </div>
    
    
</div>
<ul id="Grid">
    <li class="mix In" data-id="p001">
        <ximg src="http://www.mandogroup.com/media/5382/ian.jpg" />
        <span>Ian Finch</span>
    </li>
    <li class="mix Out" data-id="p001">
        <ximg src="http://www.mandogroup.com/media/5374/jon-seal.jpg" /> <span>Jonathan Seal</span>

    </li>
    <li class="mix In" data-id="p001">
        <ximg src="http://www.mandogroup.com/media/14807/johnf.jpg" /> <span>John Fletcher</span>

    </li>
    <li class="mix In" data-id="p001">
        <ximg src="http://www.mandogroup.com/media/14978/alex.jpg" /> <span>Alex Zanich lorem ipsum dolor</span>

    </li>
    <li class="mix In" data-id="p001">
        <ximg src="http://www.mandogroup.com/media/5383/jason.jpg" /> <span>Jason McCullagh</span>

    </li>
    <li class="mix In" data-id="p001">
        <ximg src="http://www.mandogroup.com/media/5390/sean.jpg" /> <span>Sean Sankey</span>

    </li>
    <li class="mix In" data-id="p001">
        <ximg...

CSS

/*-- Lightbox --*/

#lightbox { 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background: rgba(0, 0, 0, .8); 
}

#lightbox p { 
position:fixed; 
z-index:999; 
cursor:pointer; 
right:10px; 
top:10px ;
text-align:  right; 
padding: .25em .5em;  
color: #fff; 
margin-right: 20px; 
font-size: 20px;  
background: rgba(100, 100, 100, .5); 
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
}

#slideshow { 
position: relative; 
z-index: 100; 
text-align:center; 
width: 95%; 
height:95%; 
margin: 10 auto;
padding: 0px; 
background-color: transparent;red; 
//box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

/*#slideshow img { 
position: absolute; 
top: 5%; 
left: 0px; 
right: 0px; 
bottom:5%;
align:center; 
max-width:90%; 
max-height:90%; 
margin:auto;
}*/

.nav { /*display:*/ none; z-index:999; }

.prev, .next { 
position: absolute; 
top: 50%; 
z-index:999; 
cursor:pointer; 
background: rgba(100, 100, 100, .5); 
padding: .25em .5em; 
color: #fff; text-decoration: none; 
    border-radius:7px;
    -moz-border-radius:7px;
    -webkit-border-radius:7px;
}

.next { right: 10px; }
.prev { left: 10px; }

.thumb{
width: 175px;
height: auto;
margin:5px;
}



















body {
    font-size:16px;
    margin:0;
}
/* */
 .controls {
    border: 0.063em solid #000;
    padding: .5em;
}
.controls ul {
    padding:0;
    margin:0;
    list-style: none;
}
.controls a {
    display:block;
    text-align:center;
}
.controls h4 {
    margin:0;
}
.controls ul li {
    cursor: pointer;
}
.controls ul li.active {
    background-color:#d1003f;
    color:#fff;
}
/* TopBar Stuff */
 #TopBar {
    text-align:center;
    font-size: 1.250em;
    font-family:'Orator-10', helvetica, arial, sans-serif;
    /*padding:.35em 0 .75em 0;*/
    /*margin:0;*/
    position:relative;
    /*display:block;*/
    line-height:1em;
    height:1.5em;
}
#TopBar .logo {
    font-weight: normal;
}
#TopBar > span.logo,
#TopBar > span.phraseIn,
#TopBar >...

JavaScript

$(function () {

    /*-- show/hide admin */

    Mousetrap.bind('* a', function () {
        if ($('.controls').is(":visible")) {
            $('.controls').hide();
        } else {
            $('.controls').show();
        }
    });


    $('.controls').hide();

    
    /*-- Start Stop Button */

    function Stopper() {
        clearInterval(InOut);
        InOut = undefined;
        $(this).one('click', Starter);
        $(this).removeAttr('class');
        $(this).addClass('Stoppie');
        $('.controls a').html('Start');
    }

    function Starter() {
        InOut = window.setInterval(transition, 3000);
        $(this).one('click', Stopper);
        $(this).removeAttr('class');
        $(this).addClass('Startie');
        $('.controls a').html('Stop');
    }

    $('.controls a').addClass('Startie');
    $('.controls a').html('Stop');
    $('.controls a').one('click', Stopper);

    
    /*-- Initialize the filtering */

    $('#Grid').mixitup({
        multiFilter: true,
        showOnLoad: 'In',
        resizeContainer: false,
        minHeight: 666,
        

        onMixLoad: function () {
            $('#Grid').sortable('destroy');
            //sortable();
        },
        onMixEnd: function () {
            //$('#Grid').sortable('destroy');
            sortable();

        }
    });

    
    /*-- All the Drag and Drp Stuff */

    function sortable() {
        pizza = "undefined";

        /*-- first the sortable script with the over, change aqnd stop states */
        
        $('#Grid').sortable({
            placeholder: 'placeholder',
            items: '.mix',
            cursor: 'move',
            containment: $('#Grid'),
            
            over: function (event, ui) {

                if (!$('.controls a').hasClass('Stoppie')) {
                    //console.log('pizza=true over');
                    pizza = true;
                    clearInterval(InOut);
                    InOut = undefined;

                    if...