active div overlay

by laurence fass

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
<div class="tint clearfix">&nbsp;</div>

<div class="preview clearfix">
   <h2 style="margin-left:20px">hover over an option to highlight then click to preview.</h2>
   <div class="preview-title"></div>
</div>
<div class="slide-container clearfix">

   <h1 class="slide-nav left-nav">L</h1>
   <h1 class="slide-nav right-nav">R</h1>

   <div class="slides-view">
      <div class="slides-inner clearfix">
          <div class="slides clearfix">
              <div class="slide">
                  <div class="description">Green Goblin</div>
              </div>
              <div class="slide">
                  <div class="description">Gambit</div>
              </div>
              <div class="slide">
                  <div class="description">Cat Woman</div>
              </div>
              <div class="slide">
                  <div class="description">Black Widow</div>
              </div>
              <div class="slide">
                  <div class="description">ant man</div>
              </div>
              <div class="slide">
                  <div class="description">avengers</div>
              </div>
              <div class="slide">
                 <div class="description">captain america</div>
              </div>
              <div class="slide">
                  <div class="description">Thor</div>
              </div>
              <div class="slide">
                  <div class="description">batman</div>
              </div>
              <div class="slide">
                  <div class="description">fantastic four</div>
              </div>
              <div class="slide">
                  <div class="description">iron man</div>
              </div>
              <div class="slide">
                  <div class="description">superman</div>
              </div>
              <div class="slide">
                  <div class="description">green lantern</div>
...

CSS

.slide-nav {
    font-size:1.5em;
    z-index:100;
    border:5px solid green;
    background-color:lightgreen;
    padding: 0 10px;
    border-radius:30px;
}
.slide-nav:hover {
    background-color:gray;
    border-color:darkgray;
}
.left-nav {
    position:absolute;
    top:25%;
    left:1%;
}
.right-nav {
    position:absolute;
    top:25%;
    right:1%;
}
body {
    position: relative;
}
.tint {
    width:100%;
    height:100%;
    position:absolute;
    background-color:rgba(0, 0, 0, 0.8);
    display:none;
}
.preview {
    margin-bottom:20px;
    min-height:100px;
    border:5px solid gray;
    background-color:lightgray;
    text-align: center;
    vertical-align:middle;
}
.preview .description {
    font-size:5em;
    margin:0px;
}
.clearfix {
    overflow: auto;
}
.slide-container {
    border:5px solid gray;
    background-color:lightgray;
    position:relative;
    width:100%;
    height:200px;
    box-sizing: border-box;
    overflow:auto;
}
.slides-view {
    position:relative;
    border: 5px solid gray;
    overflow-x: hidden;
    margin:20px 8%;
}
.slides-inner {
    width:2000px;
    box-sizing:border-box;
}
.slide {
    width:100px;
    height: 100px;
    margin:10px;
    float:left;
    background-color:yellow;
    border:5px solid gray;
    box-sizing: border-box;
}
.active-slide {
    position:absolute;
    background-color:rgba(0, 0, 0, 0.9);
    box-sizing: border-box;
    display:none;
    color:white;
    text-align: center;
    vertical-align: middle;
}
.active-title {
    font-size:1.5em;
    color:green;
}
.preview-title {
    font-size:3em;
    color:blue;
}

JavaScript

var pos = $(".slides-inner").offset().left;
var slide_width = $(".slide").outerWidth(true);
var lastSelection = null;

$(".left-nav").click(function (e) {
    if ($(".slide").last().offset().left > ($(".slides-view").offset().left + slide_width)) {
        pos -= slide_width;
        $(".slides-inner").offset({
            left: pos
        });
    }
});

$(".right-nav").click(function (e) {
    if (pos < $(".slides-view").offset().left) {
        pos += slide_width;
        $(".slides-inner").offset({
            "left": pos
        });
    }
});

$(".active-slide")
    .click(function (e) {

    $(this).hide();

    //update header and title
    $(".preview h2").html("This text is dynamically added in code");
    $(".preview-title").html($(this).children(".active-title").text());

    // record the last slide selected
    lastSelection = lastSlide;
})
    .mouseenter(function (e) {
    console.log("active mousenter");
    $(".tint").fadeIn(500);
})
    .mouseout(function (e) {
    console.log("active mouseout");
    $(".tint").hide();
    $(this).hide();
});


$(".slide")
    .mouseenter(_.throttle(function (e) {
    if (this == lastSelection) return;
    lastSlide = this;

    offset = $(this).offset();

    var active = $(".active-slide");
    active.fadeIn(250);

    var width = $(this).width();
    var height = $(this).height();
    active.css({
        "width": width * 1.75,
            "height": height * 1.5,
            "display": "table-cell"
    });

    $(".active-title").html($(this).text());
    active.offset({
        top: offset.top - (height * 1.5 - height) / 2,
        left: offset.left - (width * 1.75 - width) / 2
    });
}, 500, {
    'leading': false,
        'trailing': true
}));