From 5acf2cfa8517fcbd90adc7284b653de6b1f8b12b Mon Sep 17 00:00:00 2001 From: christian-seifert Date: Fri, 14 Feb 2014 15:05:21 +0100 Subject: [PATCH 1/3] Update VideoSlider call .anythingSliderVideo() to update --- js/jquery.anythingslider.video.js | 84 ++++++++++++++++++------------- 1 file changed, 50 insertions(+), 34 deletions(-) diff --git a/js/jquery.anythingslider.video.js b/js/jquery.anythingslider.video.js index 5d4045a..c7680a7 100644 --- a/js/jquery.anythingslider.video.js +++ b/js/jquery.anythingslider.video.js @@ -24,53 +24,67 @@ } // ,onVideoInitialized : function(base){} }; + return this.each(function(){ // make sure a AnythingSlider is attached var video, tmp, service, sel, base = $(this).data('AnythingSlider'); if (!base) { return; } - video = base.video = {}; - // Next update, I may just force users to call the video extension instead of it auto-running on window load - // then they can change the video options in that call instead of the base defaults, and maybe prevent the - // videos being initialized twice on startup (once as a regular video and second time with the API string) - video.options = $.extend({}, defaults, options); - - // check if SWFObject is loaded - video.hasSwfo = (typeof(swfobject) !== 'undefined' && swfobject.hasOwnProperty('embedSWF') && typeof(swfobject.embedSWF) === 'function' && swfobject.hasFlashPlayerVersion('1')); - - video.list = {}; - video.hasVid = false; - video.hasEmbed = false; - video.services = $.fn.anythingSliderVideo.services; - video.hasEmbedCount = 0; - video.hasiframeCount = 0; - video.$items = base.$items.filter(':not(.cloned)'); - + //custom code + if(typeof base.video == 'undefined'){ + video = base.video = {}; + // Next update, I may just force users to call the video extension instead of it auto-running on window load + // then they can change the video options in that call instead of the base defaults, and maybe prevent the + // videos being initialized twice on startup (once as a regular video and second time with the API string) + video.options = $.extend({}, defaults, options); + + // check if SWFObject is loaded + video.hasSwfo = (typeof(swfobject) !== 'undefined' && swfobject.hasOwnProperty('embedSWF') && typeof(swfobject.embedSWF) === 'function' && swfobject.hasFlashPlayerVersion('1')); + video.list = {}; + video.hasVid = false; + video.hasEmbed = false; + video.services = $.fn.anythingSliderVideo.services; + video.hasEmbedCount = 0; + video.hasiframeCount = 0; + video.$items = base.$items.filter(':not(.cloned)'); + } else { + video = base.video; + video.$items = base.$items.filter(':not(.cloned)'); + } + // find and save all known videos for (service in video.services) { /*jshint loopfunc:true */ if (typeof(service) === 'string') { sel = video.services[service].selector; video.$items.find(sel).each(function(){ tmp = $(this); - // save panel and video selector in the list - tmp.attr('id', video.options.videoId + $.fn.anythingSliderVideo.videoIndex); - video.list[$.fn.anythingSliderVideo.videoIndex] = { - id : video.options.videoId + $.fn.anythingSliderVideo.videoIndex++, - panel : tmp.closest('.panel')[0], - service : service, - selector : sel, - status : -1 // YouTube uses -1 to mean the video is unstarted - }; - video.hasVid = true; - if (sel.match('embed|object')) { - video.hasEmbed = true; - video.hasEmbedCount++; - } else if (sel.match('iframe')) { - video.hasiframeCount++; + var pan = tmp.closest('.panel'); + if(pan.data('AnythingSliderVideoInitialized') != true){ + // save panel and video selector in the list + tmp.attr('id', video.options.videoId + $.fn.anythingSliderVideo.videoIndex); + video.list[$.fn.anythingSliderVideo.videoIndex] = { + id : video.options.videoId + $.fn.anythingSliderVideo.videoIndex++, + panel : pan[0], + service : service, + selector : sel, + status : -1, // YouTube uses -1 to mean the video is unstarted + isInitialized : false, //custom Code Mark as Initialized to prevent double initialisation on adding video to slider + }; + //custom Code + //add indicator that this video was already initialized + pan.data('AnythingSliderVideoInitialized', true); + video.hasVid = true; + if (sel.match('embed|object')) { + video.hasEmbed = true; + video.hasEmbedCount++; + } else if (sel.match('iframe')) { + video.hasiframeCount++; + } } }); } } + // Initialize each video, as needed $.each(video.list, function(i,s){ // s.id = ID, s.panel = slider panel (DOM), s.selector = 'jQuery selector' @@ -80,7 +94,7 @@ api = service.api && service.api.initParam || '', apiId = service.api && service.api.playerId || ''; // Initialize embeded video javascript api using SWFObject, if loaded - if (video.hasEmbed && video.hasSwfo && s.selector.match('embed|object')) { + if (video.hasEmbed && video.hasSwfo && s.selector.match('embed|object') && !s.isInitialized /* Custom Code */) { $vid.each(function(){ $t = $(this); // Older IE doesn't have an object - just make sure we are wrapping the correct element @@ -106,7 +120,7 @@ } ); }); - } else if (s.selector.match('iframe')) { + } else if (s.selector.match('iframe') && !s.isInitialized /* Custom Code */) { $vid.each(function(){ var $t = $(this); if (service.hasOwnProperty('init')) { @@ -114,6 +128,8 @@ } }); } + //custom code -> als initialisiert kennzeichnen + s.isInitialized = true; }); // Returns URL parameter; url: http://www.somesite.com?name=hello&id=11111 From d9515b09e733d9aa9704d733c309a122b29634b3 Mon Sep 17 00:00:00 2001 From: christian-seifert Date: Fri, 14 Feb 2014 15:25:32 +0100 Subject: [PATCH 2/3] demos updating Video Sldier --- demos/css/page.css | 24 ++++++++++ video.html | 113 +++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 137 insertions(+) diff --git a/demos/css/page.css b/demos/css/page.css index ca16f23..ccc7a44 100644 --- a/demos/css/page.css +++ b/demos/css/page.css @@ -165,6 +165,30 @@ body#expand h3 { text-align: center; } .prob { background: #880; } .group { border: #000 1px solid; } +/************************** +Updating Video +**************************/ + +#updatingVideoDemo div#slider1, ul#slider1 div { + width: 300px; + height: 200px; + list-style: none; +} + +#updatingVideoDemo div#slider2, div#slider2 div { + width: 300px; + height: 200px; + list-style: none; +} + +#updatingVideoDemo .updatingVideoDemoInputs { + clear: both; + left: 50%; + margin-left: -200px; + position: relative; + width: 400px; +} + /****************** css3 demo page ******************/ diff --git a/video.html b/video.html index 6c98dbb..2012468 100644 --- a/video.html +++ b/video.html @@ -51,6 +51,88 @@ fs : 1 } }); + + //Update demo + $("#slider1, #slider2").anythingSlider({ + expand: false, + resizeContents: false, + mode: "fade", + autoPlay: false, + delay: 5000, + infiniteSlides: false, + buildArrows : true, // If true, builds the forwards and backwards buttons + buildNavigation : false, // If true, builds a list of anchor links to link to each panel + buildStartStop : false, // If true, builds the start/stop button + resumeDelay : 2500, // Resume slideshow after user interaction, only if autoplayLocked is true (in milliseconds). + animationTime : 800, // How long the slideshow transition takes (in milliseconds) + }) //AnythingSlider + .anythingSliderVideo({ + // video id prefix; suffix from $.fn.anythingSliderVideo.videoIndex + videoId : 'asvideo', + // this option replaces the `addWmodeToObject` option in the main plugin + wmode : "opaque", + // auto load YouTube api script + youtubeAutoLoad : true, + // YouTube iframe parameters, for a full list see: + // https://developers.google.com/youtube/player_parameters#Parameters + youtubeParams : { + modestbranding : 1, + autohide : 1, + color: 'white', + fs: 0, + controls: 1, + showinfo: 0, + rel: 0, + wmode: 'opaque' // this is set by the wmode option above, so no need to include it here + } + }); + //add Video + $(document).on('click', '#sliderOneAdd', function(){ + var html = '
'; + //append + $(html).appendTo('#slider1'); + //update + $('#slider1').anythingSlider().anythingSliderVideo(); + //alert + alert('Video added successfully!'); + }); + + //add Video + $(document).on('click', '#sliderTwoAdd', function(){ + var html = '
'; + //append + $(html).appendTo('#slider2'); + //update + $('#slider2').anythingSlider().anythingSliderVideo(); + //alert + alert('Video added successfully!'); + }); + + //delete Video + $(document).on('click', '#sliderOneRemove', function(){ + var api = $('#slider1').data('AnythingSlider'); + if(api){ + var page = api.$currentPage; + page.remove(); + //update + $('#slider1').anythingSlider().anythingSliderVideo(); + //alert + alert('Video removed!'); + } + }); + + //delete Video + $(document).on('click', '#sliderTwoRemove', function(){ + var api = $('#slider2').data('AnythingSlider'); + if(api){ + var page = api.$currentPage; + page.remove(); + //update + $('#slider2').anythingSlider().anythingSliderVideo(); + //alert + alert('Video removed'); + } + }); }); @@ -380,6 +462,37 @@

