Develop Reference

On mouseout stop setInterval

I'm trying to create a simple image rotator on hover effect. It working properly on mouse hover, but doesn't work when mouse out method.
var imgFlip = $("img").data( "flip" );
var imgOriginal = $("img").data( "original" );
var images = imgFlip.split(/,|, |;|; /);
var index = 0;
function rotateImage()
{
$('.img-rotator').fadeOut('fast', function()
{
$(this).attr('src', images[index]);
$(this).fadeIn('fast', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
$('.img-rotator')
.mouseover(function () {
var refreshIntervalId = setInterval (rotateImage, 1000);
})
.mouseout(function () {
$(this).attr('src', imgOriginal);
})
});
Jsfiddle example here - https://jsfiddle.net/wbz35L68/15/
Thank you for any advice

You need to clear the setInterval on mouseout. I also reworked some of your code to clean things up and cache refs. You should also use mouseenter and mouseleave for this.
$(document).ready(function(){
// cache selector
var rotator = $('.img-rotator'),
// grab all data
data = rotator.data(),
// ref flip
imgFlip = data.flip,
// ref original
imgOriginal = data.original,
// get image urls
images = imgFlip.split(/,|, |;|; /),
// start index
index = 0,
// ref interval
refreshIntervalId = null;
function rotateImage(){
rotator.fadeOut('fast', function(){
$(this)
.attr('src', images[index])
.fadeIn('fast', function(){
var last = index === images.length - 1;
index = last ? 0 : index + 1;
});
});
}
rotator
.mouseenter(function(){
refreshIntervalId = setInterval(rotateImage, 1000);
})
.mouseleave(function(){
// clear interval and set null
clearInterval(refreshIntervalId) && (refreshIntervalId = null);
$(this).attr('src', imgOriginal);
})
});
.container {
margin-top: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col">
<img class="img-rotator" data-flip="http://www.snorkl.tv/dev/loaderMax/images/bird.png, http://www.snorkl.tv/dev/loaderMax/images/whale.png" data-original="http://www.snorkl.tv/dev/loaderMax/images/crab.png" src="http://www.snorkl.tv/dev/loaderMax/images/crab.png" width="320" height="200"/>
</div>
</div>
</div>

CSS JS transition in slider

I've a slider in my code, it's need to be transition, but it doesn't work.
Here is the JS code
It's also not working in CSS...
It needs to be transitioning when the image is changing. I need a slow changing of images in my slider.
actually I tried this in js:
document.getElementById("img").style.transition = "5s ease";
Here is HTML
<div class="photo_div">
<img id="img" src="">
</div>
<button onclick="prev()">PREV</button>
<button onclick="next()">NEXT</button>
</div>
Here is JS
var names = ["img1.jpg", "img2.jpg", "img3.jpg"];
var index = 0;
function init() {
document.getElementById("img").src = "photo/" + names[index];
autoSlide();
}
function next() {
index++;
if (index == names.length) {
index = 0;
}
document.getElementById("img").src = "photo/" + names[index];
}
function prev() {
if (index == 0) {
index = names.length
}
index--;
document.getElementById("img").src = "photo/" + names[index];
}
function autoSlide() {
if (index < names.length) {
setInterval(function() {
next();
}, 3000);
}
}

In the next and prev functions fade out the image - and set queuing to true, then change the image, then fade the img tag back in.
You can try the following for next, and something similar for prev:
function next() {
index++;
if (index == names.length) {
index = 0;
}
$('#img').fadeOut("slow", "linear", function(){
document.getElementById("img").src = "photo/" + names[index];
$('#img').fadeIn("slow", "linear");
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you can't use jQuery, maybe have a look at this.

How to do line preloader with jquery

I tried this code for a line preloader but it didn't work and i don't know where is the problem.
var $preload = $("<div class='preloader'><div class='percent'></div><div class='line-parent'><div class='line'></div></div></div>");
$("body").prepend($preload);
var $imgs = $("img");
var imgsLoaded = 0;
var ratio = 0;
$imgs.each(function(){
$this = $(this);
$this.load(function(){
imgsLoaded++;
ratio = imgsLoaded / $imgs.length;
$(".percent").html(ratio / 0.01 + "%");
$(".line").animate({
width : ratio / 0.01 + "%"
});
}, function(){
if(ratio === 1){
$(".preloader").fadeOut();
}
});
});

I belive you want to show 100% wenn all images are loaded and do some action. First load event will not work if is atteched after image is already loaded.
I sugest to check for each img comlete and naturalWidth property every 100ms (with setInterval).
Loader = (function() {
var list, img_length, loaded, interval;
function _check_one(i) { o = list[i]; if (o.complete == true && o.naturalWidth > 0) { loaded++; delete list[i]; } };
function _procent(l, a) { console.log((100*loaded/img_length) + '%'); }
function _check_list() { for(var i in list) {_check_one(i)};_procent();_kill(); };
function _kill() { if(img_length <= loaded) clearInterval(interval); }
function _start() { loaded = 0; list = $('img'); img_length = list.length;
if(img_length != loaded) interval = setInterval(_check_list, 100); }
return { start: _start }
})();
Now at end of the body or in $(document).ready(..) you need to call Loader.start();
Or put all images source (src) in data-src attribite, attach load events and copy data-scr to src attribite. In body all relevant images looks like this:
<img data-src="some url">...
In Script Tag:
$('img').on('load', function() {
// Your action.
}).each(function() { var img = $(this); img.attr('src', img.attr('data-src')); });

How to interchange between 2 logos?

I have the following code:
var logo1 = "//cdn.shopify.com/s/files/1/0816/3411/t/3/assets/logo_2x.png";
var logo2 = "//cdn.shopify.com/s/files/1/0816/3411/t/3/assets/logo_hover_2x.png";
var images = new Array (logo1, logo2);
var index = 1;
function rotateImage()
{
$('.logoimage').fadeOut('fast', function()
{
$(this).attr('src', images[index]);
$(this).fadeIn('fast', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
setInterval (rotateImage, 5000);
});
var images = new Array (logo2);
var index = 1;
function rotateImage()
{
$('.logoimage').fadeOut('fast', function()
{
$(this).attr('src', images[index]);
$(this).fadeIn('fast', function()
{
if (index == images.length-1)
{
index = 0;
}
else
{
index++;
}
});
});
}
$(document).ready(function()
{
setInterval (rotateImage, 5000);
});
Its working well apart from the following bugs:
Image loads even though image already is showing on page.
I have an image onmousehover effect on that image and its causing bad effect.
Is it possible to interchange between the image src and the img onmousehover src?
Thanks
Alex

you can change the src of the img tag using JavaScript as below,
function hover(element) {
element.setAttribute('src', '//cdn.shopify.com/s/files/1/0816/3411/t/3/assets/logo_2x.png');
}
function unhover(element) {
element.setAttribute('src', '//cdn.shopify.com/s/files/1/0816/3411/t/3/assets/logo_hover_2x.png');
}
and the html be
<img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />
After Edit :
If you want to change it on some timeout, You need to put your below code inside window.onload = function() {}
var images = new Array();
images[0] = "logo_1.png";
images[1] = "logo_2.png";
var images = new Array();
for (var i = 0; i < 2; i++) {
images.push("logo_" + i + ".png");
}
var x = 0;
function changeImage() {
document.getElementById('ad').src = images[x];
if (x < 8) {
x += 1;
} else {
x = 0;
}
if (window.addEventListener) {
window.addEventListener('load', changeImg, false);
}
function changeImg() {
var x = 0;
setInterval(function() {
changeImage()
},5000);
}
HTML:
<img id="ad" src="//cdn.shopify.com/s/files/1/0816/3411/t/3/assets/logo_2x.png" />

Use jQuery hover to run code when hovering in or out of an element. Also use setTimeout to run code after a delay.
var logo1 = "//cdn.shopify.com/s/files/1/0816/3411/t/3/assets/logo_2x.png";
var logo2 = "//cdn.shopify.com/s/files/1/0816/3411/t/3/assets/logo_hover_2x.png";
$(function() {
$('.logoimage').hover(function() {
setTimeout(function() {
$('.logoimage').attr('src', logo2);
}, 1000);
}, function() {
setTimeout(function() {
$('.logoimage').attr('src', logo1);
}, 1000);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img class="logoimage" src="//cdn.shopify.com/s/files/1/0816/3411/t/3/assets/logo_2x.png">

8 image change on mouse hover and return to default when left

i have an 8 img elements in my page -
<img onmouseover="mousehover(this)" onmouseout="defaultImg(this)" src = "images/1_1.jpg" height="96" width="156" style="margin-right:12px;"/>
<img onmouseover="mousehover(this)" onmouseout="defaultImg(this)" src = "images/2_1.jpg" height="96" width="156" style="margin-right:12px;"/>
On hover it should change from 1_1 to 1_2 till 1_8 and then 1_1 again. On mouse out it should show the default pic i.e 1_1. Like this i have 2_1, 3_1 till 8_1.
The javascript function for mousehover is -
function mousehover(x){
for(var i=2; i<9; i++){
x.src = x.src.replace('images/rotator/1_' + i + '.jpg');
}
}
function defaultImg(x){
x.src = x.src.replace("images/rotator/1_1.jpg");
}
Somehow this mouse hover func does not work. And how do i get the defaultImg for all the images on mouse out. I am stuck here. Any ideas?

Try the following.Should work:
var timer;
var i=2;
function mousehover(x){
x.src = 'images/rotator/1_' + i + '.jpg';
i++;
timer = setTimeout(function(){mousehover(x)},2000);
}
function defaultImg(x){
i=2;
clearTimeout(timer);
x.src = "images/rotator/1_1.jpg";
}

You can pass the first number as parameter in the function calls.
<img onmouseover="mousehover(this, 1)" onmouseout="defaultImg(this, 1)" src = "images/1_1.jpg" height="96" width="156" style="margin-right:12px;"/>
<img onmouseover="mousehover(this, 2)" onmouseout="defaultImg(this, 2)" src = "images/2_1.jpg" height="96" width="156" style="margin-right:12px;"/>
And the JavaScript would be:
var interval;
function mousehover(x, y) {
var i = 1;
interval = setInterval(function() {
i++;
if (i > 8) {
clearInterval(interval);
i = 1;
}
x.src = 'images/rotator/' + y + '_' + i + '.jpg';
}, 500);
}
function defaultImg(x, y) {
clearInterval(interval);
x.src = 'images/rotator/' + y + '_1.jpg';
}
For more performance, I would combine all images into one big sprite, and play with the background-position instead of loading a new image each time.

Something in these lines should work:
var element = document.querySelector("#switch");
element.addEventListener('mouseover', function() {
this.src = "http://placehold.it/400x300";
});
element.addEventListener('mouseout', function() {
this.src = "http://placehold.it/200x300";
});
Fiddle

You need something like this:
//TIP: Insert listeners with javascript, NOT html
x.addEventListener('mouseover', function () {
var count = 1,
that = this,
timer;
timer = setInterval(function () {
if (count < 8) {
count++;
} else {
count = 1;
}
that.src = 'images/rotator/1_' + count + '.jpg';
}, 500);
function onMouseOut() {
that.src = 'images/rotator/1_1.jpg';
that.removeEventListener('mouseout', onMouseOut)
}
this.addEventListener('mouseout', onMouseOut);
});