Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updateable anythingSliderVideo #604

Merged
merged 3 commits into from
Feb 18, 2014
Merged

Updateable anythingSliderVideo #604

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5acf2cf
Update VideoSlider
christian-seifert Feb 14, 2014
d9515b0
demos updating Video Sldier
christian-seifert Feb 14, 2014
45e8fb6
edit comments
christian-seifert Feb 14, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions demos/css/page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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
Open in desktop
Original file line number Diff line number Diff line change
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