Using code below to run video in my banner on Squarespace. Would like it so that when video ends banner loads banner image. Can't seem to get it to work. Any help would be greatly appreciated. Btw, totally new to scripting.
Thanks!
<script type="text/javascript">
$(window).bind("load", function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
} else {
var banner = $('#pageWrapper img').first();
if (banner.length === 0)
banner = $('.banner-thumbnail-wrapper > #thumbnail > img').first();
if (banner.length === 0)
banner = $('#parallax-images img').first();
if (banner.length === 0)
banner = $('.has-main-image img').first();
if (banner.length === 0)
banner = $('#page-thumb img').first();
var url = "VIDEOHERE";
banner.hide();
$('<video class="bannerVideo" autoplay="" preload><source src="' + url + '" type="video/mp4"></video>').insertAfter(banner);
adjustBanner($('.bannerVideo'), banner);
setTimeout(function() {
adjustBanner($('.bannerVideo'), banner);
}, 2000);
$(window, banner).resize(function() {
adjustBanner($('.bannerVideo'), banner);
setTimeout(function() {
adjustBanner($('.bannerVideo'), banner);
}, 200);
});
}
function adjustBanner (video, banner) {
video.css({
height: banner.css('height'),
width: banner.css('width'),
top: banner.css('top'),
left: banner.css('left'),
position: 'relative',
'object-fit': 'inherit'
});
}
});
</script>
You can attach an onended event listener after you have inserted the video.
var video = querySelector('.bannerVideo');
video.onended = function() {
// Display Image
adjustBanner($('.bannerVideo'), banner);
}
Related
I have a jQuery array. What I want to do is fetch an image or video and play it until the specified interval and then play next video or image:
Here is my code:
var side_block_src= [{media:'images/172422009.jpg',interval:10},
{media:'images/172422001.jpg',interval:50},
{media:'images/172422009.jpg',interval:4}
];
var sec = 0;
for(var i = 0; i < side_block_src.length; i++) {
console.log('start');
sec = side_block_src[side_block_src].interval*1000;
setTimeout(function(){
$('#setdata>iframe').attr('src',side_block_src[side_block_src].media);
},sec);
}
Why is it not working?
Update
I made it more simple here is the working code
var i = 0;
show_next(i);
function show_next(i){
if(i <= side_block_src.length - i ){
$('#setdata>iframe').attr('src',side_block_src[i+1].media);
setTimeout(function(){
show_next(i + 1)
}, side_block_src[i+1].interval * 1000);
} else {
i=0;
show_next(i);
}
}
You can use
anything slider jquery plugin for this as below i have used
<script type="text/javascript" src="js/ad/jquery.anythingslider.js"></script>
<script type="text/javascript" src="js/ad/jquery.anythingslider.fx.js"></script>
<script type="text/javascript" src="js/ad/jquery.easing.1.2.js"></script>
$('#slider').anythingSlider({
autoPlay: true,
animationTime: 600,
//expand : true,
// Autoplay video in initial panel, if one exists
onInitialized: function(e, slider) {
playvid(slider);
},
// pause video when out of view
onSlideInit: function(e, slider) {
var vid = slider.$lastPage.find('video');
if (vid.length && typeof(vid[0].pause) !== 'undefined') {
vid[0].pause();
}
},
// play video
onSlideComplete: function(slider) {
playvid(slider);
},
// pause slideshow if video is playing
isVideoPlaying: function(slider) {
var vid = slider.$currentPage.find('video');
return (vid.length && typeof(vid[0].pause) !== 'undefined' && !vid[0].paused && !vid[0].ended);
}
});
and here is html code for it
<ul id="slider">
<li class="panel5">
<video class="Cmsvideo" controls autoplay>
<source src="PATH_OF_VIDEO" type="video/EXTENTION_OF_VIDEO" >
Your browser does not support the video tag. But you could include an iframe/embeded video here. </video>
</li>
<li><img src="PATH_OF_IMAGE" alt="" /></li>
</ul>
Here is my solution:
var i = -1;
showNext(i);
function showNext(i) {
if (side_block_src.length - i > 1) {
$('#setdata>iframe').attr('src',side_block_src[i+1].media);
setTimeout(function()
{
showNext(i + 1)
}, side_block_src[i + 1].interval * 1000);
}
}
I'm trying to lazy-load an image & video file with jQuery, following the example from the URL below:
https://varvy.com/pagespeed/defer-videos.html
https://varvy.com/pagespeed/defer-images.html
The problem is that my paginated data loaded onScroll by jQuery, but all of my image and video wasn't loaded. How can I solve this?
[ Pagination ]
$(window).on('scroll', function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
page += 1;
if (page <= maxPages) {
$.ajax({
beforeSend: function () {
$('.loader').html('Loading....');
},
type: 'GET',
url: 'blog/postloader?page=' + page,
data: { 'page': page },
cache: false,
success: function (data) {
$('.loader').html('Load More...');
$('.blogItems').append(data);
}
});
}
else { $('.loader').html('No More Post Available'); }
}
[ Lazy Loader function ]
function delayImg() {
var imgDefer = document.getElementsByTagName('img');
for (var i = 0; i < imgDefer.length; i++) {
if (imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src', imgDefer[i].getAttribute('data-src'));
}
}
}
//window.onload = delayImg;
// Lazy Load Video
function delayVid() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i = 0; i < vidDefer.length; i++) {
if (vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
}
}
}
//window.onload = delayVid;
function start() {
delayImg();
delayVid();
}
window.onload = start;
you can combine the function with jQuery
function delayMedia() {
$('img, iframe').each(function() {
if (!$(this).attr('src')) { // set only if src is empty
var dataSrc = $(this).data('src');
if (dataSrc)
this.src = dataSrc;
}
});
}
call it on page load and after Ajax
$('.blogItems').append(data);
delayMedia();
And your function are not "really" lazy load, usually it appear after element position reached not on page load
function isVisible(el) {
var rect = el.getBoundingClientRect(),
elemTop = rect.top,
elemBottom = rect.bottom;
return (elemTop >= 0) && (elemBottom <= window.innerHeight);
}
function delayMedia() {
$('img, iframe').each(function() {
if (!$(this).attr('src')) { // set only if src is empty
var dataSrc = $(this).data('src');
if (dataSrc && isVisible(this)){
console.log(dataSrc)
this.src = dataSrc;
}
}
});
}
$(window).on('scroll', function() {
delayMedia();
});
.dh {
height: 300px;
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p class="dh">scroll</p>
<img src="" data-src="https://www.planwallpaper.com/static/images/1712173free-wallpaper.jpg" />
<p class="dh">scroll</p>
<img src="" data-src="https://www.planwallpaper.com/static/images/3d_falling_leaves.jpg" />
<p class="dh">scroll</p>
<img src="" data-src="https://www.planwallpaper.com/static/images/free-wallpapers-640x400.jpg" />
Basically I want my piece of code to animate my menu out of the screen hence my -50px on scroll. and when not scrolling animate back in.
This is the code I have so far. but It only works on every time I refresh my browser.
var $menu = $(".sticky-nav");
var topAnim = $menu.css("top");
var scrollStopped;
var fadeInCallback = function () {
if (typeof scrollStopped != 'undefined') {
clearInterval(scrollStopped);
}
scrollStopped = setTimeout(function () {
$( ".sticky-nav" ).animate({
top: "20px"
}, 300);
});
}
$(window).scroll(function () {
if (!$menu.is(":animated") && topAnim == "20px") {
$( ".sticky-nav" ).animate({
top: "-50px"
}, 300);
} else {
fadeInCallback.call(this);
}
});
jsfiddle.net/B997S
I found 2 issues in your code.
Replaced topAnim in the below line with $menu.css("top") as topAnim always returned a constant.
if (!$menu.is(":animated") && $menu.css("top") == "20px") {
Next issue was
scrollStopped = setInterval(function () { // this is the right format
Please check the below link
http://jsfiddle.net/kapilgopinath/B997S/1/
I create a pop-up dialog box which lift up on left bottom while user scroll page.
You can see it live here- http://uposonghar.com/jobs/odesk/daniel/new/
My problem is it does not smoothly lift up first time, then it is ok. Anyone please suggest any idea to fix it. Need to make smoothly lift up.
My code
<div id="scrolltriggered" style="width: 310px; left: 10px; bottom: 10px;">
<div id="inscroll">
x<a href="http://www.google.com" target="_blank"><img src="images/buyersguide.png" alt="Free Resources" height="235" width="310">
</a>
</div>
</div>
<script type="text/javascript">
var stb = {
hascolsed: false,
cookieLife: 7,
triggerHeight: 30,
stbElement: ""
};
</script>
Javascript Code-
if (typeof stb === "undefined")
var stb = {};
jQuery(document).ready(function () {
jQuery("#closebox").click(function () {
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':'-210px' }, 700, function () {
jQuery('#scrolltriggered').hide();
stb.hascolsed = true;
jQuery.cookie('nopopup', 'true', { expires: stb.cookieLife, path: '/' });
});
return false;
});
stb.windowheight = jQuery(window).height();
stb.totalheight = jQuery(document).height();
stb.boxOffset = '';
if (stb.stbElement != '') {
stb.boxOffset = jQuery(stb.stbElement).offset().top;
}
jQuery(window).resize(function () {
stb.windowheight = jQuery(window).height();
stb.totalheight = jQuery(document).height();
});
jQuery(window).scroll(function () {
stb.y = jQuery(window).scrollTop();
stb.boxHeight = jQuery('#scrolltriggered').outerHeight();
stb.scrolled = parseInt((stb.y + stb.windowheight) / stb.totalheight * 100);
if (stb.showBox(stb.scrolled, stb.triggerHeight, stb.y) && jQuery('#scrolltriggered').is(":hidden") && stb.hascolsed != true) {
jQuery('#scrolltriggered').show();
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':'10px' }, 700, function () {
});
}
else if (!stb.showBox(stb.scrolled, stb.triggerHeight, stb.y) && jQuery('#scrolltriggered').is(":visible") && jQuery('#scrolltriggered:animated').length < 1) {
jQuery('#scrolltriggered').stop(true, true).animate({ 'bottom':-stb.boxHeight }, 700, function () {
jQuery('#scrolltriggered').hide();
});
}
});
jQuery('#stbContactForm').submit(function (e) {
e.preventDefault();
stb.data = jQuery('#stbContactForm').serialize();
jQuery.ajax({
url:stbAjax.ajaxurl,
data:{
action:'stb_form_process',
stbNonce:stbAjax.stbNonce,
data:stb.data
},
dataType:'html',
type:'post'
}).done(function (data) {
jQuery('#stbMsgArea').html(data).show('fast');
});
return false;
});
});
(function(stb_helpers) {
stb_helpers.showBox = function(scrolled, triggerHeight, y) {
if (stb.isMobile()) return false;
if (stb.stbElement == '') {
if (scrolled >= triggerHeight) {
return true;
}
}
else {
if (stb.boxOffset < (stb.windowheight + y)) {
return true;
}
}
return false;
};
stb_helpers.isMobile = function(){
if (navigator.userAgent.match(/Android/i)
|| navigator.userAgent.match(/webOS/i)
|| navigator.userAgent.match(/iPhone/i)
|| navigator.userAgent.match(/iPod/i)
|| navigator.userAgent.match(/BlackBerry/i)
) {
return true;
}
else return false;
}
})(stb);
i think you need css changes, copy paste the following in your aspx
<div style="width: 310px; left: 10px; bottom: -225px; display: none;" id="scrolltriggered">
Hope it Helps
All you need to do is add the following line to your document ready as the First line
$("#scrolltriggered").css({bottom: -235});
This will make sure that the popup is scrolled to the bottom by 235px. If you need it to scroll variably add the Elements height by using jquery selector.
See the Fiddle Here
I am using Anything slider in infinite slides with an HTML 5 video in one slide. The goal is to have the video run each time the slide loops. the problem is in IE9 it seems to break the slider on the second loop. The video does not play nor does it advance to the next slide, it just freezes.
onSlideInit: function (e, slider) {
var vid = slider.$lastPage.find('video');
if (vid.length && typeof (vid[0].pause) !== 'undefined') {
vid[0].pause();
}
},
onSlideBegin: function (e, slider) { },
onSlideComplete: function (slider) {
// make current slide conform to user define data-duration value
var video = slider.$lastPage.find('video');
console.log(video)
if (video.length > 0) {
video[0].currentTime = 0;
}
if (hasVideoSupport == "false") {
jwplayer("container").setup({
file: video,
flashplayer: "http://player.longtailvideo.com/player.swf",
height: 400,
width: 500
});
jwplayer().play()
slider.startStop(false);
onComplete(function () { slider.startStop(true) })
} else {
var vid = slider.$currentPage.find('video');
if (vid.length > 0) {
console.log(vid);
vid[0].play();
}
}
},
Thanks for the help