Skip to content

Commit

Permalink
Merge pull request #604 from christian-seifert/master
Browse files Browse the repository at this point in the history 
Updateable anythingSliderVideo
  • Loading branch information
@Mottie
Mottie committed Feb 18, 2014
2 parents 93cb5da + 45e8fb6 commit b72e317
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 34 deletions.
24 changes: 24 additions & 0 deletions demos/css/page.css
View file
Expand Up @@ -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
******************/
Expand Down
84 changes: 50 additions & 34 deletions js/jquery.anythingslider.video.js
View file
Expand Up @@ -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)');

//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
// 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, //Mark as Initialized to prevent double initialisation on adding video to slider
};

//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'
Expand All @@ -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
Expand All @@ -106,14 +120,16 @@
}
);
});
} 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')) {
service.init(base, $t, i);
}
});
}
//mark as initialized
s.isInitialized = true;
});

// Returns URL parameter; url: http://www.somesite.com?name=hello&id=11111
Expand Down
113 changes: 113 additions & 0 deletions video.html
View file
Expand Up @@ -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 = '<div class="videoContainer"><iframe height="100%" width="100%" src="'+ $('#sliderOneInput').val() +'" frameborder="0"></iframe></div>';
//append
$(html).appendTo('#slider1');
//update
$('#slider1').anythingSlider().anythingSliderVideo();
//alert
alert('Video added successfully!');
});

//add Video
$(document).on('click', '#sliderTwoAdd', function(){
var html = '<div class="videoContainer"><iframe height="100%" width="100%" src="'+ $('#sliderTwoInput').val() +'" frameborder="0"></iframe></div>';
//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');
}
});
});
</script>

Expand Down Expand Up @@ -380,6 +462,37 @@ <h3>Legend (<small>Updated 4/23/2013</small>)</h3>
</div>

<br>

<div id="updatingVideoDemo">
<h1>Updating Video Sliders</h1>
<div id="slider1">
<div class="videoContainer">
<iframe height="100%" width="100%" src="//www.youtube.com/embed/9hGoTnTCyRo" frameborder="0"></iframe>
</div>
<div class="videoContainer">
<iframe height="100%" width="100%" src="//www.youtube.com/embed/gB0sJA6SK5I" frameborder="0"></iframe>
</div>
<div class="videoContainer">
<iframe height="100%" width="100%" src="//www.youtube.com/embed/dLA76V-e2TM" frameborder="0"></iframe>
</div>
</div>
<div class="updatingVideoDemoInputs">
<input name="videoUrlOne" id="sliderOneInput" type="text" placeholder="embedded URL" />
<input type = "button" id="sliderOneAdd" value="Add Video"/>
<input type = "button" id="sliderOneRemove" value="Delete Video"/>
</div>
<br/>
<div id="slider2">
<div class="videoContainer">
<iframe height="100%" width="100%" src="//www.youtube.com/embed/TTMNqh_eGcU" frameborder="0"></iframe>
</div>
</div>
<div class="updatingVideoDemoInputs">
<input name="videoUrlTwo" id="sliderTwoInput" type="text" placeholder="embedded URL" />
<input type = "button" id="sliderTwoAdd" value="Add Video"/>
<input type = "button" id="sliderTwoRemove" value="Delete Video"/>
</div>
</div>

</body>

Expand Down

0 comments on commit b72e317

Please sign in to comment.