jQuery Media Gallery 2

by freedawirl

HTML

<div class="video-gallery-wrapper clearfix">
    <noscript data-video="http://www.youtube.com/watch?v=JBzhr1T3ADY" data-thumb="http://img.youtube.com/vi/JBzhr1T3ADY/mqdefault.jpg" data-alt="Peter on traffic impact modelling" data-caption="Peter on traffic impact modelling" class="gallery-video">&lt;div class="video-container"&gt;&lt;object data="http://www.youtube.com/v/JBzhr1T3ADY" type="application/x-shockwave-flash"&gt; Your browser does not support videos. &lt;/object&gt;&lt;/div&gt;</noscript>
    <noscript data-video="http://www.youtube.com/watch?v=0PZJJPytXxE" data-thumb="http://img.youtube.com/vi/0PZJJPytXxE/mqdefault.jpg" data-alt="Andrew on the Blackwall Tunnel flow" data-caption="Andrew on the Blackwall Tunnel flow" class="gallery-video">&lt;div class="video-container"&gt;&lt;object data="http://www.youtube.com/v/0PZJJPytXxE" type="application/x-shockwave-flash"&gt; Your browser does not support videos. &lt;/object&gt;&lt;/div&gt;</noscript>
    <noscript data-video="http://www.youtube.com/watch?v=NzSdtoMqasw" data-thumb="http://img.youtube.com/vi/NzSdtoMqasw/mqdefault.jpg" data-alt="Jenny and traffic light sequencing" data-caption="Jenny and traffic light sequencing" class="gallery-video">&lt;div class="video-container"&gt;&lt;object data="http://www.youtube.com/v/NzSdtoMqasw" type="application/x-shockwave-flash"&gt; Your browser does not support videos. &lt;/object&gt;&lt;/div&gt;</noscript>
    <noscript data-video="http://www.youtube.com/watch?v=tSErV-1kSgs" data-thumb="http://img.youtube.com/vi/tSErV-1kSgs/mqdefault.jpg" data-alt="Andrew on how we monitor the roads" data-caption="Andrew on how we monitor the roads" class="gallery-video">&lt;div class="video-container"&gt;&lt;object data="http://www.youtube.com/v/tSErV-1kSgs" type="application/x-shockwave-flash"&gt; Your browser does not support videos. &lt;/object&gt;&lt;/div&gt;</noscript>
    <noscript data-video="http://www.youtube.com/watch?v=6y8_3234tYM "...

CSS

/**************************************************
	C1 Accordion

* Author: Steven Swinbank
* Created: 23/04/2013
* Pattern library URL: https://tflonline.atlassian.net/wiki/display/NWP/C22+-+Video+gallery

**************************************************/
 .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    margin-bottom: 20px;
}
.video-container iframe, .video-container object, .video-container embed {
    padding: 5px;
    background: #fff;
    border: 1px solid #cccccc;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video-gallery-wrapper .video-gallery {
    padding-bottom: 15px;
    background: #eeeeee;
}
.video-gallery-wrapper .video-gallery .galleria-image-nav {
    display: none;
}
.video-gallery-wrapper .video-thumbs .video-thumb img {
    max-width: 100%;
    height: auto;
}
.video-gallery-wrapper .video-thumbs .video-thumb.selected .video-caption {
    color: #000;
    width: 100%;
}
.video-gallery-wrapper .video-thumbs .video-thumb.selected span {
    background: #ccc;
    color: #000;
}
.video-gallery-wrapper .video-thumbs .video-thumb:nth-child(3n+3) {
    margin-right: 0;
}
.video-gallery-wrapper .video-thumbs .video-thumb:first-child {
    padding-left: 0;
}
.video-gallery-wrapper .video-thumbs .video-thumb .video-caption {
    display: block;
    padding: 10px 10px 10px 10px;
    font-size: 10pt;
    float: left;
    color: #2070b0;
}
.video-gallery-wrapper .video-thumbs .video-thumb > a:after {
    clear: both;
    display: block;
    content:"";
}
.video-gallery-wrapper .nbs-flexisel-inner {
    margin-bottom: 15px;
}
.video-gallery-title {
    padding: 5px 5px 5px 8px;
    font-size: 14pt;
}
#flexiselDemo1, #flexiselDemo2, #flexiselDemo3 {
    display: none;
}
.nbs-flexisel-container {
    position: relative;
    max-width: 100%;
    *overflow: hidden;
}
.nbs-flexisel-ul {
    position:...

JavaScript

(function (o) {
    "use strict";
    tfl.logs.create("tfl.videoGallery: loaded");
    var transitionSpeed = 300;

    function getAltValue(vidNum) {
        var noScriptEls = $(".gallery-video");
        return $(noScriptEls[vidNum]).attr("data-alt");
    }

    function prependTitle(title, $galleryWrapper) {
        var videoGalleryHolder = $galleryWrapper.find(".video-gallery");
        var vidGalTitle = $galleryWrapper.find(".video-gallery-title");
        if (!vidGalTitle.length) {
            videoGalleryHolder.prepend("<div class='video-gallery-title'>" + title + "</div>");
        } else {
            vidGalTitle.text(title);
        }
    }

    function reScaleArrows() {
        var imageHeight = $(".video-thumbnail-image").first().height();
        var arrowRight = $(".nbs-flexisel-nav-right");
        var arrowLeft = $(".nbs-flexisel-nav-left");
        var arrowRightHeight = arrowRight.height();
        var halfArrowHeight = arrowRightHeight / 2;
        var newTop = imageHeight / 2 - halfArrowHeight;
        arrowRight.css("top", newTop);
        arrowLeft.css("top", newTop);
    }

    function slidingFunction($galleryWrapper) {
        $galleryWrapper.find(".video-thumbs").flexisel({
            enableResponsiveBreakpoints: true,
            clone: false,
            responsiveBreakpoints: {
                mobile: {
                    changePoint: 579,
                    visibleItems: 2
                },
                tablet: {
                    changePoint: 580,
                    visibleItems: 3
                },
                desktop: {
                    changePoint: 900,
                    visibleItems: 4
                }
            }
        });
        $(".video-thumbnail-image").first().load(function () {
            reScaleArrows();
        });
    }

    function createThumbs(allowReload, jsonData, galleryElementId, $galleryWrapper, galleriaId) {
        var noScriptEls = $galleryWrapper.find(".gallery-video");

       ...