jquery-chameleon - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

CHANGELOG.md

 # Changelog
 
+## 1.3.0 - 2018-12-24
+### Added
+- Header Container 
+- Video Title
+
+### Changed
+- Moved Download Container to Header Container
+- Revised markers container structure to allow slide images in it
+- Revised theme color 
+- Revised the portion for video container and slide container from 6:6 to 5:7 in responsive design
+
+### Removed
+- Download button text
+
 ## 1.2.0 - 2018-10-24
@@ -4,0 +18,0 @@ ### Added

docs/chameleon.js

@@ -11,8 +11,8 @@ /**
  *
- * chameleon.js - synchronizing slides with videos
- * @author Wing Kam Wong - [e-mail]
- * @version - 1.2.0
+ * chameleon.js - A jQuery plugin to synchronize slide images with videos in JWPlayer 7, HTML5 or YouTube Player
+ * @author WONG, Wing Kam - [e-mail]
+ * @version - 1.3.0
  */
 ;
-(function(factory) {
+(function (factory) {
     'use strict';
@@ -26,3 +26,3 @@ if (typeof define === 'function' && define.amd) {
     }
-}(function($) {
+}(function ($) {
     var chameleon = 'chameleon';
@@ -38,2 +38,3 @@
             $this = $(this),
+            $headerContainer = '<div class="header-container"></div>',
             $videoContainer = '<div class="video-container"></div>',
@@ -66,7 +67,6 @@ $slideContainer = '<div class="slide-container"><img/></div>',
 
-
         var infoPanel = {
             'base': '<div class="dropdown-box"></div>',
             'header': '<div class="dropdown-header"></div>',
-            'button': '<div class="dropdown-btn-wrapper">Markers <span class="dropdown-btn down"></span></div>',
+            'button': '<div class="dropdown-btn-wrapper">Markers <span class="dropdown-btn up"></span></div>',
             'content': '<div class="dropdown-content"></div>'
@@ -77,2 +77,3 @@ };
             'base': '<a href="javascript:;" class="info-panel-slide"></a>',
+            'slideThumbnail': '<div class="slide-thumbnail"><img/></div>',
             'slideNumber': '<div class="slide-number"></div>',
@@ -84,32 +85,90 @@ 'slideTitle': '<div class="slide-title-wrapper"><div class="slide-title"></div></div>',
         function _initChameleon() {
-            if ($.isEmptyObject(o.chameleonContext)){
+            if ($.isEmptyObject(o.chameleonContext)) {
                 throw new Error("Chameleon chameleonContext hasn't been defined.");
             }
 
-             /*
-                Video Container
-            */
-            $chameleon.append($videoContainer);
-
             /*
-                Slide Container
+                Header Container
             */
-            $chameleon.append($slideContainer);
+            if (o.chameleonContext.title || !$.isEmptyObject($o.chameleonContext.download)) {
+                $chameleon.append($headerContainer);
 
-            /*
-                Info Panel Container
-            */
-            $chameleon.append($infoPanelContainer);
+                /*
+                  Video Title
+                */
+                if (o.chameleonContext.title) {
+                    $chameleon.find('.header-container').append('<div class="video-title"></div>');
+                    $chameleon.find('.video-title').html(o.chameleonContext.title);
+                }
 
+                /*
+                  Download Buttons
+                */
+                if (o.showDownloadPanel && !$.isEmptyObject(o.chameleonContext.download)) {
+                    $chameleon.find('.header-container').append($downloadContainer);
+
+                    if (typeof o.chameleonContext.download.slides != "undefined" &&
+                        typeof o.chameleonContext.download.slides === "object") {
+
+                        if (typeof o.chameleonContext.download.slides.url != "undefined" &&
+                            typeof o.chameleonContext.download.slides.url === "string") {
+                            $chameleon.find('.download-container').append('<a class="download-btn download-slides" target="_blank" download></a>');
+                            $chameleon.find('.download-slides').attr("href", o.chameleonContext.download.slides.url);
+                        }
+
+                        if ($chameleon.find('.download-slides').length > 0 &&
+                            typeof o.chameleonContext.download.slides.title != "undefined" &&
+                            typeof o.chameleonContext.download.slides.title === "string") {
+                            $chameleon.find('.download-slides').prepend($downloadIcon);
+                            $chameleon.find('.download-slides').attr("title", o.chameleonContext.download.slides.title);
+                        }
+
+
+                    }
+
+                    if (typeof o.chameleonContext.download.video != "undefined" &&
+                        typeof o.chameleonContext.download.video === "object") {
+                        if (typeof o.chameleonContext.download.video.url != "undefined" &&
+                            typeof o.chameleonContext.download.video.url === "string") {
+                            $chameleon.find('.download-container').append('<a class="download-btn download-video" target="_blank" download></a>');
+                            $chameleon.find('.download-video').attr("href", o.chameleonContext.download.video.url);
+                        }
+
+                        if ($chameleon.find('.download-video').length > 0 &&
+                            typeof o.chameleonContext.download.video.title != "undefined" &&
+                            typeof o.chameleonContext.download.video.title === "string") {
+                            $chameleon.find('.download-video').prepend($downloadIcon);
+                            $chameleon.find('.download-video').attr("title", o.chameleonContext.download.video.title);
+                        }
+                    }
+
+                    if (typeof o.chameleonContext.download.transcript != "undefined" &&
+                        typeof o.chameleonContext.download.transcript === "object") {
+                        if (typeof o.chameleonContext.download.transcript.url != "undefined" &&
+                            typeof o.chameleonContext.download.transcript.url === "string") {
+                            $chameleon.find('.download-container').append('<a class="download-btn download-transcript" target="_blank" download></a>');
+                            $chameleon.find('.download-transcript').attr("href", o.chameleonContext.download.transcript.url);
+                        }
+
+                        if ($chameleon.find('.download-transcript').length > 0 &&
+                            typeof o.chameleonContext.download.transcript.title != "undefined" &&
+                            typeof o.chameleonContext.download.transcript.title === "string") {
+                            $chameleon.find('.download-transcript').prepend($downloadIcon);
+                            $chameleon.find('.download-transcript').attr("title", o.chameleonContext.download.transcript.title);
+                        }
+                    }
+                }
+            }
+
             /*
-                Carousel Container
+                Video Container
             */
-            $chameleon.append($carouselContainer);
+            $chameleon.append($videoContainer);
 
             /*
-                Download Container
+                Slide Container
             */
-            $chameleon.append($downloadContainer);
+            $chameleon.append($slideContainer);
 
-            if(!o.responsive)
+            if (!o.responsive)
                 $chameleon.css("width", o.width).css("height", o.height);
@@ -126,5 +185,5 @@
                 if (regex.exec(o.chameleonContext)[1] == "json") {
-                    $.getJSON(o.chameleonContext, function(data) {
+                    $.getJSON(o.chameleonContext, function (data) {
                         $this.chameleonContext = data;
-                    }).done(function() {
+                    }).done(function () {
                         _initContextValidator();
@@ -138,16 +197,16 @@ });
 
-        function _initContextValidator(){
-            if(o.player == "jwplayer" && typeof $this.chameleonContext.jwplayerSetup === "undefined"){
+        function _initContextValidator() {
+            if (o.player == "jwplayer" && typeof $this.chameleonContext.jwplayerSetup === "undefined") {
                 throw new Error("JWPlayer setup object hasn't been defined in chameleonContext.");
-            } else if(o.player == "html5" && typeof $this.chameleonContext.html5Setup === "undefined"){
+            } else if (o.player == "html5" && typeof $this.chameleonContext.html5Setup === "undefined") {
                 throw new Error("HTML5 Player setup object hasn't been defined in chameleonContext.");
-            } else if(o.player == "youtube" && typeof $this.chameleonContext.youtubeSetup === "undefined"){
+            } else if (o.player == "youtube" && typeof $this.chameleonContext.youtubeSetup === "undefined") {
                 throw new Error("YouTube Player setup object hasn't been defined in chameleonContext.");
             }
 
-            if(typeof $this.chameleonContext.slides === "undefined" || typeof $this.chameleonContext.slides != "object"){
+            if (typeof $this.chameleonContext.slides === "undefined" || typeof $this.chameleonContext.slides != "object") {
                 throw new Error("slides hasn't been defined in chameleonContext.");
             }
 
-             if($this.chameleonContext.slides.length == 0){
+            if ($this.chameleonContext.slides.length == 0) {
                 throw new Error("No slide hasn't been defined in chameleonContext.");
@@ -166,151 +225,101 @@ }
 
-            // Building Slides Carousel
-            $chameleon.find('.carousel-container').append($previewSlideContainer).append($carouselControl);
+            /*
+                Building Carousel Container
+            */
+            if(o.showCarousel) {
+                $chameleon.append($carouselContainer);
+                            // Building Slides Carousel
+                $chameleon.find('.carousel-container').append($previewSlideContainer).append($carouselControl);
 
-            for (var i = 1; i <= $this.chameleonContext.slides.length; i++) {
-                var $cItem = $($carouselItem).append($previewImage);
-                $cItem.find('.slide-image').attr('data-index', i);
-                $cItem.find('.slide-image img').attr('src', $this.chameleonContext.slides[i - 1].img);
-                $cItem.find('.slide-image img').attr('title', $this.chameleonContext.slides[i - 1].title);
-                $cItem.find('.slide-image img').attr('alt', $this.chameleonContext.slides[i - 1].alt);
-                $cItem.find('.slide-number').html((i) + '/' + $this.chameleonContext.slides.length);
-                $chameleon.find('.preview-slide-container').append($cItem);
-            }
+                for (var i = 1; i <= $this.chameleonContext.slides.length; i++) {
+                    var $cItem = $($carouselItem).append($previewImage);
+                    $cItem.find('.slide-image').attr('data-index', i);
+                    $cItem.find('.slide-image img').attr('src', $this.chameleonContext.slides[i - 1].img);
+                    $cItem.find('.slide-image img').attr('title', $this.chameleonContext.slides[i - 1].title);
+                    $cItem.find('.slide-image img').attr('alt', $this.chameleonContext.slides[i - 1].alt);
+                    $cItem.find('.slide-number').html((i) + '/' + $this.chameleonContext.slides.length);
+                    $chameleon.find('.preview-slide-container').append($cItem);
+                }
 
-            $chameleon.find('.carousel-item:first').addClass("active");
+                $chameleon.find('.carousel-item:first').addClass("active");
 
-            // Building multiple sets of carousel items
+                // Building multiple sets of carousel items
 
-            if ($this.chameleonContext.slides.length > o.numOfCarouselSlide) {
-                $chameleon.find('.carousel-item').each(function() {
-                    var itemToClone = $(this);
-                    for (var i = 1; i < o.numOfCarouselSlide; i++) {
-                        itemToClone = itemToClone.next();
-                        if (!itemToClone.length) {
-                            itemToClone = $(this).siblings(':first');
+                if ($this.chameleonContext.slides.length > o.numOfCarouselSlide) {
+                    $chameleon.find('.carousel-item').each(function () {
+                        var itemToClone = $(this);
+                        for (var i = 1; i < o.numOfCarouselSlide; i++) {
+                            itemToClone = itemToClone.next();
+                            if (!itemToClone.length) {
+                                itemToClone = $(this).siblings(':first');
+                            }
+                            itemToClone.children(':first-child').clone()
+                                .addClass("js-chameleon-" + (i))
+                                .appendTo($(this));
                         }
-                        itemToClone.children(':first-child').clone()
-                            .addClass("js-chameleon-" + (i))
-                            .appendTo($(this));
-                    }
-                });
+                    });
 
-                var carouselInnerWidth = $chameleon.find('.carousel-item.active').width();
-                var imageWidth = $chameleon.find('.carousel-item.active .thumbnail-container:first').width();
-                $this.maxImgInARow = Math.floor(carouselInnerWidth / imageWidth);
+                    var carouselInnerWidth = $chameleon.find('.carousel-item.active').width();
+                    var imageWidth = $chameleon.find('.carousel-item.active .thumbnail-container:first').width();
+                    $this.maxImgInARow = Math.floor(carouselInnerWidth / imageWidth);
 
-                if ((o.numOfCarouselSlide > $this.maxImgInARow) && $this.maxImgInARow > 5) {
-                    $chameleon.find('.carousel-item .js-chameleon-3').addClass("current-slide");
-                } else {
-                    var total = $chameleon.find('.carousel-item.active .thumbnail-container').length;
-                    if (Math.floor(total / 2) >= 1) {
-                        var i = $chameleon.find('.carousel-item.active .thumbnail-container:nth-child( ' + Math.floor(total / 2) + ') .slide-image').attr("data-index");
-                        $chameleon.find('.carousel-item .js-chameleon-' + i + '').addClass("current-slide");
+                    if ((o.numOfCarouselSlide > $this.maxImgInARow) && $this.maxImgInARow > 5) {
+                        $chameleon.find('.carousel-item .js-chameleon-3').addClass("current-slide");
                     } else {
-                        $chameleon.find('.carousel-control').remove();
-                        $chameleon.find('.carousel-item .thumbnail-container').addClass("current-slide");
+                        var total = $chameleon.find('.carousel-item.active .thumbnail-container').length;
+                        if (Math.floor(total / 2) >= 1) {
+                            var i = $chameleon.find('.carousel-item.active .thumbnail-container:nth-child( ' + Math.floor(total / 2) + ') .slide-image').attr("data-index");
+                            $chameleon.find('.carousel-item .js-chameleon-' + i + '').addClass("current-slide");
+                        } else {
+                            $chameleon.find('.carousel-control').remove();
+                            $chameleon.find('.carousel-item .thumbnail-container').addClass("current-slide");
+                        }
                     }
-                }
 
-                $chameleon.find('.current-slide img').css("width", "120px");
+                    $chameleon.find('.current-slide img').css("width", "120px");
 
-                _updateSlideCarouel(0);
+                    _updateSlideCarouel(0);
 
-            } else {
-                $chameleon.find('.carousel-control').remove();
-                $chameleon.find('.carousel-item').addClass("active");
-            }
-
-            // Building Download Container
-            if(!$.isEmptyObject($this.chameleonContext.download)){
-
-                if(typeof $this.chameleonContext.download.slides === "undefined"
-                    && typeof $this.chameleonContext.download.videos === "undefined"
-                    && typeof $this.chameleonContext.download.transcript === "undefined"
-                ){
-                    $chameleon.find('.download-container').remove();
+                } else {
+                    $chameleon.find('.carousel-control').remove();
+                    $chameleon.find('.carousel-item').addClass("active");
                 }
 
-                if(typeof $this.chameleonContext.download.slides != "undefined"
-                    && typeof $this.chameleonContext.download.slides === "object"){
+            }
 
-                    if(typeof $this.chameleonContext.download.slides.url != "undefined"
-                        && typeof $this.chameleonContext.download.slides.url === "string" ){
-                        $chameleon.find('.download-container').append('<a class="download-btn download-slides" target="_blank" download>Download slides</a>');
-                        $chameleon.find('.download-slides').attr("href", $this.chameleonContext.download.slides.url);
-                    }
+            /*
+                Building Info Panel Container
+            */
+           if(o.showMarkers && o.responsive) {
+                $chameleon.append($infoPanelContainer);
+                
+                // Building Info Panel
+                $infoPanelContainer = $chameleon.find('.info-panel');
+                $infoPanel = $(infoPanel.base);
+                $header = $(infoPanel.header).append(infoPanel.button);
+                $content = $(infoPanel.content);
+                $ip = $infoPanel.append($header).append($content);
+                $infoPanelContainer.append($ip);
 
-                    if($chameleon.find('.download-slides').length > 0
-                        && typeof $this.chameleonContext.download.slides.title != "undefined"
-                        && typeof $this.chameleonContext.download.slides.title === "string" ){
-                        $chameleon.find('.download-slides').html($this.chameleonContext.download.slides.title);
-                        $chameleon.find('.download-slides').prepend($downloadIcon);
-                        $chameleon.find('.download-slides').attr("title", $this.chameleonContext.download.slides.title);
+                // Building Info Panel - slide
+                for (var i = 0; i < $this.chameleonContext.slides.length; i++) {
+                    $infoPanelSlide = $(infoPanelSlide.base)
+                        .append(infoPanelSlide.slideNumber)
+                        .append(infoPanelSlide.slideThumbnail)
+                        .append(infoPanelSlide.slideTime)
+                        .append(infoPanelSlide.slideTitle);
+                    $infoPanelSlide.attr("data-index", i);
+                    $infoPanelSlide.find('.slide-number').html("#" + (i + 1));
+                    $infoPanelSlide.find('.slide-thumbnail img').attr("src", $this.chameleonContext.slides[i].img);
+                    $infoPanelSlide.find('.slide-time').html($this.chameleonContext.slides[i].time);
+                    if (typeof $this.chameleonContext.slides[i].title === "undefined" || $this.chameleonContext.slides[i].title == '') {
+                        $infoPanelSlide.find('.slide-title').html("-");
+                    } else {
+                        $infoPanelSlide.find('.slide-title').html($this.chameleonContext.slides[i].title);
                     }
-
-
+                    $chameleon.find('.dropdown-content').append($infoPanelSlide);
                 }
 
-                if(typeof $this.chameleonContext.download.video != "undefined"
-                    && typeof $this.chameleonContext.download.video === "object"){
-                    if(typeof $this.chameleonContext.download.video.url != "undefined"
-                        && typeof $this.chameleonContext.download.video.url === "string" ){
-                        $chameleon.find('.download-container').append('<a class="download-btn download-video" target="_blank" download>Download video</a>');
-                        $chameleon.find('.download-video').attr("href", $this.chameleonContext.download.video.url);
-                    }
+           }
 
-                    if($chameleon.find('.download-video').length > 0
-                        && typeof $this.chameleonContext.download.video.title != "undefined"
-                        && typeof $this.chameleonContext.download.video.title === "string" ){
-                        $chameleon.find('.download-video').html($this.chameleonContext.download.video.title);
-                        $chameleon.find('.download-video').prepend($downloadIcon);
-                        $chameleon.find('.download-video').attr("title", $this.chameleonContext.download.video.title);
-                    }
-                }
-
-                if(typeof $this.chameleonContext.download.transcript != "undefined"
-                    && typeof $this.chameleonContext.download.transcript === "object"){
-                    if(typeof $this.chameleonContext.download.transcript.url != "undefined"
-                        && typeof $this.chameleonContext.download.transcript.url === "string" ){
-                        $chameleon.find('.download-container').append('<a class="download-btn download-transcript" target="_blank" download>Download transcript</a>');
-                        $chameleon.find('.download-transcript').attr("href", $this.chameleonContext.download.transcript.url);
-                    }
-
-                    if($chameleon.find('.download-transcript').length > 0
-                        && typeof $this.chameleonContext.download.transcript.title != "undefined"
-                        && typeof $this.chameleonContext.download.transcript.title === "string" ){
-                        $chameleon.find('.download-transcript').html($this.chameleonContext.download.transcript.title);
-                        $chameleon.find('.download-transcript').prepend($downloadIcon);
-                        $chameleon.find('.download-transcript').attr("title", $this.chameleonContext.download.transcript.title);
-                    }
-                }
-            }
-
-            // Building Info Panel
-            $infoPanelContainer =  $chameleon.find('.info-panel');
-            $infoPanel = $(infoPanel.base);
-            $header = $(infoPanel.header).append(infoPanel.button);
-            $content = $(infoPanel.content);
-            $ip = $infoPanel.append($header).append($content);
-            $infoPanelContainer.append($ip);
-
-            // Building Info Panel - slide
-            for (var i = 0; i < $this.chameleonContext.slides.length; i++) {
-                $infoPanelSlide = $(infoPanelSlide.base)
-                                .append(infoPanelSlide.slideNumber)
-                                .append(infoPanelSlide.slideTime)
-                                .append(infoPanelSlide.slideTitle);
-                $infoPanelSlide.attr("data-index", i);
-                $infoPanelSlide.find('.slide-number').html("#" + (i+1));
-                $infoPanelSlide.find('.slide-time').html($this.chameleonContext.slides[i].time);
-                if(typeof $this.chameleonContext.slides[i].title === "undefined" || $this.chameleonContext.slides[i].title == ''){
-                    $infoPanelSlide.find('.slide-title').html("-");
-                }else{
-                    $infoPanelSlide.find('.slide-title').html($this.chameleonContext.slides[i].title);
-                }
-                $chameleon.find('.dropdown-content').append($infoPanelSlide);
-            }
-
-
-
             // Register Click Events
@@ -324,7 +333,7 @@ _registerClickEvents();
 
-        function _initPlayer(){
+        function _initPlayer() {
             /*
                 Create container for a specific player
             */
-            switch(o.player){
+            switch (o.player) {
                 case 'jwplayer':
@@ -351,7 +360,7 @@ $chameleon.find('.video-container').append(jw.base);
 
-        function _initJWPlayer(){
+        function _initJWPlayer() {
 
-            $this.jwPlayerInst = jwplayer("jwplayer").setup( $this.chameleonContext.jwplayerSetup);
+            $this.jwPlayerInst = jwplayer("jwplayer").setup($this.chameleonContext.jwplayerSetup);
 
-            $this.jwPlayerInst.onTime(function() {
+            $this.jwPlayerInst.onTime(function () {
                 var time = $this.jwPlayerInst.getPosition();
@@ -361,3 +370,3 @@ _slideCarouselHandler(time);
 
-            $this.jwPlayerInst.onComplete(function() {
+            $this.jwPlayerInst.onComplete(function () {
                 _setSlide(0);
@@ -368,6 +377,6 @@ _updateSlideCarouel(0);
 
-        function _initHTML5Player(){
+        function _initHTML5Player() {
             var o = $this.chameleonContext.html5Setup;
             var $video = $chameleon.find('.chameleon-html5-video');
-            if(!$.isArray(o.sources)){
+            if (!$.isArray(o.sources)) {
                 $html5Source = $(html5.source);
@@ -379,4 +388,4 @@ $html5Source.attr({
                 $video.append($html5Source);
-            }else {
-                for(var i=0; i<o.sources.length; i++){
+            } else {
+                for (var i = 0; i < o.sources.length; i++) {
                     $html5Source = $(html5.source);
@@ -391,7 +400,7 @@ $html5Source.attr({
 
-            if(o.poster != null && o.poster != ''){
-                 $video.attr("poster", o.poster);
+            if (o.poster != null && o.poster != '') {
+                $video.attr("poster", o.poster);
             }
 
-            $video.bind('timeupdate', function() {
+            $video.bind('timeupdate', function () {
                 var time = $(this).get(0).currentTime;
@@ -401,3 +410,3 @@ _slideCarouselHandler(time);
 
-            $video.bind('ended', function() {
+            $video.bind('ended', function () {
                 _setSlide(0);
@@ -408,27 +417,27 @@ _updateSlideCarouel(0);
 
-        function _initYoutubePlayer(){
+        function _initYoutubePlayer() {
             var $video = $chameleon.find('.chameleon-youtube-video');
             var o = $this.chameleonContext.youtubeSetup;
 
-            $.getScript('//www.youtube.com/iframe_api').fail(function( jqxhr, settings, exception ) {
-                console.log(exception);
-            })
-            .done(function () {
-                window.onYouTubeIframeAPIReady = function () {
-                   $this.ytPlayer = new YT.Player('chameleon-youtube-video', {
-                      height: '100%',
-                      width: '100%',
-                      videoId: o.videoId,
-                      events: {
-                        'onReady': function(){
-                            _bindYTonTimeChange();
-                        }
-                      }
-                  });
-                }
-            });
+            $.getScript('//www.youtube.com/iframe_api').fail(function (jqxhr, settings, exception) {
+                    console.log(exception);
+                })
+                .done(function () {
+                    window.onYouTubeIframeAPIReady = function () {
+                        $this.ytPlayer = new YT.Player('chameleon-youtube-video', {
+                            height: '100%',
+                            width: '100%',
+                            videoId: o.videoId,
+                            events: {
+                                'onReady': function () {
+                                    _bindYTonTimeChange();
+                                }
+                            }
+                        });
+                    }
+                });
         }
 
-        function _bindYTonTimeChange(){
-            setInterval(function(){
+        function _bindYTonTimeChange() {
+            setInterval(function () {
                 _slideCarouselHandler($this.ytPlayer.getCurrentTime());
@@ -440,3 +449,3 @@ }, 1000);
         function _registerClickEvents() {
-            $chameleon.find('.slide-image').click(function() {
+            $chameleon.find('.slide-image').click(function () {
                 var id = $(this).attr("data-index");
@@ -446,3 +455,3 @@ _seek(_parseStrTime($this.chameleonContext.slides[id - 1].time));
 
-            $chameleon.find('.carousel-control.prev').click(function() {
+            $chameleon.find('.carousel-control.prev').click(function () {
                 var id = $('.active .current-slide .slide-image').attr("data-index");
@@ -456,3 +465,3 @@ id = parseInt(id) - 1;
 
-            $chameleon.find('.carousel-control.next').click(function() {
+            $chameleon.find('.carousel-control.next').click(function () {
                 var id = $chameleon.find('.active .current-slide .slide-image').attr("data-index");
@@ -465,3 +474,3 @@ if (id == $this.chameleonContext.slides.length) {
 
-            $chameleon.find('.info-panel-slide').click(function(){
+            $chameleon.find('.info-panel-slide').click(function () {
                 var me = $(this);
@@ -472,8 +481,8 @@ var id = me.attr("data-index");
 
-            $chameleon.find('.info-panel .dropdown-btn-wrapper').click(function(){
+            $chameleon.find('.info-panel .dropdown-btn-wrapper').click(function () {
                 var me = $(this).find('.dropdown-btn');
-                if(me.hasClass("down")){
+                if (me.hasClass("down")) {
                     me.parent().parent().parent().find(".dropdown-content").slideDown();
                     me.removeClass("down").addClass("up");
-                }else{
+                } else {
                     me.parent().parent().parent().find(".dropdown-content").slideUp();
@@ -485,4 +494,4 @@ me.removeClass("up").addClass("down");
 
-        function _seek(time){
-            switch(o.player){
+        function _seek(time) {
+            switch (o.player) {
                 case 'jwplayer':
@@ -507,10 +516,11 @@ $this.jwPlayerInst.seek(time)
 
-        function _responsify(){
-            if(o.responsive){
-                $chameleon.find('.video-container').addClass("col-md-6 col-xs-12");
+        function _responsify() {
+            if (o.responsive) {
+                $chameleon.addClass("chameleon-responsive");
+                $chameleon.find('.video-container').addClass("col-md-5 col-xs-12");
                 $chameleon.find('.video-container').css({
                     'padding': '0px',
-                    'height': '300px'
+                    'height': '400px'
                 });
-                $chameleon.find('.slide-container').addClass("col-md-6 col-xs-12");
+                $chameleon.find('.slide-container').addClass("col-md-7 col-xs-12");
 
@@ -523,17 +533,20 @@ $chameleon.find('.slide-container img').css({
 
+                $chameleon.find('.header-container').addClass('col-xs-12');
+                $chameleon.find('.header-container .video-title').addClass('col-xs-6');
+                $chameleon.find('.header-container .download-container').addClass("col-xs-6");
                 $chameleon.find('.info-panel').addClass("col-xs-12");
                 $chameleon.find('.carousel-container').addClass("col-xs-12 hidden-xs");
-                $chameleon.find('.download-container').addClass("col-xs-12");
-                $chameleon.find('.download-btn').addClass("col-xs-12 col-sm-4");
 
-                 $chameleon.find('.download-btn').css({
+                $chameleon.find('.download-btn').css({
                     'margin': '10px 0px'
-                 });
+                });
 
-                $chameleon.find('.info-panel-slide .slide-number').addClass("col-xs-12 col-sm-2");
-                $chameleon.find('.info-panel-slide .slide-time').addClass("col-xs-12 col-sm-2");
-                $chameleon.find('.info-panel-slide .slide-title-wrapper').addClass("col-xs-12 col-sm-8");
+                $chameleon.find('.info-panel-slide').addClass("col-xs-12 col-sm-6 col-lg-4");
+                $chameleon.find('.info-panel-slide .slide-number').addClass("col-xs-12 col-md-1");
+                $chameleon.find('.info-panel-slide .slide-thumbnail').addClass("col-xs-12 col-sm-6 col-lg-4");
+                $chameleon.find('.info-panel-slide .slide-time').addClass("col-xs-2");
+                $chameleon.find('.info-panel-slide .slide-title-wrapper').addClass("col-xs-12 col-lg-6");
 
 
-            }else{
+            } else {
                 $chameleon.find('.video-container').css({
@@ -545,3 +558,3 @@ 'float': 'left',
 
-                 $chameleon.find('.slide-container').css({
+                $chameleon.find('.slide-container').css({
                     'width': '50%',
@@ -552,4 +565,4 @@ 'height': '100%',
 
-                 $chameleon.find('.download-container').css({
-                    'width': '100%',
+                $chameleon.find('.download-container').css({
+                    'width': '50%',
                     'height': '40px',
@@ -560,4 +573,5 @@ 'float': 'left',
 
-                 $chameleon.find('.download-btn').css({
-                    'width': '30%'
+                $chameleon.find('.video-title').css({
+                    'width': '50%',
+                    'float': 'left'
                 })
@@ -604,4 +618,4 @@
                 }
-                 _setSlide($this.chameleonContext.slides.length - 1);
-                 _highlightMarkers($this.chameleonContext.slides.length - 1)
+                _setSlide($this.chameleonContext.slides.length - 1);
+                _highlightMarkers($this.chameleonContext.slides.length - 1)
             } else {
@@ -614,3 +628,3 @@ for (var i = 0, j = 1; i < $this.chameleonContext.slides.length; i++, j++) {
                         }
-                         _setSlide(i);
+                        _setSlide(i);
                     }
@@ -621,3 +635,3 @@ }
 
-        function _setSlide(index){
+        function _setSlide(index) {
             $chameleon.find('.slide-container img').attr('src', $this.chameleonContext.slides[index].img);
@@ -628,5 +642,5 @@ $chameleon.find('.slide-container img').attr('title', $this.chameleonContext.slides[index].title);
 
-        function _highlightMarkers(index){
-           $chameleon.find('.chameleon-hightlighted').removeClass('chameleon-hightlighted');
-           $chameleon.find(".info-panel-slide[data-index='" + index +  "']").addClass('chameleon-hightlighted');
+        function _highlightMarkers(index) {
+            $chameleon.find('.chameleon-hightlighted').removeClass('chameleon-hightlighted');
+            $chameleon.find(".info-panel-slide[data-index='" + index + "']").addClass('chameleon-hightlighted');
         }
@@ -641,3 +655,3 @@
 
-    $.fn[chameleon] = function(o) {
+    $.fn[chameleon] = function (o) {
         if (typeof arguments[0] === 'string') {
@@ -647,3 +661,3 @@ var methodName = arguments[0];
             var returnVal;
-            this.each(function() {
+            this.each(function () {
                 if ($.data(this, 'plugin_' + chameleon) && typeof $.data(this, 'plugin_' + chameleon)[methodName] === 'function') {
@@ -661,3 +675,3 @@ returnVal = $.data(this, 'plugin_' + chameleon)[methodName].apply(this, args);
         } else if (typeof o === "object" || !o) {
-            return this.each(function() {
+            return this.each(function () {
                 if (!$.data(this, 'plugin_' + chameleon)) {
@@ -671,9 +685,12 @@ $.data(this, 'plugin_' + chameleon, new Chameleon(this, o));
     $.fn[chameleon].defaults = {
-        width: '968px',                    // width of chameleon container
-        height: '270px',                   // height of chameleon container
-        chameleonContext: {},              // slides JSON file / object
-        numOfCarouselSlide: 5,              // number of slides showing in carousel
+        width: '968px', // width of chameleon container
+        height: '270px', // height of chameleon container
+        chameleonContext: {}, // slides JSON file / object
+        numOfCarouselSlide: 5, // number of slides showing in carousel
         responsive: false,
-        player: 'html5'
+        player: 'html5',
+        showMarkers: false,
+        showCarousel: false,
+        showDownloadPanel: false,
     };
-}));
+}));

docs/chameleon.min.js

@@ -11,7 +11,7 @@ /**
  *
- * chameleon.js - synchronizing slides with JWPlayer Video
- * @author Wing Kam Wong - [e-mail]
- * @version - 1.2.0
+ * chameleon.js - A jQuery plugin to synchronize slide images with videos in JWPlayer 7, HTML5 or YouTube Player
+ * @author WONG, Wing Kam - [e-mail]
+ * @version - 1.3.0
  */
 
-!function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):"undefined"!=typeof exports?module.exports=e(require("jquery")):e(jQuery)}(function($){var I="chameleon";function i(e,d){$(e);d=$.extend({},$.fn[I].defaults,d);var a=$(".chameleon"),l=$(this),n='<div class="video-container"></div>',t='<div class="slide-container"><img/></div>',s='<div class="info-panel"></div>',o='<div class="carousel-container"></div>',i='<div class="download-container"></div>',r='<div class="preview-slide-container"></div>',c='<div class="carousel-item"></div>',h='<div class="thumbnail-container"><div class="slide-image"><img/></div><div class="slide-number"></div></div>',f='<a class="carousel-control prev"></a><a class="carousel-control next"></a>',m='<span class="download-icon"></span>',p={base:'<div id="jwplayer" class="chameleon-jwplayer-video"></div>'},u={base:'<video id="chameleon-html5-video" class="chameleon-html5-video" controls preload="auto" width="100%" height="100%"/>',source:"<source/>"},w={base:'<div id="chameleon-youtube-video" class="chameleon-youtube-video" width="100%" height="100%" frameborder="0" allowfullscreen></div>'},v={base:'<div class="dropdown-box"></div>',header:'<div class="dropdown-header"></div>',button:'<div class="dropdown-btn-wrapper">Markers <span class="dropdown-btn down"></span></div>',content:'<div class="dropdown-content"></div>'},x={base:'<a href="javascript:;" class="info-panel-slide"></a>',slideNumber:'<div class="slide-number"></div>',slideTitle:'<div class="slide-title-wrapper"><div class="slide-title"></div></div>',slideTime:'<div class="slide-time"></div>'};function C(){if("jwplayer"==d.player&&void 0===l.chameleonContext.jwplayerSetup)throw new Error("JWPlayer setup object hasn't been defined in chameleonContext.");if("html5"==d.player&&void 0===l.chameleonContext.html5Setup)throw new Error("HTML5 Player setup object hasn't been defined in chameleonContext.");if("youtube"==d.player&&void 0===l.chameleonContext.youtubeSetup)throw new Error("YouTube Player setup object hasn't been defined in chameleonContext.");if(void 0===l.chameleonContext.slides||"object"!=typeof l.chameleonContext.slides)throw new Error("slides hasn't been defined in chameleonContext.");if(0==l.chameleonContext.slides.length)throw new Error("No slide hasn't been defined in chameleonContext.");!function(){(function(){switch(d.player){case"jwplayer":a.find(".video-container").append(p.base),l.jwPlayerInst=jwplayer("jwplayer").setup(l.chameleonContext.jwplayerSetup),l.jwPlayerInst.onTime(function(){var e=l.jwPlayerInst.getPosition();j(e)}),l.jwPlayerInst.onComplete(function(){S(0),b(0)});break;case"html5":a.find(".video-container").append(u.base),function(){var e=l.chameleonContext.html5Setup,n=a.find(".chameleon-html5-video");if($.isArray(e.sources))for(var t=0;t<e.sources.length;t++)$html5Source=$(u.source),$html5Source.attr({src:e.sources[t].file,type:e.sources[t].type}),n.append($html5Source);else $html5Source=$(u.source),$html5Source.attr({src:e.sources.file,type:e.sources.type}),n.append($html5Source);null!=e.poster&&""!=e.poster&&n.attr("poster",e.poster);n.bind("timeupdate",function(){var e=$(this).get(0).currentTime;j(e)}),n.bind("ended",function(){S(0),b(0)})}();break;case"youtube":a.find(".video-container").append(w.base),function(){a.find(".chameleon-youtube-video");var e=l.chameleonContext.youtubeSetup;$.getScript("//www.youtube.com/iframe_api").fail(function(e,n,t){console.log(t)}).done(function(){window.onYouTubeIframeAPIReady=function(){l.ytPlayer=new YT.Player("chameleon-youtube-video",{height:"100%",width:"100%",videoId:e.videoId,events:{onReady:function(){setInterval(function(){j(l.ytPlayer.getCurrentTime())},1e3)}}})}})}();break;default:throw new Error(d.player+" is not supported")}})(),S(0),a.find(".carousel-container").append(r).append(f);for(var e=1;e<=l.chameleonContext.slides.length;e++){var n=$(c).append(h);n.find(".slide-image").attr("data-index",e),n.find(".slide-image img").attr("src",l.chameleonContext.slides[e-1].img),n.find(".slide-image img").attr("title",l.chameleonContext.slides[e-1].title),n.find(".slide-image img").attr("alt",l.chameleonContext.slides[e-1].alt),n.find(".slide-number").html(e+"/"+l.chameleonContext.slides.length),a.find(".preview-slide-container").append(n)}if(a.find(".carousel-item:first").addClass("active"),l.chameleonContext.slides.length>d.numOfCarouselSlide){a.find(".carousel-item").each(function(){for(var e=$(this),n=1;n<d.numOfCarouselSlide;n++)(e=e.next()).length||(e=$(this).siblings(":first")),e.children(":first-child").clone().addClass("js-chameleon-"+n).appendTo($(this))});var t=a.find(".carousel-item.active").width(),o=a.find(".carousel-item.active .thumbnail-container:first").width();if(l.maxImgInARow=Math.floor(t/o),d.numOfCarouselSlide>l.maxImgInARow&&5<l.maxImgInARow)a.find(".carousel-item .js-chameleon-3").addClass("current-slide");else{var i=a.find(".carousel-item.active .thumbnail-container").length;if(1<=Math.floor(i/2)){var e=a.find(".carousel-item.active .thumbnail-container:nth-child( "+Math.floor(i/2)+") .slide-image").attr("data-index");a.find(".carousel-item .js-chameleon-"+e).addClass("current-slide")}else a.find(".carousel-control").remove(),a.find(".carousel-item .thumbnail-container").addClass("current-slide")}a.find(".current-slide img").css("width","120px"),b(0)}else a.find(".carousel-control").remove(),a.find(".carousel-item").addClass("active");$.isEmptyObject(l.chameleonContext.download)||(void 0===l.chameleonContext.download.slides&&void 0===l.chameleonContext.download.videos&&void 0===l.chameleonContext.download.transcript&&a.find(".download-container").remove(),void 0!==l.chameleonContext.download.slides&&"object"==typeof l.chameleonContext.download.slides&&(void 0!==l.chameleonContext.download.slides.url&&"string"==typeof l.chameleonContext.download.slides.url&&(a.find(".download-container").append('<a class="download-btn download-slides" target="_blank" download>Download slides</a>'),a.find(".download-slides").attr("href",l.chameleonContext.download.slides.url)),0<a.find(".download-slides").length&&void 0!==l.chameleonContext.download.slides.title&&"string"==typeof l.chameleonContext.download.slides.title&&(a.find(".download-slides").html(l.chameleonContext.download.slides.title),a.find(".download-slides").prepend(m),a.find(".download-slides").attr("title",l.chameleonContext.download.slides.title))),void 0!==l.chameleonContext.download.video&&"object"==typeof l.chameleonContext.download.video&&(void 0!==l.chameleonContext.download.video.url&&"string"==typeof l.chameleonContext.download.video.url&&(a.find(".download-container").append('<a class="download-btn download-video" target="_blank" download>Download video</a>'),a.find(".download-video").attr("href",l.chameleonContext.download.video.url)),0<a.find(".download-video").length&&void 0!==l.chameleonContext.download.video.title&&"string"==typeof l.chameleonContext.download.video.title&&(a.find(".download-video").html(l.chameleonContext.download.video.title),a.find(".download-video").prepend(m),a.find(".download-video").attr("title",l.chameleonContext.download.video.title))),void 0!==l.chameleonContext.download.transcript&&"object"==typeof l.chameleonContext.download.transcript&&(void 0!==l.chameleonContext.download.transcript.url&&"string"==typeof l.chameleonContext.download.transcript.url&&(a.find(".download-container").append('<a class="download-btn download-transcript" target="_blank" download>Download transcript</a>'),a.find(".download-transcript").attr("href",l.chameleonContext.download.transcript.url)),0<a.find(".download-transcript").length&&void 0!==l.chameleonContext.download.transcript.title&&"string"==typeof l.chameleonContext.download.transcript.title&&(a.find(".download-transcript").html(l.chameleonContext.download.transcript.title),a.find(".download-transcript").prepend(m),a.find(".download-transcript").attr("title",l.chameleonContext.download.transcript.title))));s=a.find(".info-panel"),$infoPanel=$(v.base),$header=$(v.header).append(v.button),$content=$(v.content),$ip=$infoPanel.append($header).append($content),s.append($ip);for(var e=0;e<l.chameleonContext.slides.length;e++)$infoPanelSlide=$(x.base).append(x.slideNumber).append(x.slideTime).append(x.slideTitle),$infoPanelSlide.attr("data-index",e),$infoPanelSlide.find(".slide-number").html("#"+(e+1)),$infoPanelSlide.find(".slide-time").html(l.chameleonContext.slides[e].time),void 0===l.chameleonContext.slides[e].title||""==l.chameleonContext.slides[e].title?$infoPanelSlide.find(".slide-title").html("-"):$infoPanelSlide.find(".slide-title").html(l.chameleonContext.slides[e].title),a.find(".dropdown-content").append($infoPanelSlide);a.find(".slide-image").click(function(){var e=$(this).attr("data-index");g(y(l.chameleonContext.slides[e-1].time))}),a.find(".carousel-control.prev").click(function(){var e=$(".active .current-slide .slide-image").attr("data-index");0==(e=parseInt(e)-1)&&(e=l.chameleonContext.slides.length),g(y(l.chameleonContext.slides[e-1].time))}),a.find(".carousel-control.next").click(function(){var e=a.find(".active .current-slide .slide-image").attr("data-index");e==l.chameleonContext.slides.length&&(e=0),g(y(l.chameleonContext.slides[e].time))}),a.find(".info-panel-slide").click(function(){var e=$(this),n=e.attr("data-index");g(y(l.chameleonContext.slides[n].time))}),a.find(".info-panel .dropdown-btn-wrapper").click(function(){var e=$(this).find(".dropdown-btn");e.hasClass("down")?(e.parent().parent().parent().find(".dropdown-content").slideDown(),e.removeClass("down").addClass("up")):(e.parent().parent().parent().find(".dropdown-content").slideUp(),e.removeClass("up").addClass("down"))}),d.responsive?(a.find(".video-container").addClass("col-md-6 col-xs-12"),a.find(".video-container").css({padding:"0px",height:"300px"}),a.find(".slide-container").addClass("col-md-6 col-xs-12"),a.find(".slide-container img").css({"margin-left":"auto","margin-right":"auto",padding:"0px"}),a.find(".info-panel").addClass("col-xs-12"),a.find(".carousel-container").addClass("col-xs-12 hidden-xs"),a.find(".download-container").addClass("col-xs-12"),a.find(".download-btn").addClass("col-xs-12 col-sm-4"),a.find(".download-btn").css({margin:"10px 0px"}),a.find(".info-panel-slide .slide-number").addClass("col-xs-12 col-sm-2"),a.find(".info-panel-slide .slide-time").addClass("col-xs-12 col-sm-2"),a.find(".info-panel-slide .slide-title-wrapper").addClass("col-xs-12 col-sm-8")):(a.find(".video-container").css({float:"left",width:"50%",height:"100%"}),a.find(".slide-container").css({width:"50%",height:"100%",float:"left"}),a.find(".download-container").css({width:"100%",height:"40px",float:"left","line-height":"40px"}),a.find(".download-btn").css({width:"30%"}),a.find(".info-panel .slide-number, .info-panel .slide-time").css({width:"8.33333333%",float:"left","text-align":"center"}),a.find(".info-panel .slide-title-wrapper").css({width:"83.33333333%",float:"left","text-align":"center"}),a.find(".info-panel .slide-title").css({"padding-left":"30px"}))}()}function g(e){switch(d.player){case"jwplayer":l.jwPlayerInst.seek(e);break;case"html5":var n=a.find(".chameleon-html5-video").get(0);n.currentTime=e,n.play();break;case"youtube":l.ytPlayer.seekTo(e);break;default:throw new Error(d.player+" is not supported")}}function b(e){e=parseInt(e)+1;var n=$('.current-slide .slide-image[data-index="'+e+'"]').parent().parent();$(".carousel-item.active").removeClass("active"),n.addClass("active")}function y(e){var n=e.split(":");return parseInt(60*n[0]*60)+parseInt(60*n[1])+parseInt(n[2])}function j(e){if(e>=y(l.chameleonContext.slides[l.chameleonContext.slides.length-1].time))l.chameleonContext.slides.length>d.numOfCarouselSlide&&b(l.chameleonContext.slides.length-1),S(l.chameleonContext.slides.length-1),P(l.chameleonContext.slides.length-1);else for(var n=0,t=1;n<l.chameleonContext.slides.length;n++,t++)e>=y(l.chameleonContext.slides[n].time)&&e<y(l.chameleonContext.slides[t].time)&&(l.chameleonContext.slides.length>d.numOfCarouselSlide&&(b(n),P(n)),S(n))}function S(e){a.find(".slide-container img").attr("src",l.chameleonContext.slides[e].img),a.find(".slide-container img").attr("title",l.chameleonContext.slides[e].title),a.find(".slide-container img").attr("alt",l.chameleonContext.slides[e].alt)}function P(e){a.find(".chameleon-hightlighted").removeClass("chameleon-hightlighted"),a.find(".info-panel-slide[data-index='"+e+"']").addClass("chameleon-hightlighted")}!function(){if($.isEmptyObject(d.chameleonContext))throw new Error("Chameleon chameleonContext hasn't been defined.");if(a.append(n),a.append(t),a.append(s),a.append(o),a.append(i),d.responsive||a.css("width",d.width).css("height",d.height),"object"==typeof d.chameleonContext&&(l.chameleonContext=d.chameleonContext,C()),"string"==typeof d.chameleonContext){if("json"!=/(?:\.([^.]+))?$/.exec(d.chameleonContext)[1])throw new Error("JSON file required.");$.getJSON(d.chameleonContext,function(e){l.chameleonContext=e}).done(function(){C()})}}()}$.fn[I]=function(e){if("string"==typeof e){var n,t=e,o=Array.prototype.slice.call(arguments,1);return this.each(function(){if(!$.data(this,"plugin_"+I)||"function"!=typeof $.data(this,"plugin_"+I)[t])throw new Error("Method "+t+" does not exist on jQuery."+I);n=$.data(this,"plugin_"+I)[t].apply(this,o)}),void 0!==n?n:this}if("object"==typeof e||!e)return this.each(function(){$.data(this,"plugin_"+I)||$.data(this,"plugin_"+I,new i(this,e))})},$.fn[I].defaults={width:"968px",height:"270px",chameleonContext:{},numOfCarouselSlide:5,responsive:!1,player:"html5"}});
+!function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):"undefined"!=typeof exports?module.exports=e(require("jquery")):e(jQuery)}(function(e){var n="chameleon";function t(t,i){e(t);i=e.extend({},e.fn[n].defaults,i);var o=e(".chameleon"),a=e(this),d='<div class="header-container"></div>',l='<div class="video-container"></div>',s='<div class="slide-container"><img/></div>',r='<div class="info-panel"></div>',c='<div class="carousel-container"></div>',h='<div class="download-container"></div>',f='<div class="preview-slide-container"></div>',p='<div class="carousel-item"></div>',m='<div class="thumbnail-container"><div class="slide-image"><img/></div><div class="slide-number"></div></div>',u='<a class="carousel-control prev"></a><a class="carousel-control next"></a>',v='<span class="download-icon"></span>',w={base:'<div id="jwplayer" class="chameleon-jwplayer-video"></div>'},x={base:'<video id="chameleon-html5-video" class="chameleon-html5-video" controls preload="auto" width="100%" height="100%"/>',source:"<source/>"},C={base:'<div id="chameleon-youtube-video" class="chameleon-youtube-video" width="100%" height="100%" frameborder="0" allowfullscreen></div>'},g={base:'<div class="dropdown-box"></div>',header:'<div class="dropdown-header"></div>',button:'<div class="dropdown-btn-wrapper">Markers <span class="dropdown-btn up"></span></div>',content:'<div class="dropdown-content"></div>'},b={base:'<a href="javascript:;" class="info-panel-slide"></a>',slideThumbnail:'<div class="slide-thumbnail"><img/></div>',slideNumber:'<div class="slide-number"></div>',slideTitle:'<div class="slide-title-wrapper"><div class="slide-title"></div></div>',slideTime:'<div class="slide-time"></div>'};function y(){if("jwplayer"==i.player&&void 0===a.chameleonContext.jwplayerSetup)throw new Error("JWPlayer setup object hasn't been defined in chameleonContext.");if("html5"==i.player&&void 0===a.chameleonContext.html5Setup)throw new Error("HTML5 Player setup object hasn't been defined in chameleonContext.");if("youtube"==i.player&&void 0===a.chameleonContext.youtubeSetup)throw new Error("YouTube Player setup object hasn't been defined in chameleonContext.");if(void 0===a.chameleonContext.slides||"object"!=typeof a.chameleonContext.slides)throw new Error("slides hasn't been defined in chameleonContext.");if(0==a.chameleonContext.slides.length)throw new Error("No slide hasn't been defined in chameleonContext.");!function(){if(function(){switch(i.player){case"jwplayer":o.find(".video-container").append(w.base),a.jwPlayerInst=jwplayer("jwplayer").setup(a.chameleonContext.jwplayerSetup),a.jwPlayerInst.onTime(function(){var e=a.jwPlayerInst.getPosition();$(e)}),a.jwPlayerInst.onComplete(function(){I(0),S(0)});break;case"html5":o.find(".video-container").append(x.base),function(){var n=a.chameleonContext.html5Setup,t=o.find(".chameleon-html5-video");if(e.isArray(n.sources))for(var i=0;i<n.sources.length;i++)$html5Source=e(x.source),$html5Source.attr({src:n.sources[i].file,type:n.sources[i].type}),t.append($html5Source);else $html5Source=e(x.source),$html5Source.attr({src:n.sources.file,type:n.sources.type}),t.append($html5Source);null!=n.poster&&""!=n.poster&&t.attr("poster",n.poster),t.bind("timeupdate",function(){var n=e(this).get(0).currentTime;$(n)}),t.bind("ended",function(){I(0),S(0)})}();break;case"youtube":o.find(".video-container").append(C.base),function(){o.find(".chameleon-youtube-video");var n=a.chameleonContext.youtubeSetup;e.getScript("//www.youtube.com/iframe_api").fail(function(e,n,t){console.log(t)}).done(function(){window.onYouTubeIframeAPIReady=function(){a.ytPlayer=new YT.Player("chameleon-youtube-video",{height:"100%",width:"100%",videoId:n.videoId,events:{onReady:function(){setInterval(function(){$(a.ytPlayer.getCurrentTime())},1e3)}}})}})}();break;default:throw new Error(i.player+" is not supported")}}(),I(0),i.showCarousel){o.append(c),o.find(".carousel-container").append(f).append(u);for(var n=1;n<=a.chameleonContext.slides.length;n++){var t=e(p).append(m);t.find(".slide-image").attr("data-index",n),t.find(".slide-image img").attr("src",a.chameleonContext.slides[n-1].img),t.find(".slide-image img").attr("title",a.chameleonContext.slides[n-1].title),t.find(".slide-image img").attr("alt",a.chameleonContext.slides[n-1].alt),t.find(".slide-number").html(n+"/"+a.chameleonContext.slides.length),o.find(".preview-slide-container").append(t)}if(o.find(".carousel-item:first").addClass("active"),a.chameleonContext.slides.length>i.numOfCarouselSlide){o.find(".carousel-item").each(function(){for(var n=e(this),t=1;t<i.numOfCarouselSlide;t++)(n=n.next()).length||(n=e(this).siblings(":first")),n.children(":first-child").clone().addClass("js-chameleon-"+t).appendTo(e(this))});var d=o.find(".carousel-item.active").width(),l=o.find(".carousel-item.active .thumbnail-container:first").width();if(a.maxImgInARow=Math.floor(d/l),i.numOfCarouselSlide>a.maxImgInARow&&a.maxImgInARow>5)o.find(".carousel-item .js-chameleon-3").addClass("current-slide");else{var s=o.find(".carousel-item.active .thumbnail-container").length;if(Math.floor(s/2)>=1){var n=o.find(".carousel-item.active .thumbnail-container:nth-child( "+Math.floor(s/2)+") .slide-image").attr("data-index");o.find(".carousel-item .js-chameleon-"+n).addClass("current-slide")}else o.find(".carousel-control").remove(),o.find(".carousel-item .thumbnail-container").addClass("current-slide")}o.find(".current-slide img").css("width","120px"),S(0)}else o.find(".carousel-control").remove(),o.find(".carousel-item").addClass("active")}if(i.showMarkers&&i.responsive){o.append(r),r=o.find(".info-panel"),$infoPanel=e(g.base),$header=e(g.header).append(g.button),$content=e(g.content),$ip=$infoPanel.append($header).append($content),r.append($ip);for(var n=0;n<a.chameleonContext.slides.length;n++)$infoPanelSlide=e(b.base).append(b.slideNumber).append(b.slideThumbnail).append(b.slideTime).append(b.slideTitle),$infoPanelSlide.attr("data-index",n),$infoPanelSlide.find(".slide-number").html("#"+(n+1)),$infoPanelSlide.find(".slide-thumbnail img").attr("src",a.chameleonContext.slides[n].img),$infoPanelSlide.find(".slide-time").html(a.chameleonContext.slides[n].time),void 0===a.chameleonContext.slides[n].title||""==a.chameleonContext.slides[n].title?$infoPanelSlide.find(".slide-title").html("-"):$infoPanelSlide.find(".slide-title").html(a.chameleonContext.slides[n].title),o.find(".dropdown-content").append($infoPanelSlide)}o.find(".slide-image").click(function(){var n=e(this).attr("data-index");j(P(a.chameleonContext.slides[n-1].time))}),o.find(".carousel-control.prev").click(function(){var n=e(".active .current-slide .slide-image").attr("data-index");0==(n=parseInt(n)-1)&&(n=a.chameleonContext.slides.length),j(P(a.chameleonContext.slides[n-1].time))}),o.find(".carousel-control.next").click(function(){var e=o.find(".active .current-slide .slide-image").attr("data-index");e==a.chameleonContext.slides.length&&(e=0),j(P(a.chameleonContext.slides[e].time))}),o.find(".info-panel-slide").click(function(){var n=e(this),t=n.attr("data-index");j(P(a.chameleonContext.slides[t].time))}),o.find(".info-panel .dropdown-btn-wrapper").click(function(){var n=e(this).find(".dropdown-btn");n.hasClass("down")?(n.parent().parent().parent().find(".dropdown-content").slideDown(),n.removeClass("down").addClass("up")):(n.parent().parent().parent().find(".dropdown-content").slideUp(),n.removeClass("up").addClass("down"))}),i.responsive?(o.addClass("chameleon-responsive"),o.find(".video-container").addClass("col-md-5 col-xs-12"),o.find(".video-container").css({padding:"0px",height:"400px"}),o.find(".slide-container").addClass("col-md-7 col-xs-12"),o.find(".slide-container img").css({"margin-left":"auto","margin-right":"auto",padding:"0px"}),o.find(".header-container").addClass("col-xs-12"),o.find(".header-container .video-title").addClass("col-xs-6"),o.find(".header-container .download-container").addClass("col-xs-6"),o.find(".info-panel").addClass("col-xs-12"),o.find(".carousel-container").addClass("col-xs-12 hidden-xs"),o.find(".download-btn").css({margin:"10px 0px"}),o.find(".info-panel-slide").addClass("col-xs-12 col-sm-6 col-lg-4"),o.find(".info-panel-slide .slide-number").addClass("col-xs-12 col-md-1"),o.find(".info-panel-slide .slide-thumbnail").addClass("col-xs-12 col-sm-6 col-lg-4"),o.find(".info-panel-slide .slide-time").addClass("col-xs-2"),o.find(".info-panel-slide .slide-title-wrapper").addClass("col-xs-12 col-lg-6")):(o.find(".video-container").css({float:"left",width:"50%",height:"100%"}),o.find(".slide-container").css({width:"50%",height:"100%",float:"left"}),o.find(".download-container").css({width:"50%",height:"40px",float:"left","line-height":"40px"}),o.find(".video-title").css({width:"50%",float:"left"}),o.find(".info-panel .slide-number, .info-panel .slide-time").css({width:"8.33333333%",float:"left","text-align":"center"}),o.find(".info-panel .slide-title-wrapper").css({width:"83.33333333%",float:"left","text-align":"center"}),o.find(".info-panel .slide-title").css({"padding-left":"30px"}))}()}function j(e){switch(i.player){case"jwplayer":a.jwPlayerInst.seek(e);break;case"html5":var n=o.find(".chameleon-html5-video").get(0);n.currentTime=e,n.play();break;case"youtube":a.ytPlayer.seekTo(e);break;default:throw new Error(i.player+" is not supported")}}function S(n){n=parseInt(n)+1;var t=e('.current-slide .slide-image[data-index="'+n+'"]').parent().parent();e(".carousel-item.active").removeClass("active"),t.addClass("active")}function P(e){var n=e.split(":");return parseInt(60*n[0]*60)+parseInt(60*n[1])+parseInt(n[2])}function $(e){if(e>=P(a.chameleonContext.slides[a.chameleonContext.slides.length-1].time))a.chameleonContext.slides.length>i.numOfCarouselSlide&&S(a.chameleonContext.slides.length-1),I(a.chameleonContext.slides.length-1),k(a.chameleonContext.slides.length-1);else for(var n=0,t=1;n<a.chameleonContext.slides.length;n++,t++)e>=P(a.chameleonContext.slides[n].time)&&e<P(a.chameleonContext.slides[t].time)&&(a.chameleonContext.slides.length>i.numOfCarouselSlide&&(S(n),k(n)),I(n))}function I(e){o.find(".slide-container img").attr("src",a.chameleonContext.slides[e].img),o.find(".slide-container img").attr("title",a.chameleonContext.slides[e].title),o.find(".slide-container img").attr("alt",a.chameleonContext.slides[e].alt)}function k(e){o.find(".chameleon-hightlighted").removeClass("chameleon-hightlighted"),o.find(".info-panel-slide[data-index='"+e+"']").addClass("chameleon-hightlighted")}!function(){if(e.isEmptyObject(i.chameleonContext))throw new Error("Chameleon chameleonContext hasn't been defined.");if(!i.chameleonContext.title&&e.isEmptyObject($o.chameleonContext.download)||(o.append(d),i.chameleonContext.title&&(o.find(".header-container").append('<div class="video-title"></div>'),o.find(".video-title").html(i.chameleonContext.title)),i.showDownloadPanel&&!e.isEmptyObject(i.chameleonContext.download)&&(o.find(".header-container").append(h),void 0!==i.chameleonContext.download.slides&&"object"==typeof i.chameleonContext.download.slides&&(void 0!==i.chameleonContext.download.slides.url&&"string"==typeof i.chameleonContext.download.slides.url&&(o.find(".download-container").append('<a class="download-btn download-slides" target="_blank" download></a>'),o.find(".download-slides").attr("href",i.chameleonContext.download.slides.url)),o.find(".download-slides").length>0&&void 0!==i.chameleonContext.download.slides.title&&"string"==typeof i.chameleonContext.download.slides.title&&(o.find(".download-slides").prepend(v),o.find(".download-slides").attr("title",i.chameleonContext.download.slides.title))),void 0!==i.chameleonContext.download.video&&"object"==typeof i.chameleonContext.download.video&&(void 0!==i.chameleonContext.download.video.url&&"string"==typeof i.chameleonContext.download.video.url&&(o.find(".download-container").append('<a class="download-btn download-video" target="_blank" download></a>'),o.find(".download-video").attr("href",i.chameleonContext.download.video.url)),o.find(".download-video").length>0&&void 0!==i.chameleonContext.download.video.title&&"string"==typeof i.chameleonContext.download.video.title&&(o.find(".download-video").prepend(v),o.find(".download-video").attr("title",i.chameleonContext.download.video.title))),void 0!==i.chameleonContext.download.transcript&&"object"==typeof i.chameleonContext.download.transcript&&(void 0!==i.chameleonContext.download.transcript.url&&"string"==typeof i.chameleonContext.download.transcript.url&&(o.find(".download-container").append('<a class="download-btn download-transcript" target="_blank" download></a>'),o.find(".download-transcript").attr("href",i.chameleonContext.download.transcript.url)),o.find(".download-transcript").length>0&&void 0!==i.chameleonContext.download.transcript.title&&"string"==typeof i.chameleonContext.download.transcript.title&&(o.find(".download-transcript").prepend(v),o.find(".download-transcript").attr("title",i.chameleonContext.download.transcript.title))))),o.append(l),o.append(s),i.responsive||o.css("width",i.width).css("height",i.height),"object"==typeof i.chameleonContext&&(a.chameleonContext=i.chameleonContext,y()),"string"==typeof i.chameleonContext){if("json"!=/(?:\.([^.]+))?$/.exec(i.chameleonContext)[1])throw new Error("JSON file required.");e.getJSON(i.chameleonContext,function(e){a.chameleonContext=e}).done(function(){y()})}}()}e.fn[n]=function(i){if("string"==typeof arguments[0]){var o,a=arguments[0],d=Array.prototype.slice.call(arguments,1);return this.each(function(){if(!e.data(this,"plugin_"+n)||"function"!=typeof e.data(this,"plugin_"+n)[a])throw new Error("Method "+a+" does not exist on jQuery."+n);o=e.data(this,"plugin_"+n)[a].apply(this,d)}),void 0!==o?o:this}if("object"==typeof i||!i)return this.each(function(){e.data(this,"plugin_"+n)||e.data(this,"plugin_"+n,new t(this,i))})},e.fn[n].defaults={width:"968px",height:"270px",chameleonContext:{},numOfCarouselSlide:5,responsive:!1,player:"html5",showMarkers:!1,showCarousel:!1,showDownloadPanel:!1}});

docs/context.json

 {
-  "html5Setup" :{
-      "sources": [
+    "responsive": true,
+    "showMarkers": true,
+    "showCarousel": true,
+    "showDownloadPanel": true,
+    "chameleonContext": {
+    "title": "jquery-chameleon Demo Page",
+    "html5Setup" :{
+         "sources": [
+            {
+               "file": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+               "type": "video/mp4"
+            }
+         ]
+      },
+      "download": {
+            "slides": {
+               "url": "https://github.com/wingkwong/jquery-chameleon/archive/1.3.0.zip",
+               "title": "Download Slides"
+            },
+            "video": {
+               "url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+               "title": "Download Video"
+            },
+            "transcript": {
+               "url": "https://raw.githubusercontent.com/wingkwong/jquery-chameleon/1.3.0/README.md",
+               "title": "Download Transcript"
+            }
+      },
+      "slides":[
          {
-            "file": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
-            "type": "video/mp4"
+            "time":"00:00:00",
+            "img":"https://dummyimage.com/600x400/000/fff&text=1",
+            "title": "Lorem ipsum dolor sit amet",
+            "alt": "Dummy alt text"
+         },
+         {
+            "time":"00:00:30",
+            "title": "consectetur adipiscing elit",
+            "img":"https://dummyimage.com/600x400/000/fff&text=2"
+         },
+         {
+            "time":"00:00:45",
+            "title": "ed do eiusmod tempor incididunt ",
+            "img":"https://dummyimage.com/600x400/000/fff&text=3"
+         },
+         {
+            "time":"00:01:08",
+            "title": "abore et dolore magna aliqua",
+            "img":"https://dummyimage.com/600x400/000/fff&text=4"
+         },
+         {
+            "time":"00:02:09",
+            "title": "Quis autem vel eum iure reprehenderit",
+            "img":"https://dummyimage.com/600x400/000/fff&text=5"
+         },
+         {
+            "time":"00:03:12",
+            "title": "qui dolorem ipsum quia dolo",
+            "img":"https://dummyimage.com/600x400/000/fff&text=6"
+         },
+         {
+            "time":"00:03:45",
+            "title": "quasi architecto",
+            "img":"https://dummyimage.com/600x400/000/fff&text=7"
+         },
+         {
+            "time":"00:04:18",
+            "title": "Sed ut perspiciatis unde",
+            "img":"https://dummyimage.com/600x400/000/fff&text=8"
+         },
+         {
+            "time":"00:05:20",
+            "title": "At vero eos et accusamus et iusto odio",
+            "img":"https://dummyimage.com/600x400/000/fff&text=9"
+         },
+         {
+            "time":"00:05:41",
+            "title": "Lorem ipsum dolor sit amet",
+            "img":"https://dummyimage.com/600x400/000/fff&text=10"
+         },
+         {
+            "time":"00:06:23",
+            "title": "Ut enim ad minima veniam",
+            "img":"https://dummyimage.com/600x400/000/fff&text=11"
+         },
+         {
+            "time":"00:06:54",
+            "title": "oluptate velit esse qu",
+            "img":"https://dummyimage.com/600x400/000/fff&text=12"
+         },
+         {
+            "time":"00:07:25",
+            "title": "esse cillum dolore eu",
+            "img":"https://dummyimage.com/600x400/000/fff&text=13"
+         },
+         {
+            "time":"00:07:46",
+            "title": "sunt in culpa qui o",
+            "img":"https://dummyimage.com/600x400/000/fff&text=14"
+         },
+         {
+            "time":"00:08:28",
+            "title": "tempor incididunt ut",
+            "img":"https://dummyimage.com/600x400/000/fff&text=15"
+         },
+         {
+            "time":"00:09:29",
+            "title": "Lorem ipsum dolor sit amet",
+            "img":"https://dummyimage.com/600x400/000/fff&text=16"
          }
       ]
-   },
-   "download": {
-      "slides": {
-        "url": "https://github.com/wingkwong/jquery-chameleon/archive/1.1.zip",
-        "title": "Download Slides"
-      },
-      "video": {
-        "url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
-        "title": "Download Video"
-      },
-      "transcript": {
-        "url": "https://raw.githubusercontent.com/wingkwong/jquery-chameleon/1.1/README.md",
-        "title": "Download Transcript"
-      }
-   },
-   "slides":[
-      {
-         "time":"00:00:00",
-         "img":"https://dummyimage.com/600x400/000/fff&text=1",
-         "title": "Lorem ipsum dolor sit amet",
-         "alt": "Dummy alt text"
-      },
-      {
-         "time":"00:00:02",
-         "title": "consectetur adipiscing elit",
-         "img":"https://dummyimage.com/600x400/000/fff&text=2"
-      },
-      {
-         "time":"00:00:05",
-         "title": "ed do eiusmod tempor incididunt ",
-         "img":"https://dummyimage.com/600x400/000/fff&text=3"
-      },
-      {
-         "time":"00:00:08",
-         "title": "abore et dolore magna aliqua",
-         "img":"https://dummyimage.com/600x400/000/fff&text=4"
-      },
-      {
-         "time":"00:00:09",
-         "title": "Quis autem vel eum iure reprehenderit",
-         "img":"https://dummyimage.com/600x400/000/fff&text=5"
-      },
-      {
-         "time":"00:00:12",
-         "title": "qui dolorem ipsum quia dolo",
-         "img":"https://dummyimage.com/600x400/000/fff&text=6"
-      },
-      {
-         "time":"00:00:15",
-         "title": "quasi architecto",
-         "img":"https://dummyimage.com/600x400/000/fff&text=7"
-      },
-      {
-         "time":"00:00:18",
-         "title": "Sed ut perspiciatis unde",
-         "img":"https://dummyimage.com/600x400/000/fff&text=8"
-      },
-      {
-         "time":"00:00:20",
-         "title": "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. ",
-         "img":"https://dummyimage.com/600x400/000/fff&text=9"
-      },
-      {
-         "time":"00:00:21",
-         "title": "Lorem ipsum dolor sit amet",
-         "img":"https://dummyimage.com/600x400/000/fff&text=10"
-      },
-      {
-         "time":"00:00:23",
-         "title": "Ut enim ad minima veniam",
-         "img":"https://dummyimage.com/600x400/000/fff&text=11"
-      },
-      {
-         "time":"00:00:24",
-         "title": "oluptate velit esse qu",
-         "img":"https://dummyimage.com/600x400/000/fff&text=12"
-      },
-      {
-         "time":"00:00:25",
-         "title": "esse cillum dolore eu",
-         "img":"https://dummyimage.com/600x400/000/fff&text=13"
-      },
-      {
-         "time":"00:00:26",
-         "title": "sunt in culpa qui o",
-         "img":"https://dummyimage.com/600x400/000/fff&text=14"
-      },
-      {
-         "time":"00:00:28",
-         "title": "tempor incididunt ut",
-         "img":"https://dummyimage.com/600x400/000/fff&text=15"
-      },
-      {
-         "time":"00:00:29",
-         "title": "Lorem ipsum dolor sit amet",
-         "img":"https://dummyimage.com/600x400/000/fff&text=16"
-      }
-   ]
-}
+   }
+}

package.json

 {
   "name": "jquery-chameleon",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "jQuery plugin for synchronizing slides with videos - https://github.com/wingkwong/jquery-chameleon",
@@ -5,0 +5,0 @@ "main": "chameleon.min",

README.md

 # jquery-chameleon
 
-Synchronizing slide images with videos
+A jQuery plugin to synchronize slide images with videos in JWPlayer 7, HTML5 or YouTube Player
 
@@ -8,4 +8,4 @@ [![NPM version](https://img.shields.io/npm/v/jquery-chameleon.svg)](https://www.npmjs.com/package/jquery-chameleon) [![License](https://img.shields.io/npm/l/jquery-chameleon.svg)](https://github.com/wingkwong/jquery-chameleon/blob/master/LICENSE) [![Total NPM Download](https://img.shields.io/npm/dt/jquery-chameleon.svg)](https://www.npmjs.com/package/jquery-chameleon)
 
-![screenshot](https://wingkwong.gitbooks.io/jquery-chameleon/content/assets/cover-without-markers.png)
-![screenshot](https://wingkwong.gitbooks.io/jquery-chameleon/content/assets/cover-with-markers.png)
+![screenshot](https://wingkwong.gitbooks.io/jquery-chameleon/content/assets/cover-1-1.3.0.png)
+![screenshot](https://wingkwong.gitbooks.io/jquery-chameleon/content/assets/cover-2-1.3.0.png)
 
@@ -17,2 +17,4 @@ ### Features
 	Showing the highlighted slide, i.e. the one you are currently viewing. Navigated to a specific moment with a simple click.
+* **Carousel Navigatior:**
+	Showing N slides in a carousel where N can be configured with the variable numOfCarouselSlide
 * **Responsive:**
@@ -59,3 +61,3 @@ Rendering in a responsive way or not is your choice.
 
-* **Wing Kam WONG** -  [@wingkwong](https://github.com/wingkwong)
+* **WONG, Wing Kam** -  [@wingkwong](https://github.com/wingkwong)
 
@@ -62,0 +64,0 @@ ## License

src/chameleon.js

@@ -11,8 +11,8 @@ /**
  *
- * chameleon.js - synchronizing slides with videos
- * @author Wing Kam Wong - [e-mail]
- * @version - 1.2.0
+ * chameleon.js - A jQuery plugin to synchronize slide images with videos in JWPlayer 7, HTML5 or YouTube Player
+ * @author WONG, Wing Kam - [e-mail]
+ * @version - 1.3.0
  */
 ;
-(function(factory) {
+(function (factory) {
     'use strict';
@@ -26,3 +26,3 @@ if (typeof define === 'function' && define.amd) {
     }
-}(function($) {
+}(function ($) {
     var chameleon = 'chameleon';
@@ -38,2 +38,3 @@
             $this = $(this),
+            $headerContainer = '<div class="header-container"></div>',
             $videoContainer = '<div class="video-container"></div>',
@@ -66,7 +67,6 @@ $slideContainer = '<div class="slide-container"><img/></div>',
 
-
         var infoPanel = {
             'base': '<div class="dropdown-box"></div>',
             'header': '<div class="dropdown-header"></div>',
-            'button': '<div class="dropdown-btn-wrapper">Markers <span class="dropdown-btn down"></span></div>',
+            'button': '<div class="dropdown-btn-wrapper">Markers <span class="dropdown-btn up"></span></div>',
             'content': '<div class="dropdown-content"></div>'
@@ -77,2 +77,3 @@ };
             'base': '<a href="javascript:;" class="info-panel-slide"></a>',
+            'slideThumbnail': '<div class="slide-thumbnail"><img/></div>',
             'slideNumber': '<div class="slide-number"></div>',
@@ -84,32 +85,90 @@ 'slideTitle': '<div class="slide-title-wrapper"><div class="slide-title"></div></div>',
         function _initChameleon() {
-            if ($.isEmptyObject(o.chameleonContext)){
+            if ($.isEmptyObject(o.chameleonContext)) {
                 throw new Error("Chameleon chameleonContext hasn't been defined.");
             }
 
-             /*
-                Video Container
-            */
-            $chameleon.append($videoContainer);
-
             /*
-                Slide Container
+                Header Container
             */
-            $chameleon.append($slideContainer);
+            if (o.chameleonContext.title || !$.isEmptyObject($o.chameleonContext.download)) {
+                $chameleon.append($headerContainer);
 
-            /*
-                Info Panel Container
-            */
-            $chameleon.append($infoPanelContainer);
+                /*
+                  Video Title
+                */
+                if (o.chameleonContext.title) {
+                    $chameleon.find('.header-container').append('<div class="video-title"></div>');
+                    $chameleon.find('.video-title').html(o.chameleonContext.title);
+                }
 
+                /*
+                  Download Buttons
+                */
+                if (o.showDownloadPanel && !$.isEmptyObject(o.chameleonContext.download)) {
+                    $chameleon.find('.header-container').append($downloadContainer);
+
+                    if (typeof o.chameleonContext.download.slides != "undefined" &&
+                        typeof o.chameleonContext.download.slides === "object") {
+
+                        if (typeof o.chameleonContext.download.slides.url != "undefined" &&
+                            typeof o.chameleonContext.download.slides.url === "string") {
+                            $chameleon.find('.download-container').append('<a class="download-btn download-slides" target="_blank" download></a>');
+                            $chameleon.find('.download-slides').attr("href", o.chameleonContext.download.slides.url);
+                        }
+
+                        if ($chameleon.find('.download-slides').length > 0 &&
+                            typeof o.chameleonContext.download.slides.title != "undefined" &&
+                            typeof o.chameleonContext.download.slides.title === "string") {
+                            $chameleon.find('.download-slides').prepend($downloadIcon);
+                            $chameleon.find('.download-slides').attr("title", o.chameleonContext.download.slides.title);
+                        }
+
+
+                    }
+
+                    if (typeof o.chameleonContext.download.video != "undefined" &&
+                        typeof o.chameleonContext.download.video === "object") {
+                        if (typeof o.chameleonContext.download.video.url != "undefined" &&
+                            typeof o.chameleonContext.download.video.url === "string") {
+                            $chameleon.find('.download-container').append('<a class="download-btn download-video" target="_blank" download></a>');
+                            $chameleon.find('.download-video').attr("href", o.chameleonContext.download.video.url);
+                        }
+
+                        if ($chameleon.find('.download-video').length > 0 &&
+                            typeof o.chameleonContext.download.video.title != "undefined" &&
+                            typeof o.chameleonContext.download.video.title === "string") {
+                            $chameleon.find('.download-video').prepend($downloadIcon);
+                            $chameleon.find('.download-video').attr("title", o.chameleonContext.download.video.title);
+                        }
+                    }
+
+                    if (typeof o.chameleonContext.download.transcript != "undefined" &&
+                        typeof o.chameleonContext.download.transcript === "object") {
+                        if (typeof o.chameleonContext.download.transcript.url != "undefined" &&
+                            typeof o.chameleonContext.download.transcript.url === "string") {
+                            $chameleon.find('.download-container').append('<a class="download-btn download-transcript" target="_blank" download></a>');
+                            $chameleon.find('.download-transcript').attr("href", o.chameleonContext.download.transcript.url);
+                        }
+
+                        if ($chameleon.find('.download-transcript').length > 0 &&
+                            typeof o.chameleonContext.download.transcript.title != "undefined" &&
+                            typeof o.chameleonContext.download.transcript.title === "string") {
+                            $chameleon.find('.download-transcript').prepend($downloadIcon);
+                            $chameleon.find('.download-transcript').attr("title", o.chameleonContext.download.transcript.title);
+                        }
+                    }
+                }
+            }
+
             /*
-                Carousel Container
+                Video Container
             */
-            $chameleon.append($carouselContainer);
+            $chameleon.append($videoContainer);
 
             /*
-                Download Container
+                Slide Container
             */
-            $chameleon.append($downloadContainer);
+            $chameleon.append($slideContainer);
 
-            if(!o.responsive)
+            if (!o.responsive)
                 $chameleon.css("width", o.width).css("height", o.height);
@@ -126,5 +185,5 @@
                 if (regex.exec(o.chameleonContext)[1] == "json") {
-                    $.getJSON(o.chameleonContext, function(data) {
+                    $.getJSON(o.chameleonContext, function (data) {
                         $this.chameleonContext = data;
-                    }).done(function() {
+                    }).done(function () {
                         _initContextValidator();
@@ -138,16 +197,16 @@ });
 
-        function _initContextValidator(){
-            if(o.player == "jwplayer" && typeof $this.chameleonContext.jwplayerSetup === "undefined"){
+        function _initContextValidator() {
+            if (o.player == "jwplayer" && typeof $this.chameleonContext.jwplayerSetup === "undefined") {
                 throw new Error("JWPlayer setup object hasn't been defined in chameleonContext.");
-            } else if(o.player == "html5" && typeof $this.chameleonContext.html5Setup === "undefined"){
+            } else if (o.player == "html5" && typeof $this.chameleonContext.html5Setup === "undefined") {
                 throw new Error("HTML5 Player setup object hasn't been defined in chameleonContext.");
-            } else if(o.player == "youtube" && typeof $this.chameleonContext.youtubeSetup === "undefined"){
+            } else if (o.player == "youtube" && typeof $this.chameleonContext.youtubeSetup === "undefined") {
                 throw new Error("YouTube Player setup object hasn't been defined in chameleonContext.");
             }
 
-            if(typeof $this.chameleonContext.slides === "undefined" || typeof $this.chameleonContext.slides != "object"){
+            if (typeof $this.chameleonContext.slides === "undefined" || typeof $this.chameleonContext.slides != "object") {
                 throw new Error("slides hasn't been defined in chameleonContext.");
             }
 
-             if($this.chameleonContext.slides.length == 0){
+            if ($this.chameleonContext.slides.length == 0) {
                 throw new Error("No slide hasn't been defined in chameleonContext.");
@@ -166,151 +225,101 @@ }
 
-            // Building Slides Carousel
-            $chameleon.find('.carousel-container').append($previewSlideContainer).append($carouselControl);
+            /*
+                Building Carousel Container
+            */
+            if(o.showCarousel) {
+                $chameleon.append($carouselContainer);
+                            // Building Slides Carousel
+                $chameleon.find('.carousel-container').append($previewSlideContainer).append($carouselControl);
 
-            for (var i = 1; i <= $this.chameleonContext.slides.length; i++) {
-                var $cItem = $($carouselItem).append($previewImage);
-                $cItem.find('.slide-image').attr('data-index', i);
-                $cItem.find('.slide-image img').attr('src', $this.chameleonContext.slides[i - 1].img);
-                $cItem.find('.slide-image img').attr('title', $this.chameleonContext.slides[i - 1].title);
-                $cItem.find('.slide-image img').attr('alt', $this.chameleonContext.slides[i - 1].alt);
-                $cItem.find('.slide-number').html((i) + '/' + $this.chameleonContext.slides.length);
-                $chameleon.find('.preview-slide-container').append($cItem);
-            }
+                for (var i = 1; i <= $this.chameleonContext.slides.length; i++) {
+                    var $cItem = $($carouselItem).append($previewImage);
+                    $cItem.find('.slide-image').attr('data-index', i);
+                    $cItem.find('.slide-image img').attr('src', $this.chameleonContext.slides[i - 1].img);
+                    $cItem.find('.slide-image img').attr('title', $this.chameleonContext.slides[i - 1].title);
+                    $cItem.find('.slide-image img').attr('alt', $this.chameleonContext.slides[i - 1].alt);
+                    $cItem.find('.slide-number').html((i) + '/' + $this.chameleonContext.slides.length);
+                    $chameleon.find('.preview-slide-container').append($cItem);
+                }
 
-            $chameleon.find('.carousel-item:first').addClass("active");
+                $chameleon.find('.carousel-item:first').addClass("active");
 
-            // Building multiple sets of carousel items
+                // Building multiple sets of carousel items
 
-            if ($this.chameleonContext.slides.length > o.numOfCarouselSlide) {
-                $chameleon.find('.carousel-item').each(function() {
-                    var itemToClone = $(this);
-                    for (var i = 1; i < o.numOfCarouselSlide; i++) {
-                        itemToClone = itemToClone.next();
-                        if (!itemToClone.length) {
-                            itemToClone = $(this).siblings(':first');
+                if ($this.chameleonContext.slides.length > o.numOfCarouselSlide) {
+                    $chameleon.find('.carousel-item').each(function () {
+                        var itemToClone = $(this);
+                        for (var i = 1; i < o.numOfCarouselSlide; i++) {
+                            itemToClone = itemToClone.next();
+                            if (!itemToClone.length) {
+                                itemToClone = $(this).siblings(':first');
+                            }
+                            itemToClone.children(':first-child').clone()
+                                .addClass("js-chameleon-" + (i))
+                                .appendTo($(this));
                         }
-                        itemToClone.children(':first-child').clone()
-                            .addClass("js-chameleon-" + (i))
-                            .appendTo($(this));
-                    }
-                });
+                    });
 
-                var carouselInnerWidth = $chameleon.find('.carousel-item.active').width();
-                var imageWidth = $chameleon.find('.carousel-item.active .thumbnail-container:first').width();
-                $this.maxImgInARow = Math.floor(carouselInnerWidth / imageWidth);
+                    var carouselInnerWidth = $chameleon.find('.carousel-item.active').width();
+                    var imageWidth = $chameleon.find('.carousel-item.active .thumbnail-container:first').width();
+                    $this.maxImgInARow = Math.floor(carouselInnerWidth / imageWidth);
 
-                if ((o.numOfCarouselSlide > $this.maxImgInARow) && $this.maxImgInARow > 5) {
-                    $chameleon.find('.carousel-item .js-chameleon-3').addClass("current-slide");
-                } else {
-                    var total = $chameleon.find('.carousel-item.active .thumbnail-container').length;
-                    if (Math.floor(total / 2) >= 1) {
-                        var i = $chameleon.find('.carousel-item.active .thumbnail-container:nth-child( ' + Math.floor(total / 2) + ') .slide-image').attr("data-index");
-                        $chameleon.find('.carousel-item .js-chameleon-' + i + '').addClass("current-slide");
+                    if ((o.numOfCarouselSlide > $this.maxImgInARow) && $this.maxImgInARow > 5) {
+                        $chameleon.find('.carousel-item .js-chameleon-3').addClass("current-slide");
                     } else {
-                        $chameleon.find('.carousel-control').remove();
-                        $chameleon.find('.carousel-item .thumbnail-container').addClass("current-slide");
+                        var total = $chameleon.find('.carousel-item.active .thumbnail-container').length;
+                        if (Math.floor(total / 2) >= 1) {
+                            var i = $chameleon.find('.carousel-item.active .thumbnail-container:nth-child( ' + Math.floor(total / 2) + ') .slide-image').attr("data-index");
+                            $chameleon.find('.carousel-item .js-chameleon-' + i + '').addClass("current-slide");
+                        } else {
+                            $chameleon.find('.carousel-control').remove();
+                            $chameleon.find('.carousel-item .thumbnail-container').addClass("current-slide");
+                        }
                     }
-                }
 
-                $chameleon.find('.current-slide img').css("width", "120px");
+                    $chameleon.find('.current-slide img').css("width", "120px");
 
-                _updateSlideCarouel(0);
+                    _updateSlideCarouel(0);
 
-            } else {
-                $chameleon.find('.carousel-control').remove();
-                $chameleon.find('.carousel-item').addClass("active");
-            }
-
-            // Building Download Container
-            if(!$.isEmptyObject($this.chameleonContext.download)){
-
-                if(typeof $this.chameleonContext.download.slides === "undefined"
-                    && typeof $this.chameleonContext.download.videos === "undefined"
-                    && typeof $this.chameleonContext.download.transcript === "undefined"
-                ){
-                    $chameleon.find('.download-container').remove();
+                } else {
+                    $chameleon.find('.carousel-control').remove();
+                    $chameleon.find('.carousel-item').addClass("active");
                 }
 
-                if(typeof $this.chameleonContext.download.slides != "undefined"
-                    && typeof $this.chameleonContext.download.slides === "object"){
+            }
 
-                    if(typeof $this.chameleonContext.download.slides.url != "undefined"
-                        && typeof $this.chameleonContext.download.slides.url === "string" ){
-                        $chameleon.find('.download-container').append('<a class="download-btn download-slides" target="_blank" download>Download slides</a>');
-                        $chameleon.find('.download-slides').attr("href", $this.chameleonContext.download.slides.url);
-                    }
+            /*
+                Building Info Panel Container
+            */
+           if(o.showMarkers && o.responsive) {
+                $chameleon.append($infoPanelContainer);
+                
+                // Building Info Panel
+                $infoPanelContainer = $chameleon.find('.info-panel');
+                $infoPanel = $(infoPanel.base);
+                $header = $(infoPanel.header).append(infoPanel.button);
+                $content = $(infoPanel.content);
+                $ip = $infoPanel.append($header).append($content);
+                $infoPanelContainer.append($ip);
 
-                    if($chameleon.find('.download-slides').length > 0
-                        && typeof $this.chameleonContext.download.slides.title != "undefined"
-                        && typeof $this.chameleonContext.download.slides.title === "string" ){
-                        $chameleon.find('.download-slides').html($this.chameleonContext.download.slides.title);
-                        $chameleon.find('.download-slides').prepend($downloadIcon);
-                        $chameleon.find('.download-slides').attr("title", $this.chameleonContext.download.slides.title);
+                // Building Info Panel - slide
+                for (var i = 0; i < $this.chameleonContext.slides.length; i++) {
+                    $infoPanelSlide = $(infoPanelSlide.base)
+                        .append(infoPanelSlide.slideNumber)
+                        .append(infoPanelSlide.slideThumbnail)
+                        .append(infoPanelSlide.slideTime)
+                        .append(infoPanelSlide.slideTitle);
+                    $infoPanelSlide.attr("data-index", i);
+                    $infoPanelSlide.find('.slide-number').html("#" + (i + 1));
+                    $infoPanelSlide.find('.slide-thumbnail img').attr("src", $this.chameleonContext.slides[i].img);
+                    $infoPanelSlide.find('.slide-time').html($this.chameleonContext.slides[i].time);
+                    if (typeof $this.chameleonContext.slides[i].title === "undefined" || $this.chameleonContext.slides[i].title == '') {
+                        $infoPanelSlide.find('.slide-title').html("-");
+                    } else {
+                        $infoPanelSlide.find('.slide-title').html($this.chameleonContext.slides[i].title);
                     }
-
-
+                    $chameleon.find('.dropdown-content').append($infoPanelSlide);
                 }
 
-                if(typeof $this.chameleonContext.download.video != "undefined"
-                    && typeof $this.chameleonContext.download.video === "object"){
-                    if(typeof $this.chameleonContext.download.video.url != "undefined"
-                        && typeof $this.chameleonContext.download.video.url === "string" ){
-                        $chameleon.find('.download-container').append('<a class="download-btn download-video" target="_blank" download>Download video</a>');
-                        $chameleon.find('.download-video').attr("href", $this.chameleonContext.download.video.url);
-                    }
+           }
 
-                    if($chameleon.find('.download-video').length > 0
-                        && typeof $this.chameleonContext.download.video.title != "undefined"
-                        && typeof $this.chameleonContext.download.video.title === "string" ){
-                        $chameleon.find('.download-video').html($this.chameleonContext.download.video.title);
-                        $chameleon.find('.download-video').prepend($downloadIcon);
-                        $chameleon.find('.download-video').attr("title", $this.chameleonContext.download.video.title);
-                    }
-                }
-
-                if(typeof $this.chameleonContext.download.transcript != "undefined"
-                    && typeof $this.chameleonContext.download.transcript === "object"){
-                    if(typeof $this.chameleonContext.download.transcript.url != "undefined"
-                        && typeof $this.chameleonContext.download.transcript.url === "string" ){
-                        $chameleon.find('.download-container').append('<a class="download-btn download-transcript" target="_blank" download>Download transcript</a>');
-                        $chameleon.find('.download-transcript').attr("href", $this.chameleonContext.download.transcript.url);
-                    }
-
-                    if($chameleon.find('.download-transcript').length > 0
-                        && typeof $this.chameleonContext.download.transcript.title != "undefined"
-                        && typeof $this.chameleonContext.download.transcript.title === "string" ){
-                        $chameleon.find('.download-transcript').html($this.chameleonContext.download.transcript.title);
-                        $chameleon.find('.download-transcript').prepend($downloadIcon);
-                        $chameleon.find('.download-transcript').attr("title", $this.chameleonContext.download.transcript.title);
-                    }
-                }
-            }
-
-            // Building Info Panel
-            $infoPanelContainer =  $chameleon.find('.info-panel');
-            $infoPanel = $(infoPanel.base);
-            $header = $(infoPanel.header).append(infoPanel.button);
-            $content = $(infoPanel.content);
-            $ip = $infoPanel.append($header).append($content);
-            $infoPanelContainer.append($ip);
-
-            // Building Info Panel - slide
-            for (var i = 0; i < $this.chameleonContext.slides.length; i++) {
-                $infoPanelSlide = $(infoPanelSlide.base)
-                                .append(infoPanelSlide.slideNumber)
-                                .append(infoPanelSlide.slideTime)
-                                .append(infoPanelSlide.slideTitle);
-                $infoPanelSlide.attr("data-index", i);
-                $infoPanelSlide.find('.slide-number').html("#" + (i+1));
-                $infoPanelSlide.find('.slide-time').html($this.chameleonContext.slides[i].time);
-                if(typeof $this.chameleonContext.slides[i].title === "undefined" || $this.chameleonContext.slides[i].title == ''){
-                    $infoPanelSlide.find('.slide-title').html("-");
-                }else{
-                    $infoPanelSlide.find('.slide-title').html($this.chameleonContext.slides[i].title);
-                }
-                $chameleon.find('.dropdown-content').append($infoPanelSlide);
-            }
-
-
-
             // Register Click Events
@@ -324,7 +333,7 @@ _registerClickEvents();
 
-        function _initPlayer(){
+        function _initPlayer() {
             /*
                 Create container for a specific player
             */
-            switch(o.player){
+            switch (o.player) {
                 case 'jwplayer':
@@ -351,7 +360,7 @@ $chameleon.find('.video-container').append(jw.base);
 
-        function _initJWPlayer(){
+        function _initJWPlayer() {
 
-            $this.jwPlayerInst = jwplayer("jwplayer").setup( $this.chameleonContext.jwplayerSetup);
+            $this.jwPlayerInst = jwplayer("jwplayer").setup($this.chameleonContext.jwplayerSetup);
 
-            $this.jwPlayerInst.onTime(function() {
+            $this.jwPlayerInst.onTime(function () {
                 var time = $this.jwPlayerInst.getPosition();
@@ -361,3 +370,3 @@ _slideCarouselHandler(time);
 
-            $this.jwPlayerInst.onComplete(function() {
+            $this.jwPlayerInst.onComplete(function () {
                 _setSlide(0);
@@ -368,6 +377,6 @@ _updateSlideCarouel(0);
 
-        function _initHTML5Player(){
+        function _initHTML5Player() {
             var o = $this.chameleonContext.html5Setup;
             var $video = $chameleon.find('.chameleon-html5-video');
-            if(!$.isArray(o.sources)){
+            if (!$.isArray(o.sources)) {
                 $html5Source = $(html5.source);
@@ -379,4 +388,4 @@ $html5Source.attr({
                 $video.append($html5Source);
-            }else {
-                for(var i=0; i<o.sources.length; i++){
+            } else {
+                for (var i = 0; i < o.sources.length; i++) {
                     $html5Source = $(html5.source);
@@ -391,7 +400,7 @@ $html5Source.attr({
 
-            if(o.poster != null && o.poster != ''){
-                 $video.attr("poster", o.poster);
+            if (o.poster != null && o.poster != '') {
+                $video.attr("poster", o.poster);
             }
 
-            $video.bind('timeupdate', function() {
+            $video.bind('timeupdate', function () {
                 var time = $(this).get(0).currentTime;
@@ -401,3 +410,3 @@ _slideCarouselHandler(time);
 
-            $video.bind('ended', function() {
+            $video.bind('ended', function () {
                 _setSlide(0);
@@ -408,27 +417,27 @@ _updateSlideCarouel(0);
 
-        function _initYoutubePlayer(){
+        function _initYoutubePlayer() {
             var $video = $chameleon.find('.chameleon-youtube-video');
             var o = $this.chameleonContext.youtubeSetup;
 
-            $.getScript('//www.youtube.com/iframe_api').fail(function( jqxhr, settings, exception ) {
-                console.log(exception);
-            })
-            .done(function () {
-                window.onYouTubeIframeAPIReady = function () {
-                   $this.ytPlayer = new YT.Player('chameleon-youtube-video', {
-                      height: '100%',
-                      width: '100%',
-                      videoId: o.videoId,
-                      events: {
-                        'onReady': function(){
-                            _bindYTonTimeChange();
-                        }
-                      }
-                  });
-                }
-            });
+            $.getScript('//www.youtube.com/iframe_api').fail(function (jqxhr, settings, exception) {
+                    console.log(exception);
+                })
+                .done(function () {
+                    window.onYouTubeIframeAPIReady = function () {
+                        $this.ytPlayer = new YT.Player('chameleon-youtube-video', {
+                            height: '100%',
+                            width: '100%',
+                            videoId: o.videoId,
+                            events: {
+                                'onReady': function () {
+                                    _bindYTonTimeChange();
+                                }
+                            }
+                        });
+                    }
+                });
         }
 
-        function _bindYTonTimeChange(){
-            setInterval(function(){
+        function _bindYTonTimeChange() {
+            setInterval(function () {
                 _slideCarouselHandler($this.ytPlayer.getCurrentTime());
@@ -440,3 +449,3 @@ }, 1000);
         function _registerClickEvents() {
-            $chameleon.find('.slide-image').click(function() {
+            $chameleon.find('.slide-image').click(function () {
                 var id = $(this).attr("data-index");
@@ -446,3 +455,3 @@ _seek(_parseStrTime($this.chameleonContext.slides[id - 1].time));
 
-            $chameleon.find('.carousel-control.prev').click(function() {
+            $chameleon.find('.carousel-control.prev').click(function () {
                 var id = $('.active .current-slide .slide-image').attr("data-index");
@@ -456,3 +465,3 @@ id = parseInt(id) - 1;
 
-            $chameleon.find('.carousel-control.next').click(function() {
+            $chameleon.find('.carousel-control.next').click(function () {
                 var id = $chameleon.find('.active .current-slide .slide-image').attr("data-index");
@@ -465,3 +474,3 @@ if (id == $this.chameleonContext.slides.length) {
 
-            $chameleon.find('.info-panel-slide').click(function(){
+            $chameleon.find('.info-panel-slide').click(function () {
                 var me = $(this);
@@ -472,8 +481,8 @@ var id = me.attr("data-index");
 
-            $chameleon.find('.info-panel .dropdown-btn-wrapper').click(function(){
+            $chameleon.find('.info-panel .dropdown-btn-wrapper').click(function () {
                 var me = $(this).find('.dropdown-btn');
-                if(me.hasClass("down")){
+                if (me.hasClass("down")) {
                     me.parent().parent().parent().find(".dropdown-content").slideDown();
                     me.removeClass("down").addClass("up");
-                }else{
+                } else {
                     me.parent().parent().parent().find(".dropdown-content").slideUp();
@@ -485,4 +494,4 @@ me.removeClass("up").addClass("down");
 
-        function _seek(time){
-            switch(o.player){
+        function _seek(time) {
+            switch (o.player) {
                 case 'jwplayer':
@@ -507,10 +516,11 @@ $this.jwPlayerInst.seek(time)
 
-        function _responsify(){
-            if(o.responsive){
-                $chameleon.find('.video-container').addClass("col-md-6 col-xs-12");
+        function _responsify() {
+            if (o.responsive) {
+                $chameleon.addClass("chameleon-responsive");
+                $chameleon.find('.video-container').addClass("col-md-5 col-xs-12");
                 $chameleon.find('.video-container').css({
                     'padding': '0px',
-                    'height': '300px'
+                    'height': '400px'
                 });
-                $chameleon.find('.slide-container').addClass("col-md-6 col-xs-12");
+                $chameleon.find('.slide-container').addClass("col-md-7 col-xs-12");
 
@@ -523,17 +533,20 @@ $chameleon.find('.slide-container img').css({
 
+                $chameleon.find('.header-container').addClass('col-xs-12');
+                $chameleon.find('.header-container .video-title').addClass('col-xs-6');
+                $chameleon.find('.header-container .download-container').addClass("col-xs-6");
                 $chameleon.find('.info-panel').addClass("col-xs-12");
                 $chameleon.find('.carousel-container').addClass("col-xs-12 hidden-xs");
-                $chameleon.find('.download-container').addClass("col-xs-12");
-                $chameleon.find('.download-btn').addClass("col-xs-12 col-sm-4");
 
-                 $chameleon.find('.download-btn').css({
+                $chameleon.find('.download-btn').css({
                     'margin': '10px 0px'
-                 });
+                });
 
-                $chameleon.find('.info-panel-slide .slide-number').addClass("col-xs-12 col-sm-2");
-                $chameleon.find('.info-panel-slide .slide-time').addClass("col-xs-12 col-sm-2");
-                $chameleon.find('.info-panel-slide .slide-title-wrapper').addClass("col-xs-12 col-sm-8");
+                $chameleon.find('.info-panel-slide').addClass("col-xs-12 col-sm-6 col-lg-4");
+                $chameleon.find('.info-panel-slide .slide-number').addClass("col-xs-12 col-md-1");
+                $chameleon.find('.info-panel-slide .slide-thumbnail').addClass("col-xs-12 col-sm-6 col-lg-4");
+                $chameleon.find('.info-panel-slide .slide-time').addClass("col-xs-2");
+                $chameleon.find('.info-panel-slide .slide-title-wrapper').addClass("col-xs-12 col-lg-6");
 
 
-            }else{
+            } else {
                 $chameleon.find('.video-container').css({
@@ -545,3 +558,3 @@ 'float': 'left',
 
-                 $chameleon.find('.slide-container').css({
+                $chameleon.find('.slide-container').css({
                     'width': '50%',
@@ -552,4 +565,4 @@ 'height': '100%',
 
-                 $chameleon.find('.download-container').css({
-                    'width': '100%',
+                $chameleon.find('.download-container').css({
+                    'width': '50%',
                     'height': '40px',
@@ -560,4 +573,5 @@ 'float': 'left',
 
-                 $chameleon.find('.download-btn').css({
-                    'width': '30%'
+                $chameleon.find('.video-title').css({
+                    'width': '50%',
+                    'float': 'left'
                 })
@@ -604,4 +618,4 @@
                 }
-                 _setSlide($this.chameleonContext.slides.length - 1);
-                 _highlightMarkers($this.chameleonContext.slides.length - 1)
+                _setSlide($this.chameleonContext.slides.length - 1);
+                _highlightMarkers($this.chameleonContext.slides.length - 1)
             } else {
@@ -614,3 +628,3 @@ for (var i = 0, j = 1; i < $this.chameleonContext.slides.length; i++, j++) {
                         }
-                         _setSlide(i);
+                        _setSlide(i);
                     }
@@ -621,3 +635,3 @@ }
 
-        function _setSlide(index){
+        function _setSlide(index) {
             $chameleon.find('.slide-container img').attr('src', $this.chameleonContext.slides[index].img);
@@ -628,5 +642,5 @@ $chameleon.find('.slide-container img').attr('title', $this.chameleonContext.slides[index].title);
 
-        function _highlightMarkers(index){
-           $chameleon.find('.chameleon-hightlighted').removeClass('chameleon-hightlighted');
-           $chameleon.find(".info-panel-slide[data-index='" + index +  "']").addClass('chameleon-hightlighted');
+        function _highlightMarkers(index) {
+            $chameleon.find('.chameleon-hightlighted').removeClass('chameleon-hightlighted');
+            $chameleon.find(".info-panel-slide[data-index='" + index + "']").addClass('chameleon-hightlighted');
         }
@@ -641,3 +655,3 @@
 
-    $.fn[chameleon] = function(o) {
+    $.fn[chameleon] = function (o) {
         if (typeof arguments[0] === 'string') {
@@ -647,3 +661,3 @@ var methodName = arguments[0];
             var returnVal;
-            this.each(function() {
+            this.each(function () {
                 if ($.data(this, 'plugin_' + chameleon) && typeof $.data(this, 'plugin_' + chameleon)[methodName] === 'function') {
@@ -661,3 +675,3 @@ returnVal = $.data(this, 'plugin_' + chameleon)[methodName].apply(this, args);
         } else if (typeof o === "object" || !o) {
-            return this.each(function() {
+            return this.each(function () {
                 if (!$.data(this, 'plugin_' + chameleon)) {
@@ -671,9 +685,12 @@ $.data(this, 'plugin_' + chameleon, new Chameleon(this, o));
     $.fn[chameleon].defaults = {
-        width: '968px',                    // width of chameleon container
-        height: '270px',                   // height of chameleon container
-        chameleonContext: {},              // slides JSON file / object
-        numOfCarouselSlide: 5,              // number of slides showing in carousel
+        width: '968px', // width of chameleon container
+        height: '270px', // height of chameleon container
+        chameleonContext: {}, // slides JSON file / object
+        numOfCarouselSlide: 5, // number of slides showing in carousel
         responsive: false,
-        player: 'html5'
+        player: 'html5',
+        showMarkers: false,
+        showCarousel: false,
+        showDownloadPanel: false,
     };
-}));
+}));

src/chameleon.min.js

@@ -11,7 +11,7 @@ /**
  *
- * chameleon.js - synchronizing slides with JWPlayer Video
- * @author Wing Kam Wong - [e-mail]
- * @version - 1.2.0
+ * chameleon.js - A jQuery plugin to synchronize slide images with videos in JWPlayer 7, HTML5 or YouTube Player
+ * @author WONG, Wing Kam - [e-mail]
+ * @version - 1.3.0
  */
 
-!function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):"undefined"!=typeof exports?module.exports=e(require("jquery")):e(jQuery)}(function($){var I="chameleon";function i(e,d){$(e);d=$.extend({},$.fn[I].defaults,d);var a=$(".chameleon"),l=$(this),n='<div class="video-container"></div>',t='<div class="slide-container"><img/></div>',s='<div class="info-panel"></div>',o='<div class="carousel-container"></div>',i='<div class="download-container"></div>',r='<div class="preview-slide-container"></div>',c='<div class="carousel-item"></div>',h='<div class="thumbnail-container"><div class="slide-image"><img/></div><div class="slide-number"></div></div>',f='<a class="carousel-control prev"></a><a class="carousel-control next"></a>',m='<span class="download-icon"></span>',p={base:'<div id="jwplayer" class="chameleon-jwplayer-video"></div>'},u={base:'<video id="chameleon-html5-video" class="chameleon-html5-video" controls preload="auto" width="100%" height="100%"/>',source:"<source/>"},w={base:'<div id="chameleon-youtube-video" class="chameleon-youtube-video" width="100%" height="100%" frameborder="0" allowfullscreen></div>'},v={base:'<div class="dropdown-box"></div>',header:'<div class="dropdown-header"></div>',button:'<div class="dropdown-btn-wrapper">Markers <span class="dropdown-btn down"></span></div>',content:'<div class="dropdown-content"></div>'},x={base:'<a href="javascript:;" class="info-panel-slide"></a>',slideNumber:'<div class="slide-number"></div>',slideTitle:'<div class="slide-title-wrapper"><div class="slide-title"></div></div>',slideTime:'<div class="slide-time"></div>'};function C(){if("jwplayer"==d.player&&void 0===l.chameleonContext.jwplayerSetup)throw new Error("JWPlayer setup object hasn't been defined in chameleonContext.");if("html5"==d.player&&void 0===l.chameleonContext.html5Setup)throw new Error("HTML5 Player setup object hasn't been defined in chameleonContext.");if("youtube"==d.player&&void 0===l.chameleonContext.youtubeSetup)throw new Error("YouTube Player setup object hasn't been defined in chameleonContext.");if(void 0===l.chameleonContext.slides||"object"!=typeof l.chameleonContext.slides)throw new Error("slides hasn't been defined in chameleonContext.");if(0==l.chameleonContext.slides.length)throw new Error("No slide hasn't been defined in chameleonContext.");!function(){(function(){switch(d.player){case"jwplayer":a.find(".video-container").append(p.base),l.jwPlayerInst=jwplayer("jwplayer").setup(l.chameleonContext.jwplayerSetup),l.jwPlayerInst.onTime(function(){var e=l.jwPlayerInst.getPosition();j(e)}),l.jwPlayerInst.onComplete(function(){S(0),b(0)});break;case"html5":a.find(".video-container").append(u.base),function(){var e=l.chameleonContext.html5Setup,n=a.find(".chameleon-html5-video");if($.isArray(e.sources))for(var t=0;t<e.sources.length;t++)$html5Source=$(u.source),$html5Source.attr({src:e.sources[t].file,type:e.sources[t].type}),n.append($html5Source);else $html5Source=$(u.source),$html5Source.attr({src:e.sources.file,type:e.sources.type}),n.append($html5Source);null!=e.poster&&""!=e.poster&&n.attr("poster",e.poster);n.bind("timeupdate",function(){var e=$(this).get(0).currentTime;j(e)}),n.bind("ended",function(){S(0),b(0)})}();break;case"youtube":a.find(".video-container").append(w.base),function(){a.find(".chameleon-youtube-video");var e=l.chameleonContext.youtubeSetup;$.getScript("//www.youtube.com/iframe_api").fail(function(e,n,t){console.log(t)}).done(function(){window.onYouTubeIframeAPIReady=function(){l.ytPlayer=new YT.Player("chameleon-youtube-video",{height:"100%",width:"100%",videoId:e.videoId,events:{onReady:function(){setInterval(function(){j(l.ytPlayer.getCurrentTime())},1e3)}}})}})}();break;default:throw new Error(d.player+" is not supported")}})(),S(0),a.find(".carousel-container").append(r).append(f);for(var e=1;e<=l.chameleonContext.slides.length;e++){var n=$(c).append(h);n.find(".slide-image").attr("data-index",e),n.find(".slide-image img").attr("src",l.chameleonContext.slides[e-1].img),n.find(".slide-image img").attr("title",l.chameleonContext.slides[e-1].title),n.find(".slide-image img").attr("alt",l.chameleonContext.slides[e-1].alt),n.find(".slide-number").html(e+"/"+l.chameleonContext.slides.length),a.find(".preview-slide-container").append(n)}if(a.find(".carousel-item:first").addClass("active"),l.chameleonContext.slides.length>d.numOfCarouselSlide){a.find(".carousel-item").each(function(){for(var e=$(this),n=1;n<d.numOfCarouselSlide;n++)(e=e.next()).length||(e=$(this).siblings(":first")),e.children(":first-child").clone().addClass("js-chameleon-"+n).appendTo($(this))});var t=a.find(".carousel-item.active").width(),o=a.find(".carousel-item.active .thumbnail-container:first").width();if(l.maxImgInARow=Math.floor(t/o),d.numOfCarouselSlide>l.maxImgInARow&&5<l.maxImgInARow)a.find(".carousel-item .js-chameleon-3").addClass("current-slide");else{var i=a.find(".carousel-item.active .thumbnail-container").length;if(1<=Math.floor(i/2)){var e=a.find(".carousel-item.active .thumbnail-container:nth-child( "+Math.floor(i/2)+") .slide-image").attr("data-index");a.find(".carousel-item .js-chameleon-"+e).addClass("current-slide")}else a.find(".carousel-control").remove(),a.find(".carousel-item .thumbnail-container").addClass("current-slide")}a.find(".current-slide img").css("width","120px"),b(0)}else a.find(".carousel-control").remove(),a.find(".carousel-item").addClass("active");$.isEmptyObject(l.chameleonContext.download)||(void 0===l.chameleonContext.download.slides&&void 0===l.chameleonContext.download.videos&&void 0===l.chameleonContext.download.transcript&&a.find(".download-container").remove(),void 0!==l.chameleonContext.download.slides&&"object"==typeof l.chameleonContext.download.slides&&(void 0!==l.chameleonContext.download.slides.url&&"string"==typeof l.chameleonContext.download.slides.url&&(a.find(".download-container").append('<a class="download-btn download-slides" target="_blank" download>Download slides</a>'),a.find(".download-slides").attr("href",l.chameleonContext.download.slides.url)),0<a.find(".download-slides").length&&void 0!==l.chameleonContext.download.slides.title&&"string"==typeof l.chameleonContext.download.slides.title&&(a.find(".download-slides").html(l.chameleonContext.download.slides.title),a.find(".download-slides").prepend(m),a.find(".download-slides").attr("title",l.chameleonContext.download.slides.title))),void 0!==l.chameleonContext.download.video&&"object"==typeof l.chameleonContext.download.video&&(void 0!==l.chameleonContext.download.video.url&&"string"==typeof l.chameleonContext.download.video.url&&(a.find(".download-container").append('<a class="download-btn download-video" target="_blank" download>Download video</a>'),a.find(".download-video").attr("href",l.chameleonContext.download.video.url)),0<a.find(".download-video").length&&void 0!==l.chameleonContext.download.video.title&&"string"==typeof l.chameleonContext.download.video.title&&(a.find(".download-video").html(l.chameleonContext.download.video.title),a.find(".download-video").prepend(m),a.find(".download-video").attr("title",l.chameleonContext.download.video.title))),void 0!==l.chameleonContext.download.transcript&&"object"==typeof l.chameleonContext.download.transcript&&(void 0!==l.chameleonContext.download.transcript.url&&"string"==typeof l.chameleonContext.download.transcript.url&&(a.find(".download-container").append('<a class="download-btn download-transcript" target="_blank" download>Download transcript</a>'),a.find(".download-transcript").attr("href",l.chameleonContext.download.transcript.url)),0<a.find(".download-transcript").length&&void 0!==l.chameleonContext.download.transcript.title&&"string"==typeof l.chameleonContext.download.transcript.title&&(a.find(".download-transcript").html(l.chameleonContext.download.transcript.title),a.find(".download-transcript").prepend(m),a.find(".download-transcript").attr("title",l.chameleonContext.download.transcript.title))));s=a.find(".info-panel"),$infoPanel=$(v.base),$header=$(v.header).append(v.button),$content=$(v.content),$ip=$infoPanel.append($header).append($content),s.append($ip);for(var e=0;e<l.chameleonContext.slides.length;e++)$infoPanelSlide=$(x.base).append(x.slideNumber).append(x.slideTime).append(x.slideTitle),$infoPanelSlide.attr("data-index",e),$infoPanelSlide.find(".slide-number").html("#"+(e+1)),$infoPanelSlide.find(".slide-time").html(l.chameleonContext.slides[e].time),void 0===l.chameleonContext.slides[e].title||""==l.chameleonContext.slides[e].title?$infoPanelSlide.find(".slide-title").html("-"):$infoPanelSlide.find(".slide-title").html(l.chameleonContext.slides[e].title),a.find(".dropdown-content").append($infoPanelSlide);a.find(".slide-image").click(function(){var e=$(this).attr("data-index");g(y(l.chameleonContext.slides[e-1].time))}),a.find(".carousel-control.prev").click(function(){var e=$(".active .current-slide .slide-image").attr("data-index");0==(e=parseInt(e)-1)&&(e=l.chameleonContext.slides.length),g(y(l.chameleonContext.slides[e-1].time))}),a.find(".carousel-control.next").click(function(){var e=a.find(".active .current-slide .slide-image").attr("data-index");e==l.chameleonContext.slides.length&&(e=0),g(y(l.chameleonContext.slides[e].time))}),a.find(".info-panel-slide").click(function(){var e=$(this),n=e.attr("data-index");g(y(l.chameleonContext.slides[n].time))}),a.find(".info-panel .dropdown-btn-wrapper").click(function(){var e=$(this).find(".dropdown-btn");e.hasClass("down")?(e.parent().parent().parent().find(".dropdown-content").slideDown(),e.removeClass("down").addClass("up")):(e.parent().parent().parent().find(".dropdown-content").slideUp(),e.removeClass("up").addClass("down"))}),d.responsive?(a.find(".video-container").addClass("col-md-6 col-xs-12"),a.find(".video-container").css({padding:"0px",height:"300px"}),a.find(".slide-container").addClass("col-md-6 col-xs-12"),a.find(".slide-container img").css({"margin-left":"auto","margin-right":"auto",padding:"0px"}),a.find(".info-panel").addClass("col-xs-12"),a.find(".carousel-container").addClass("col-xs-12 hidden-xs"),a.find(".download-container").addClass("col-xs-12"),a.find(".download-btn").addClass("col-xs-12 col-sm-4"),a.find(".download-btn").css({margin:"10px 0px"}),a.find(".info-panel-slide .slide-number").addClass("col-xs-12 col-sm-2"),a.find(".info-panel-slide .slide-time").addClass("col-xs-12 col-sm-2"),a.find(".info-panel-slide .slide-title-wrapper").addClass("col-xs-12 col-sm-8")):(a.find(".video-container").css({float:"left",width:"50%",height:"100%"}),a.find(".slide-container").css({width:"50%",height:"100%",float:"left"}),a.find(".download-container").css({width:"100%",height:"40px",float:"left","line-height":"40px"}),a.find(".download-btn").css({width:"30%"}),a.find(".info-panel .slide-number, .info-panel .slide-time").css({width:"8.33333333%",float:"left","text-align":"center"}),a.find(".info-panel .slide-title-wrapper").css({width:"83.33333333%",float:"left","text-align":"center"}),a.find(".info-panel .slide-title").css({"padding-left":"30px"}))}()}function g(e){switch(d.player){case"jwplayer":l.jwPlayerInst.seek(e);break;case"html5":var n=a.find(".chameleon-html5-video").get(0);n.currentTime=e,n.play();break;case"youtube":l.ytPlayer.seekTo(e);break;default:throw new Error(d.player+" is not supported")}}function b(e){e=parseInt(e)+1;var n=$('.current-slide .slide-image[data-index="'+e+'"]').parent().parent();$(".carousel-item.active").removeClass("active"),n.addClass("active")}function y(e){var n=e.split(":");return parseInt(60*n[0]*60)+parseInt(60*n[1])+parseInt(n[2])}function j(e){if(e>=y(l.chameleonContext.slides[l.chameleonContext.slides.length-1].time))l.chameleonContext.slides.length>d.numOfCarouselSlide&&b(l.chameleonContext.slides.length-1),S(l.chameleonContext.slides.length-1),P(l.chameleonContext.slides.length-1);else for(var n=0,t=1;n<l.chameleonContext.slides.length;n++,t++)e>=y(l.chameleonContext.slides[n].time)&&e<y(l.chameleonContext.slides[t].time)&&(l.chameleonContext.slides.length>d.numOfCarouselSlide&&(b(n),P(n)),S(n))}function S(e){a.find(".slide-container img").attr("src",l.chameleonContext.slides[e].img),a.find(".slide-container img").attr("title",l.chameleonContext.slides[e].title),a.find(".slide-container img").attr("alt",l.chameleonContext.slides[e].alt)}function P(e){a.find(".chameleon-hightlighted").removeClass("chameleon-hightlighted"),a.find(".info-panel-slide[data-index='"+e+"']").addClass("chameleon-hightlighted")}!function(){if($.isEmptyObject(d.chameleonContext))throw new Error("Chameleon chameleonContext hasn't been defined.");if(a.append(n),a.append(t),a.append(s),a.append(o),a.append(i),d.responsive||a.css("width",d.width).css("height",d.height),"object"==typeof d.chameleonContext&&(l.chameleonContext=d.chameleonContext,C()),"string"==typeof d.chameleonContext){if("json"!=/(?:\.([^.]+))?$/.exec(d.chameleonContext)[1])throw new Error("JSON file required.");$.getJSON(d.chameleonContext,function(e){l.chameleonContext=e}).done(function(){C()})}}()}$.fn[I]=function(e){if("string"==typeof e){var n,t=e,o=Array.prototype.slice.call(arguments,1);return this.each(function(){if(!$.data(this,"plugin_"+I)||"function"!=typeof $.data(this,"plugin_"+I)[t])throw new Error("Method "+t+" does not exist on jQuery."+I);n=$.data(this,"plugin_"+I)[t].apply(this,o)}),void 0!==n?n:this}if("object"==typeof e||!e)return this.each(function(){$.data(this,"plugin_"+I)||$.data(this,"plugin_"+I,new i(this,e))})},$.fn[I].defaults={width:"968px",height:"270px",chameleonContext:{},numOfCarouselSlide:5,responsive:!1,player:"html5"}});
+!function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):"undefined"!=typeof exports?module.exports=e(require("jquery")):e(jQuery)}(function(e){var n="chameleon";function t(t,i){e(t);i=e.extend({},e.fn[n].defaults,i);var o=e(".chameleon"),a=e(this),d='<div class="header-container"></div>',l='<div class="video-container"></div>',s='<div class="slide-container"><img/></div>',r='<div class="info-panel"></div>',c='<div class="carousel-container"></div>',h='<div class="download-container"></div>',f='<div class="preview-slide-container"></div>',p='<div class="carousel-item"></div>',m='<div class="thumbnail-container"><div class="slide-image"><img/></div><div class="slide-number"></div></div>',u='<a class="carousel-control prev"></a><a class="carousel-control next"></a>',v='<span class="download-icon"></span>',w={base:'<div id="jwplayer" class="chameleon-jwplayer-video"></div>'},x={base:'<video id="chameleon-html5-video" class="chameleon-html5-video" controls preload="auto" width="100%" height="100%"/>',source:"<source/>"},C={base:'<div id="chameleon-youtube-video" class="chameleon-youtube-video" width="100%" height="100%" frameborder="0" allowfullscreen></div>'},g={base:'<div class="dropdown-box"></div>',header:'<div class="dropdown-header"></div>',button:'<div class="dropdown-btn-wrapper">Markers <span class="dropdown-btn up"></span></div>',content:'<div class="dropdown-content"></div>'},b={base:'<a href="javascript:;" class="info-panel-slide"></a>',slideThumbnail:'<div class="slide-thumbnail"><img/></div>',slideNumber:'<div class="slide-number"></div>',slideTitle:'<div class="slide-title-wrapper"><div class="slide-title"></div></div>',slideTime:'<div class="slide-time"></div>'};function y(){if("jwplayer"==i.player&&void 0===a.chameleonContext.jwplayerSetup)throw new Error("JWPlayer setup object hasn't been defined in chameleonContext.");if("html5"==i.player&&void 0===a.chameleonContext.html5Setup)throw new Error("HTML5 Player setup object hasn't been defined in chameleonContext.");if("youtube"==i.player&&void 0===a.chameleonContext.youtubeSetup)throw new Error("YouTube Player setup object hasn't been defined in chameleonContext.");if(void 0===a.chameleonContext.slides||"object"!=typeof a.chameleonContext.slides)throw new Error("slides hasn't been defined in chameleonContext.");if(0==a.chameleonContext.slides.length)throw new Error("No slide hasn't been defined in chameleonContext.");!function(){if(function(){switch(i.player){case"jwplayer":o.find(".video-container").append(w.base),a.jwPlayerInst=jwplayer("jwplayer").setup(a.chameleonContext.jwplayerSetup),a.jwPlayerInst.onTime(function(){var e=a.jwPlayerInst.getPosition();$(e)}),a.jwPlayerInst.onComplete(function(){I(0),S(0)});break;case"html5":o.find(".video-container").append(x.base),function(){var n=a.chameleonContext.html5Setup,t=o.find(".chameleon-html5-video");if(e.isArray(n.sources))for(var i=0;i<n.sources.length;i++)$html5Source=e(x.source),$html5Source.attr({src:n.sources[i].file,type:n.sources[i].type}),t.append($html5Source);else $html5Source=e(x.source),$html5Source.attr({src:n.sources.file,type:n.sources.type}),t.append($html5Source);null!=n.poster&&""!=n.poster&&t.attr("poster",n.poster),t.bind("timeupdate",function(){var n=e(this).get(0).currentTime;$(n)}),t.bind("ended",function(){I(0),S(0)})}();break;case"youtube":o.find(".video-container").append(C.base),function(){o.find(".chameleon-youtube-video");var n=a.chameleonContext.youtubeSetup;e.getScript("//www.youtube.com/iframe_api").fail(function(e,n,t){console.log(t)}).done(function(){window.onYouTubeIframeAPIReady=function(){a.ytPlayer=new YT.Player("chameleon-youtube-video",{height:"100%",width:"100%",videoId:n.videoId,events:{onReady:function(){setInterval(function(){$(a.ytPlayer.getCurrentTime())},1e3)}}})}})}();break;default:throw new Error(i.player+" is not supported")}}(),I(0),i.showCarousel){o.append(c),o.find(".carousel-container").append(f).append(u);for(var n=1;n<=a.chameleonContext.slides.length;n++){var t=e(p).append(m);t.find(".slide-image").attr("data-index",n),t.find(".slide-image img").attr("src",a.chameleonContext.slides[n-1].img),t.find(".slide-image img").attr("title",a.chameleonContext.slides[n-1].title),t.find(".slide-image img").attr("alt",a.chameleonContext.slides[n-1].alt),t.find(".slide-number").html(n+"/"+a.chameleonContext.slides.length),o.find(".preview-slide-container").append(t)}if(o.find(".carousel-item:first").addClass("active"),a.chameleonContext.slides.length>i.numOfCarouselSlide){o.find(".carousel-item").each(function(){for(var n=e(this),t=1;t<i.numOfCarouselSlide;t++)(n=n.next()).length||(n=e(this).siblings(":first")),n.children(":first-child").clone().addClass("js-chameleon-"+t).appendTo(e(this))});var d=o.find(".carousel-item.active").width(),l=o.find(".carousel-item.active .thumbnail-container:first").width();if(a.maxImgInARow=Math.floor(d/l),i.numOfCarouselSlide>a.maxImgInARow&&a.maxImgInARow>5)o.find(".carousel-item .js-chameleon-3").addClass("current-slide");else{var s=o.find(".carousel-item.active .thumbnail-container").length;if(Math.floor(s/2)>=1){var n=o.find(".carousel-item.active .thumbnail-container:nth-child( "+Math.floor(s/2)+") .slide-image").attr("data-index");o.find(".carousel-item .js-chameleon-"+n).addClass("current-slide")}else o.find(".carousel-control").remove(),o.find(".carousel-item .thumbnail-container").addClass("current-slide")}o.find(".current-slide img").css("width","120px"),S(0)}else o.find(".carousel-control").remove(),o.find(".carousel-item").addClass("active")}if(i.showMarkers&&i.responsive){o.append(r),r=o.find(".info-panel"),$infoPanel=e(g.base),$header=e(g.header).append(g.button),$content=e(g.content),$ip=$infoPanel.append($header).append($content),r.append($ip);for(var n=0;n<a.chameleonContext.slides.length;n++)$infoPanelSlide=e(b.base).append(b.slideNumber).append(b.slideThumbnail).append(b.slideTime).append(b.slideTitle),$infoPanelSlide.attr("data-index",n),$infoPanelSlide.find(".slide-number").html("#"+(n+1)),$infoPanelSlide.find(".slide-thumbnail img").attr("src",a.chameleonContext.slides[n].img),$infoPanelSlide.find(".slide-time").html(a.chameleonContext.slides[n].time),void 0===a.chameleonContext.slides[n].title||""==a.chameleonContext.slides[n].title?$infoPanelSlide.find(".slide-title").html("-"):$infoPanelSlide.find(".slide-title").html(a.chameleonContext.slides[n].title),o.find(".dropdown-content").append($infoPanelSlide)}o.find(".slide-image").click(function(){var n=e(this).attr("data-index");j(P(a.chameleonContext.slides[n-1].time))}),o.find(".carousel-control.prev").click(function(){var n=e(".active .current-slide .slide-image").attr("data-index");0==(n=parseInt(n)-1)&&(n=a.chameleonContext.slides.length),j(P(a.chameleonContext.slides[n-1].time))}),o.find(".carousel-control.next").click(function(){var e=o.find(".active .current-slide .slide-image").attr("data-index");e==a.chameleonContext.slides.length&&(e=0),j(P(a.chameleonContext.slides[e].time))}),o.find(".info-panel-slide").click(function(){var n=e(this),t=n.attr("data-index");j(P(a.chameleonContext.slides[t].time))}),o.find(".info-panel .dropdown-btn-wrapper").click(function(){var n=e(this).find(".dropdown-btn");n.hasClass("down")?(n.parent().parent().parent().find(".dropdown-content").slideDown(),n.removeClass("down").addClass("up")):(n.parent().parent().parent().find(".dropdown-content").slideUp(),n.removeClass("up").addClass("down"))}),i.responsive?(o.addClass("chameleon-responsive"),o.find(".video-container").addClass("col-md-5 col-xs-12"),o.find(".video-container").css({padding:"0px",height:"400px"}),o.find(".slide-container").addClass("col-md-7 col-xs-12"),o.find(".slide-container img").css({"margin-left":"auto","margin-right":"auto",padding:"0px"}),o.find(".header-container").addClass("col-xs-12"),o.find(".header-container .video-title").addClass("col-xs-6"),o.find(".header-container .download-container").addClass("col-xs-6"),o.find(".info-panel").addClass("col-xs-12"),o.find(".carousel-container").addClass("col-xs-12 hidden-xs"),o.find(".download-btn").css({margin:"10px 0px"}),o.find(".info-panel-slide").addClass("col-xs-12 col-sm-6 col-lg-4"),o.find(".info-panel-slide .slide-number").addClass("col-xs-12 col-md-1"),o.find(".info-panel-slide .slide-thumbnail").addClass("col-xs-12 col-sm-6 col-lg-4"),o.find(".info-panel-slide .slide-time").addClass("col-xs-2"),o.find(".info-panel-slide .slide-title-wrapper").addClass("col-xs-12 col-lg-6")):(o.find(".video-container").css({float:"left",width:"50%",height:"100%"}),o.find(".slide-container").css({width:"50%",height:"100%",float:"left"}),o.find(".download-container").css({width:"50%",height:"40px",float:"left","line-height":"40px"}),o.find(".video-title").css({width:"50%",float:"left"}),o.find(".info-panel .slide-number, .info-panel .slide-time").css({width:"8.33333333%",float:"left","text-align":"center"}),o.find(".info-panel .slide-title-wrapper").css({width:"83.33333333%",float:"left","text-align":"center"}),o.find(".info-panel .slide-title").css({"padding-left":"30px"}))}()}function j(e){switch(i.player){case"jwplayer":a.jwPlayerInst.seek(e);break;case"html5":var n=o.find(".chameleon-html5-video").get(0);n.currentTime=e,n.play();break;case"youtube":a.ytPlayer.seekTo(e);break;default:throw new Error(i.player+" is not supported")}}function S(n){n=parseInt(n)+1;var t=e('.current-slide .slide-image[data-index="'+n+'"]').parent().parent();e(".carousel-item.active").removeClass("active"),t.addClass("active")}function P(e){var n=e.split(":");return parseInt(60*n[0]*60)+parseInt(60*n[1])+parseInt(n[2])}function $(e){if(e>=P(a.chameleonContext.slides[a.chameleonContext.slides.length-1].time))a.chameleonContext.slides.length>i.numOfCarouselSlide&&S(a.chameleonContext.slides.length-1),I(a.chameleonContext.slides.length-1),k(a.chameleonContext.slides.length-1);else for(var n=0,t=1;n<a.chameleonContext.slides.length;n++,t++)e>=P(a.chameleonContext.slides[n].time)&&e<P(a.chameleonContext.slides[t].time)&&(a.chameleonContext.slides.length>i.numOfCarouselSlide&&(S(n),k(n)),I(n))}function I(e){o.find(".slide-container img").attr("src",a.chameleonContext.slides[e].img),o.find(".slide-container img").attr("title",a.chameleonContext.slides[e].title),o.find(".slide-container img").attr("alt",a.chameleonContext.slides[e].alt)}function k(e){o.find(".chameleon-hightlighted").removeClass("chameleon-hightlighted"),o.find(".info-panel-slide[data-index='"+e+"']").addClass("chameleon-hightlighted")}!function(){if(e.isEmptyObject(i.chameleonContext))throw new Error("Chameleon chameleonContext hasn't been defined.");if(!i.chameleonContext.title&&e.isEmptyObject($o.chameleonContext.download)||(o.append(d),i.chameleonContext.title&&(o.find(".header-container").append('<div class="video-title"></div>'),o.find(".video-title").html(i.chameleonContext.title)),i.showDownloadPanel&&!e.isEmptyObject(i.chameleonContext.download)&&(o.find(".header-container").append(h),void 0!==i.chameleonContext.download.slides&&"object"==typeof i.chameleonContext.download.slides&&(void 0!==i.chameleonContext.download.slides.url&&"string"==typeof i.chameleonContext.download.slides.url&&(o.find(".download-container").append('<a class="download-btn download-slides" target="_blank" download></a>'),o.find(".download-slides").attr("href",i.chameleonContext.download.slides.url)),o.find(".download-slides").length>0&&void 0!==i.chameleonContext.download.slides.title&&"string"==typeof i.chameleonContext.download.slides.title&&(o.find(".download-slides").prepend(v),o.find(".download-slides").attr("title",i.chameleonContext.download.slides.title))),void 0!==i.chameleonContext.download.video&&"object"==typeof i.chameleonContext.download.video&&(void 0!==i.chameleonContext.download.video.url&&"string"==typeof i.chameleonContext.download.video.url&&(o.find(".download-container").append('<a class="download-btn download-video" target="_blank" download></a>'),o.find(".download-video").attr("href",i.chameleonContext.download.video.url)),o.find(".download-video").length>0&&void 0!==i.chameleonContext.download.video.title&&"string"==typeof i.chameleonContext.download.video.title&&(o.find(".download-video").prepend(v),o.find(".download-video").attr("title",i.chameleonContext.download.video.title))),void 0!==i.chameleonContext.download.transcript&&"object"==typeof i.chameleonContext.download.transcript&&(void 0!==i.chameleonContext.download.transcript.url&&"string"==typeof i.chameleonContext.download.transcript.url&&(o.find(".download-container").append('<a class="download-btn download-transcript" target="_blank" download></a>'),o.find(".download-transcript").attr("href",i.chameleonContext.download.transcript.url)),o.find(".download-transcript").length>0&&void 0!==i.chameleonContext.download.transcript.title&&"string"==typeof i.chameleonContext.download.transcript.title&&(o.find(".download-transcript").prepend(v),o.find(".download-transcript").attr("title",i.chameleonContext.download.transcript.title))))),o.append(l),o.append(s),i.responsive||o.css("width",i.width).css("height",i.height),"object"==typeof i.chameleonContext&&(a.chameleonContext=i.chameleonContext,y()),"string"==typeof i.chameleonContext){if("json"!=/(?:\.([^.]+))?$/.exec(i.chameleonContext)[1])throw new Error("JSON file required.");e.getJSON(i.chameleonContext,function(e){a.chameleonContext=e}).done(function(){y()})}}()}e.fn[n]=function(i){if("string"==typeof arguments[0]){var o,a=arguments[0],d=Array.prototype.slice.call(arguments,1);return this.each(function(){if(!e.data(this,"plugin_"+n)||"function"!=typeof e.data(this,"plugin_"+n)[a])throw new Error("Method "+a+" does not exist on jQuery."+n);o=e.data(this,"plugin_"+n)[a].apply(this,d)}),void 0!==o?o:this}if("object"==typeof i||!i)return this.each(function(){e.data(this,"plugin_"+n)||e.data(this,"plugin_"+n,new t(this,i))})},e.fn[n].defaults={width:"968px",height:"270px",chameleonContext:{},numOfCarouselSlide:5,responsive:!1,player:"html5",showMarkers:!1,showCarousel:!1,showDownloadPanel:!1}});

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

154202

increased by6.85%

Number of lines in readme file

66

increased by3.13%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Lines of code

1799

decreased by-3.9%

No dependency changes