isotope and youtube videos

with dropdowns

by Peter Aad

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.0/isotope.pkgd.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<div class="result"></div>
<div class="clearfix" style="padding:10px">
    <div style="float:left;width:30%;">
        <select class="filter-select-group form-control">
            <option disabled selected value="">Hearing Loss</option>
            <option data-filter=".sensorineural" value="sensorineural">Sensorineural</option>
            <option data-filter=".conductive" value="conductive">Conductive</option>
            <option data-filter=".single-sided-deafness" value="single-sided-deafness">Single-sided Deafness</option>
        </select>
    </div>
    <div style="float:left;width:30%;margin-left:5%">
        <select class="filter-select-group form-control">
            <option disabled selected value="">Storyteller</option>
            <option data-filter=".adult-or-loved-one" value="adult-or-loved-one">Adult/ Loved One</option>
            <option data-filter=".adult" value="adult">Adult</option>
        </select>
    </div>
    <div style="float:left;width:30%;margin-left:5%">
        <select class="filter-select-group form-control">
            <option disabled selected value="">Solution</option>
            <option data-filter=".cochlear-nucleus-implant" value="cochlear-nucleus-implant">Cochlear™ Nucleus® Implant</option>
            <option data-filter=".cochlear-nucleus-implant-mini-microphone-accessory" value="cochlear-nucleus-implant-mini-microphone-accessory">Cochlear™ Nucleus® Implant Mini Microphone Accessory</option>
            <option data-filter=".cochlear-nucleus-implant-wireless-phone-clip-accessory" value="cochlear-nucleus-implant-wireless-phone-clip-accessory">Cochlear™ Nucleus® Implant Wireless Phone Clip Accessory</option>
        ...

CSS

/* ---- isotope ---- */

/* clear fix */
 #grid:after {
    content:'';
    display: block;
    clear: both;
}
img {
    display: block;
    max-width: 100%;
    border:1px solid gray;
}
.grid-sizer, .element-item {
    width: 33%;
    float: left;
}
.element-item {
    padding:10px;
    box-sizing:border-box
}

JavaScript

// filter items on button click
$('.filter-select-group').on('change', function () {
    var filterValue = $("option:selected", this).attr('data-filter');
    $('#grid').isotope({
        filter: filterValue
    });
});

// change is-checked class on buttons
//$('.button-group').each(function (i, buttonGroup) {
//    var $buttonGroup = $(buttonGroup);
//    $buttonGroup.on('click', 'button', function () {
//        $buttonGroup.find('.active').removeClass('active');
//        $(this).addClass('active');
//   });
//});

$(function () {
    var elems = $(".element-item"),
        count = elems.length;
    var strVideo = "";
    elems.each(function (index) {
        var $this = $(this);
        var videoID = $this.attr("id");
        strVideo = strVideo + videoID + ",";
    });

    $.get("https://www.googleapis.com/youtube/v3/videos?part=snippet&id=" + strVideo + "&fields=items(snippet)&key=AIzaSyAOjFEcmmWwbVhk7vo-IG-U8pCFDA0z_Yo", function (data) {

        for (i = 0; i < count; i++) {
            var thumb = data.items[i].snippet.thumbnails.medium.url,
                title = $(".element-item:eq( " + i + " )").attr("data-title");

            $(".element-item:eq( " + i + " )").html("<a href='#' target='_blank'><img src='" + thumb + "' alt='" + title + "' /></a><p><span class='title'>" + title + "</span></p>");
        }
        buildGrid();
    });


});

function buildGrid() {
    // layout Isotope after each image loads
    var $grid = $('#grid').isotope({
        // set itemSelector so .grid-sizer is not used in layout
        itemSelector: '.element-item',
        layoutMode: 'fitRows',
        percentPosition: true,
        masonry: {
            // use element for option
            columnWidth: '.grid-sizer'
        }
    });

    $grid.imagesLoaded().progress(function () {
        $grid.isotope('layout');
    });

}