I have a video player transforming to display at the bottom of the video on hover.
How can I hide the div again after 3 seconds of the video time, even when hovering over the video?
.video-block {
display: flex;
}
.box-btns {
position: absolute;
display: flex;
flex-wrap: wrap;
bottom: 0;
width: 100%;
background-color: rgba(54, 91, 160, 0.56);
z-index: 2;
flex: 1;
transform: translateY(100%);
transition: transform 0.9s;
}
.video-block:hover {
transform: translateY(0%);
transition: transform 0.2s;
}
<div class="video-block">
<video id="main-video" src="../css/abc.mp4"></video>
<div class="media-box">
<div class="box-btns">
<button onclick="playVideo()" class="play-btn">
<i class="ion-play"></i>
</button>
<button onclick="pauseVideo()" class="pause-btn">
<i class="ion-pause"></i>
</button>
</div>
</div>
</div>
If I assume well you want to hide the controls after certain seconds of moving the mouse over rather than after playing. Otherwise you would not be able to pause the video.
I am going to use JavaScript for this. First of all added the mousemove event to add and remove the class responsable of showing the button controls instead of using CSS. I add the box-btns--visible class to the video controls whenever there is a mouse movement over the video. Then I create a 3 seconds timer to remove the box-btns--visible class from the controls, but if I move the mouse before the timer ends I reset the timer. I added the play and pause events and an open source video for you to play around. You can visit this documentation links for better understanding.
HTMLMediaElement
Mouse over event It is not the same event but it has a good example related to your use case
const playButton = document.querySelector('.play-btn');
const pauseButton = document.querySelector('.pause-btn');
const video = document.getElementById('main-video');
const controls = document.querySelector('.box-btns');
let timer;
function hideControls() {
timer = setTimeout(() => controls.classList.remove('box-btns--visible'), 3000);
}
function preventHideControls() {
clearTimeout(timer);
}
video.addEventListener('mousemove', function(e) {
controls.classList.add('box-btns--visible');
preventHideControls();
hideControls();
});
playButton.addEventListener('click', async function(e) {
try {
await video.play();
playButton.setAttribute('disabled', '');
pauseButton.removeAttribute('disabled');
} catch (err) {
playButton.removeAttribute('disabled');
}
});
pauseButton.addEventListener('click', async function(e) {
try {
await video.pause();
pauseButton.setAttribute('disabled', '');
playButton.removeAttribute('disabled');
} catch (err) {
pauseButton.removeAttribute('disabled');
}
});
.video-block {
display: flex;
width: 300px;
height: 100px;
background-color: red;
position: relative;
overflow: hidden;
}
.box-btns {
position: absolute;
display: flex;
flex-wrap: wrap;
bottom: 0;
left: 0;
width: 100%;
opacity: 0;
background-color: rgba(54, 91, 160, 0.56);
z-index: 2;
flex: 1;
transform: translateY(100%);
transition: all 0.9s ease;
}
.box-btns--visible {
transform: translateY(0%);
transition: transform 0.2s;
opacity: 1;
}
.playing {
background-color: black;
color: white;
}
<div class="video-block">
<video id="main-video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>
<div class="media-box">
<div class="box-btns">
<button class="play-btn">
Play
</button>
<button class="pause-btn" disabled>
Pause
</button>
</div>
</div>
</div>
I will show you some example so I think you can get some Idea of that
I used JQuery!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
This part show video on the webpage
<video width=640 muted src="CotswoldSequence1.mov" id="playvid" ontimeupdate="getvidtime(this)"></video>
I use this part to get the current time of the video
ontimeupdate="getvidtime(this)"
This one show you current time of the video during the playing
function getvidtime(event) {
getCurrentTime = Math.trunc(event.currentTime);
document.getElementById("demo").innerHTML = getCurrentTime;
}
This one is show the time when you move the mouse over the video
$('#myvid').mouseenter(function(){
$( ".demox" ).text(getCurrentTime);
});
This section when you move mouse on the video button will be show otherwise it will be hide
$('#myvid').mouseenter(function(){
$('#playbtn').show();
});
$('#myvid').mouseleave(function(){
$('#playbtn').hide();
});
In this section when click the button if ID equel to button ID video will be play and after 3sec button hide as well as when you move mouse out of the the video and then move mouse on the video you can see the which second mouse move on the video " $( ".demox" ).text(getCurrentTime);" and after 3sec buttton hide
$('#playbtn').click(function(){
if(this.id == 'playbtn'){
$('#playvid')[0].play();
setTimeout(() => {
$('#playbtn').fadeOut();
}, 3000);
$('#myvid').mouseenter(function(){
$( ".demox" ).text(getCurrentTime);
setTimeout(() => {
$('#playbtn').hide();
}, 3000);
});
}
});
Here is the full code
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<div class = container style="max-width: 640px;" id="myvid">
<video width=640 muted src="CotswoldSequence1.mov" id="playvid" ontimeupdate="getvidtime(this)"></video>
<div>
<button class=controls id="playbtn" style="position: fixed; top: 332px; left: 12px;">Play/pause</button>
</div>
<p>Playback position: <span id="demo"></span></p>
Mouseenter position: <p class="demox"></p>
</div>
<script>
var getCurrentTime;
function getvidtime(event) {
getCurrentTime = Math.trunc(event.currentTime);
document.getElementById("demo").innerHTML = getCurrentTime;
}
$(document).ready(function(){
$('#myvid').mouseenter(function(){
$('#playbtn').show();
});
$('#myvid').mouseleave(function(){
$('#playbtn').hide();
});
$('#playbtn').click(function(){
if(this.id == 'playbtn'){
$('#playvid')[0].play();
setTimeout(() => {
$('#playbtn').fadeOut();
}, 3000);
$('#myvid').mouseenter(function(){
$( ".demox" ).text(getCurrentTime);
setTimeout(() => {
$('#playbtn').hide();
}, 3000);
});
}
});
});
</script>
I used settimeout because it give same time for the video time
you can use your own video to src="CotswoldSequence1.mov" here
copy this code and past to your editor and run see whats happen!
I think you can get some idea!
Related
I'm creation a video player which redirects to another video page when the video is over.
I want to add a 'Turn Auto Play Off Button' to disable the redirection script.
How can I do that?
My code:
<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
video not supported
</video>
<button id="turnOfAutoPlay">Turn Of Auto Play</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#myVideo").bind('ended', function() {
setTimeout(function() {
location.href = "http://www.localhost.com";
}, 3000)
});
});
</script>
You could remove the listener that fires at the end using unbind()
For jQuery < 1.7 use bind()/unbind()
$('#turnOfAutoPlay').click(function() {
$('#myVideo').unbind('ended');
})
Note: With jQuery 3.0 and up .bind()/.unbind() is deprecated. Use
on()/off()
function videoEndedHandler () {
setTimeout(function() {
location.href = "http://www.localhost.com";
}, 3000)
}
$(document).ready(function() {
document.getElementId("#myVideo").addEventListener('ended', videoEndedHandler);
});
$('#turnOfAutoPlay').on('click', function() {
document.getElementId('#myVideo').removeEventListener('ended', videoEndedHandler);
})
Use global variable for setTimeout function and on click of your "Turn Auto Play Off Button" call clearTimeout
Sample code:
var myVar;
function myFunction() {
myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
function myStopFunction() {
clearTimeout(myVar);
}
Edit: here you go
<video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
video not supported
</video>
<button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var myVar;
$(document).ready(function() {
$("#myVideo").bind('ended', function() {
myVar = setTimeout(function() {
location.href = "http://www.localhost.com";
}, 3000)
});
});
function myStopFunction() {
clearTimeout(myVar);
}
</script>
I modified my code a bit with the help of above discussions, but I think it's lil bulky 😅😅, But it works...
My Code:
const autoplayCheckbox = document.getElementById('autoplayCheckbox');
const video = document.getElementById('myVideo');
var myVar;
function videoEndedHandler () {
myVar = setTimeout(function() {
location.href = "http://www.localhost.com";
}, 10000)
}
//By default autoplay is on.
$(document).ready(function() {
video.addEventListener('ended', videoEndedHandler);
});
autoplayCheckbox.addEventListener('change', function() {
if (this.checked) {
//if autoplay is on
document.getElementById("demo").innerHTML = "Autoplay: On";
$(document).ready(function() {
video.addEventListener('ended', videoEndedHandler);
});
} else {
//if autoplay is off
document.getElementById("demo").innerHTML = "Autoplay: Off";
video.removeEventListener('ended', videoEndedHandler);
}
});
function myStopFunction() {
clearTimeout(myVar);
document.getElementById("autoplayCheckbox").checked = false;
document.getElementById("demo").innerHTML = "Autoplay: Off";
}
* {
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
transition: background 0.4s linear;
background-color: #8ecae6;
font-family: 'oswald';
}
.checkbox {
opacity: 0;
position: absolute;
}
.checkbox:checked + .label .ball {
transform: translateX(23px);
}
.label {
background-color: #111;
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 50px;
position: relative;
padding: 5px;
height: 26px;
width: 50px;
transform-scale(2.2);
}
.ball {
background-color: #fff;
border-radius: 50%;
position: absolute;
top: 2px;
left: 2px;
height: 22px;
width: 22px;
transition: transform 0.3s linear;
}
<br/><br/><video src="http://www.w3schools.com/html/movie.mp4" id="myVideo" controls>
video not supported
</video>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- partial:index.partial.html -->
<div>
<input type="checkbox" class="checkbox" id="autoplayCheckbox" checked="checked">
<label for="autoplayCheckbox" class="label">
<div class="ball"></div>
</label>
</div>
<p id="demo">Autoplay: On</p>
<button id="turnOfAutoPlay" onclick="myStopFunction()">Turn Of Auto Play</button><br/><br/>
The Turn Of Autoplay button only works when 10sec Timeout function is going on..
I added that button because in the main project it also works as a button to dismiss the modal Have a look
Can i minify it??
I've built this gallery
https://jsfiddle.net/ramamamagagaulala/do4yLxcz/
let images = document.querySelectorAll('.work-item');
let best = document.querySelector('.work-modal');
let main = document.querySelector('.work-modal__item');
console.log(images)
let closeButton = document.getElementById("closee");
images.forEach(function(ref) {
ref.addEventListener('click', function(){
let newImage = this.getElementsByTagName('img')[0].src;
best.classList.add('work-modal--show');
main.style.backgroundImage = `url( ${newImage} )`;
})
})
closeButton.addEventListener('click', function() {
best.classList.remove('work-modal--show');
});
basically, it works like this:
you click an item.
JavaScript checks what IMG this item contains.
a modal window opens up.
then the IMG that is associated with the item, is going to be displayed as the background image of this modal.
So far so good, however, I would like to build a function so I can press the arrow keys on my keyboard and the next image is going to be displayed.
What I've tried is to select the IMG of the nextSibling while clicking. Then I have used this variable to set up the background image of the modal window. But this only worked once.
Any ideas what to try next?
I would suggest have list of images urls in an array in .js file, and then you show one modal, click right/left and just change img src value to next/previous array element, untill get to either end of array.
There are three things we need to do for this problem
Storing the image source in an array
Keep track of the position of the image index
Add an event listener to track the keypress for next & prev button on your keyboard
let images = document.querySelectorAll('.work-item');
let best = document.querySelector('.work-modal');
let main = document.querySelector('.work-modal__item');
let closeButton = document.getElementById("closee");
let currentIndex = -1;
let imgSrc = [];
images.forEach(function(ref,index) {
imgSrc.push(ref.children[0].getAttribute("src"));
ref.addEventListener('click', function(){
let newImage = this.getElementsByTagName('img')[0].src;
best.classList.add('work-modal--show');
main.style.backgroundImage = `url( ${newImage} )`;
currentIndex = index
});
})
closeButton.addEventListener('click', function() {
best.classList.remove('work-modal--show');
});
let doc = document.getElementById("work");
window.addEventListener("keydown", event => {
if(event.keyCode === 39){
// next event
if(currentIndex < imgSrc.length -1 ){
main.style.backgroundImage = `url( ${imgSrc[currentIndex+1]} )`;
currentIndex=currentIndex+1;
} else {
alert("Reached last image")
}
} else if(event.keyCode === 37){
// prev event
if(currentIndex > 0){
main.style.backgroundImage = `url( ${imgSrc[currentIndex-1]} )`;
currentIndex=currentIndex-1;
} else {
alert("Reached first image")
}
}
});
.work-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
}
img {
width: 250px;
}
.work-item__img{
width: 100%;
height: 100%;
display: block;
transition: all 1s linear;
opacity: 1;
object-fit: cover;
transform: scale(1.1);
}
/* modal */
.work-modal{
display: none;
}
.work-modal--show{
position: fixed;
background: rgba(0,0,0,0.5);
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
display: grid;
justify-content: center;
align-items: center;
}
.work-modal__item{
height: 70vh;
width: 80vw;
border:0.5rem solid var(--yellow);
border-radius: 0.4rem;
}
#media screen and (min-width:768px){
.work-modal__item{
height: 80vh;
width: 60vw;
}
}
.work-modal__close{
position: fixed;
font-size: 3rem;
color: var(--brightYellow);
bottom: 5%;
right: 5%;
transition: color 0.5s linear;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
.work-modal__close:hover{
color: red;
}
<section class="work section-padding" id="work">
<div class="work-container">
<div class="work-item item-1">
<img src="https://images.pexels.com/photos/2683138/pexels-photo-2683138.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" class="work-item__img">
</div>
<div class="work-item item-2">
<img src="https://images.pexels.com/photos/2736220/pexels-photo-2736220.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" class="work-item__img">
</div>
<div class="work-item item-3">
<img src="https://images.pexels.com/photos/2928178/pexels-photo-2928178.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" class="work-item__img">
</div>
</div>
</section>
<div class="work-modal">
<div class="work-modal__item"></div>
<div class="work-modal__close">
<i id="closee" class="fas fa-window-close">close</i>
</div>
</div>
JS Fiddle
https://jsfiddle.net/aamin89/b5wp3kez/1/
JS newbie here. I have an issue that is probably has a fairly simple answer, but I haven't been able to figure it out yet. I wasn't sure exactly what to call this thing.
I have text in a div and when you hover over it, it displays a picture in another div. This is working fine, but I would like to have it scroll through the images automatically when the page loads. Once the user hovers over one of the text divs, I'd like the auto scroll to stop.
I have a Codepen of how I have it set up here: https://codepen.io/johnballman/pen/dwEwRz
HTML:
<div class="app-screen">
<img src="http://placehold.it/350x150">
</div>
<div id="features">
<article data-src="http://placehold.it/350x150">Link 1</article>
<article data-src="http://placehold.it/350x250">Link 2</article>
<article data-src="http://placehold.it/350x350">Link 3</article>
</div>
CSS:
.app-screen {
float: left;
margin-right: 100px;
display: block;
width: 350px;
height: 200px;
background-color: grey;
padding-top: 100px;
}
img.active{
z-index: 2 !important;
opacity: 1 !important;
transition:opacity 1s linear;
}
JS:
$("#features article").hover( function() {
var value=$(this).attr('data-src');
$(".app-screen img").attr("src", value);
});
$(this).switchClass("", "active", 1000);
Any help would be great. Thanks.
Use setInterval to loop a c current counter.
Use ++c % tot (where tot is the number of links) to: increment-loop the counter.
Use only Classes. That way you can have multiple .Features elements in a single page!
Create show, stop and play functions. show is to show a c image; stop is to stop the interval, and play to start your magic.
/**
* Features
* Auto-change articles featured images
*/
$('.Features').each((i, el) => {
const $this = $(el);
const $image = $this.find('.Features-image');
const $link = $this.find('.Features-link');
const tot = $link.length;
let c = 0; // Counter to keep track of Current image
let itv = null; // Interval loop
const show = () => {
$image.css({backgroundImage: `url("${$link.eq(c).data().src}")`});
$link.removeClass('is-active').eq(c).addClass('is-active');
}
const stop = () => clearInterval(itv);
const play = () => itv = setInterval(() => {
c = ++c % tot; // Preincrement + loop (% = reminder operator)
show(); // Show c image
}, 3000);
// Link mouseenter
$link.on({
mouseenter() {
c = $link.index(this);
stop(); // Stop ongoing auto-play
show(); // Show c image
},
mouseleave() {
play(); // Play on mouseleave
}
});
// Init
show(); // Show c image
play(); // Start play!
});
/*QuickReset*/ *{margin:0;box-sizing:border-box;}html,body{height:100%;font:14px/1.4 sans-serif;}
/**
* Features
* jQuery-handled articles with featured images
*/
.Features {
display: flex;
min-height: 200px;
}
.Features-image {
background: #aaa 50% / cover no-repeat none;
transition: background 0.5s;
flex: 0 1 40%;
}
.Features-links {
display: flex;
flex: 1;
flex-flow: column;
}
.Features-link {
flex: 1;
padding: 10px;
transition: background 0.3s;
border-bottom: 1px solid #ddd;
}
.Features-link:hover,
.Features-link.is-active{
background: #eee;
}
<div class="Features">
<div class="Features-image"></div>
<div class="Features-links">
<article class="Features-link" data-src="//placehold.it/350x350/0bf">Link 1</article>
<article class="Features-link" data-src="//placehold.it/350x350/f0b">Link 2</article>
<article class="Features-link" data-src="//placehold.it/350x350/0fb">Link 3</article>
</div>
</div>
<div class="Features">
<div class="Features-image"></div>
<div class="Features-links">
<article class="Features-link" data-src="//placehold.it/350x350/28a">Lorem</article>
<article class="Features-link" data-src="//placehold.it/350x350/a28">Ipsum</article>
<article class="Features-link" data-src="//placehold.it/350x350/8a2">Dolor</article>
</div>
</div>
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
How can I change the animation duration onclick? This is what I've done, I created two buttons, one with an animationduration of 10s while the other has an animationduration of 20s. The duration regardless of which button I click is the same, 10 seconds, as it is in the class section. How can I get depending on the button I click two different durations? Please use normal Javascript, no Jquery. Thank you! I also need to use the document.GetElementById().classname =""; as it is in the code.
function tenseconds() {
animation();
var sd = document.getElementById('ghost').className = 'earth';
sd.style.animationDuration = "10s";
}
function twentyseconds() {
animation();
var sd = document.getElementById('ghost').className = 'earth';
sd.style.animationDuration = "20s";
}
function animation() {
document.getElementById('ghost').className = 'earth';
}
<!DOCTYPE html>
<html>
<head>
<style>
.earth {
position: relative;
animation: move 10s linear;
background: red;
height: 20px;
width: 20px;
}
#-webkit-keyframes move {
from {
left: 0%;
}
to {
left: 100%;
}
}
</style>
</head>
<body>
<div id="ghost"> </div>
<button onclick="tenseconds();">10 seconds </button>
<button onclick="twentyseconds()"> 20 seconds </button>
</body>
</html>
Updated to use an animation, data attributes etc. Customize as needed. NOT supported in Edge, IE perhaps others. Leave to you to investigate possible ways to fix that. Review OLD edit for the original "fix"
I added another element and button so you could see how it might be used.
var myAnimation = {
keyframes: [
// keyframes
{
transform: 'translateX(0px)'
},
{
transform: 'translateX(300px)'
}
],
options: {
// timing options
// ms of duration default 1 second
duration: 1000,
iterations: 1, //forever would be Infinity
easing: "linear"
}
};
function animation(target, duration, visual) {
let sd = document.getElementById(target);
sd.className = visual;
myAnimation.options.duration = duration * 1000;
sd.animate(myAnimation.keyframes, myAnimation.options,visual);
}
function setup() {
let classThings = document.getElementsByClassName("animate-button");
let myFunction = function() {
let duration = this.dataset.duration;
let visual = this.dataset.visual;
let target = this.dataset.target;
animation(target, duration, visual);
};
for (var i = 0; i < classThings.length; i++) {
classThings[i].addEventListener('click', myFunction, false);
}
}
(function() {
setup();
})();
<!DOCTYPE html>
<html>
<head>
<style>
.fire {
position: relative;
background: red;
height: 20px;
width: 20px;
}
.water {
position: relative;
background: blue;
height: 20px;
width: 20px;
}
</style>
</head>
<body>
<div id="ghost"></div>
<div id="billy"></div>
<button class="animate-button" data-duration="10" data-target="ghost" data-visual="fire">10 seconds</button>
<button class="animate-button" data-duration="20" data-target="ghost" data-visual="fire">20 seconds</button>
<button class="animate-button" data-duration="5" data-target="billy" data-visual="water">5 seconds billy</button>
</body>
</html>
I created a little function that takes the animation time in seconds as an argument. Read the comments in the code for explanation.
function animation(duration) {
// select whatever element you are trying to animate
let target = document.getElementById('ghost');
// change the animationduration before starting to animate
target.style.animationDuration = `${duration}s`;
// add the animating class and start the animation
target.classList.add('animating');
// create a timeout to remove the animating class from your animated element
setTimeout(() => {
target.classList.remove('animating');
}, `${duration*1000}`);
}
#ghost{
position: relative;
background: red;
height: 20px;
width: 20px;
}
.animating {
animation: move 10s linear;
}
#-webkit-keyframes move {
from {
left: 0%;
}
to {
left: 100%;
}
}
<!DOCTYPE html>
<div id="ghost"> </div>
<button onclick="animation(10);">10 seconds </button>
<button onclick="animation(20);"> 20 seconds </button>
I am trying to achieve an effect of looping through images if a div is hovered or not.
If mouseenter div then cycle through images
if mouseleave div then stop cycling through images and remove all images (only background image will be visible).
currently I am using a setTimeout to fire itself recursively but I am having trouble with jquery on detecting if the mouse is hovering or left the object.
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
});
Here is a codepen for reference: http://codepen.io/H0BB5/pen/xEpqbv
A similar effect I am trying to achieve can be seen when hovering the cargo logo on this website: http://cargocollective.com/
You just need to clear the timer on mouseleave.
var timer = null;
$(".one-box").mouseenter(function(){
timeout();
function timeout() {
timer = setTimeout(function(){
logoImageLoop();
timeout();
}, 100);
};
}).mouseleave(function(){
clearTimeout(timer);
});
Here's a codepen: http://codepen.io/anon/pen/rrpwYJ
I would use an interval, and the JQuery .hover() functionality. Simply replacing your $(".one-box").mouseenter() with this will run the loop while you're hovered and remove it once your mouse leaves the area.
The important bit:
var imageChangeInterval;
$(".one-box").hover(function() {
imageChangeInterval = setInterval(function() {
logoImageLoop();
}, 100);
}, function() {
clearInterval(imageChangeInterval);
});
Full example:
function logoImageLoop() {
$(".one-box .social_gallery .social_img:first").show().next(".social_img").hide().end().appendTo(".one-box .social_gallery");
};
var oneBoxIsHover = false;
// New code:
var imageChangeInterval;
$(".one-box").hover(function() {
imageChangeInterval = setInterval(function() {
logoImageLoop();
}, 100);
}, function() {
clearInterval(imageChangeInterval);
});
.one-box {
position: relative;
height: 300px;
width: 300px;
}
.one-box a {
width: 100%;
}
.one-box a img {
max-width: 100%;
}
/* .social_img { display: none; } */
a#social_logo {
background-image: url(https://s3-us-west-2.amazonaws.com/staging-site-assets/one-method/instagram-logo.png);
background-repeat: no-repeat;
background-position: 0 0;
display: block;
position: absolute;
width: 73px;
height: 73px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99;
}
.one_box .social_gallery {
position: absolute;
left: 0;
top: 0;
opacity: 1;
display: none;
}
.nav_logo .social_gallery .social_img {
position: absolute;
float: none;
margin: 0;
opacity: 1;
filter: alpha(opacity=100);
overflow: hidden;
top: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one-box nav_logo">
<a id="social_logo" href="#" alt=""></a>
<div class="social_gallery img_wall gallery">
<div class="social_img wall_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=222&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=777&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
<div class="social_img">
<a class="social_link" href="#">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=fb2&txt=300%C3%97300&w=300&h=300" />
</a>
</div>
</div>
<div>