Legend (Updated 4/23/2013)


+ +
+

Updating Video Sliders

+
+
+ +
+
+ +
+
+ +
+
+
+ + + +
+
+
+
+ +
+
+
+ + + +
+
From 45e8fb659abf9116ea6be62eb796b178a99febd4 Mon Sep 17 00:00:00 2001 From: christian-seifert Date: Fri, 14 Feb 2014 15:29:58 +0100 Subject: [PATCH 3/3] edit comments --- js/jquery.anythingslider.video.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/jquery.anythingslider.video.js b/js/jquery.anythingslider.video.js index c7680a7..34c03e5 100644 --- a/js/jquery.anythingslider.video.js +++ b/js/jquery.anythingslider.video.js @@ -30,7 +30,7 @@ // make sure a AnythingSlider is attached var video, tmp, service, sel, base = $(this).data('AnythingSlider'); if (!base) { return; } - //custom code + //if anythingSliderVideo was initialized before, don't overwrite it if(typeof base.video == 'undefined'){ video = base.video = {}; // Next update, I may just force users to call the video extension instead of it auto-running on window load @@ -68,9 +68,9 @@ service : service, selector : sel, status : -1, // YouTube uses -1 to mean the video is unstarted - isInitialized : false, //custom Code Mark as Initialized to prevent double initialisation on adding video to slider + isInitialized : false, //Mark as Initialized to prevent double initialisation on adding video to slider }; - //custom Code + //add indicator that this video was already initialized pan.data('AnythingSliderVideoInitialized', true); video.hasVid = true; @@ -128,7 +128,7 @@ } }); } - //custom code -> als initialisiert kennzeichnen + //mark as initialized s.isInitialized = true; });