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.
Related
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>
I have a div with an id of "imgArea" and I am trying to use JS to change the background image every 3 seconds. Below is the JS. No images are being displayed. What am I missing. Thank you.
imgArea = document.getElementById("picArea");
var images = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Garmisch-Partenkirchen.JPG/1200px-Garmisch-Partenkirchen.JPG", "https://www.reisenaktuell.com/.imaging/mte/atlas-theme/atlas-gallery/dam/hotels/eigenanreisen/v/hotel-vier-jahreszeiten-garmisch-partenkirchen/bilder/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg/jcr:content/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg", "https://www.alpenferienwohnungen.de/assets/images/a/Garmisch-Partenkirchen-08-6335188a.jpg", "http://www.garmisch-partenkirchen-info.de/header/garmisch-partenkirchen.jpg" ];
var currentImage = 0;
function changeImage() {
currentImage++;
if (currentImage > images.length - 1) {
currentImage = 0;
}
imgArea.style.backgroundImage = "url(" + images[currentImage] + ")";
}
The div and code can be seen at this codepen:
https://codepen.io/centem/pen/rdjrLy
Please use this fiddle
imgArea = document.getElementById("picArea");
var images = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Garmisch-Partenkirchen.JPG/1200px-Garmisch-Partenkirchen.JPG", "https://www.reisenaktuell.com/.imaging/mte/atlas-theme/atlas-gallery/dam/hotels/eigenanreisen/v/hotel-vier-jahreszeiten-garmisch-partenkirchen/bilder/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg/jcr:content/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg", "https://www.alpenferienwohnungen.de/assets/images/a/Garmisch-Partenkirchen-08-6335188a.jpg", "http://www.garmisch-partenkirchen-info.de/header/garmisch-partenkirchen.jpg" ];
var currentImage = 0;
function changeImage() {
currentImage++;
if (currentImage > images.length - 1) {
currentImage = 0;
}
imgArea.style.backgroundImage = "url(' "+ images[currentImage] + "')";
}
setInterval(function(){
changeImage();
}, 3000);
#picArea{
width:500px;
height:500px;
}
<div id="picArea" ></div>
<div id="imgArea" style="min-width:50px;min-height:50px;"></div>
imgArea = document.getElementById("imgArea");
var images = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Garmisch-Partenkirchen.JPG/1200px-Garmisch-Partenkirchen.JPG", "https://www.reisenaktuell.com/.imaging/mte/atlas-theme/atlas-gallery/dam/hotels/eigenanreisen/v/hotel-vier-jahreszeiten-garmisch-partenkirchen/bilder/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg/jcr:content/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg", "https://www.alpenferienwohnungen.de/assets/images/a/Garmisch-Partenkirchen-08-6335188a.jpg", "http://www.garmisch-partenkirchen-info.de/header/garmisch-partenkirchen.jpg" ];
var currentImage = 0;
function changeImage() {
currentImage++;
if (currentImage > images.length - 1) {
currentImage = 0;
}
imgArea.style.backgroundImage = "url(" + images[currentImage] + ")";
}
//call first time
changeImage();
setInterval(changeImage, 3000);
<div id="imgArea" style="min-width:500px;min-height:500px;"></div>
Firstly the selector is wrong, you selected 'picArea' while your element name is 'imgArea' and then also you are not calling the function, you only declared it.
You should call changeImage()
imgArea = document.getElementById("picArea");
var images = [
"https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/Garmisch-Partenkirchen.JPG/1200px-Garmisch-Partenkirchen.JPG", "https://www.reisenaktuell.com/.imaging/mte/atlas-theme/atlas-gallery/dam/hotels/eigenanreisen/v/hotel-vier-jahreszeiten-garmisch-partenkirchen/bilder/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg/jcr:content/vier-jahreszeiten-garmisch-partenkirchen-grainau-fotolia.jpg", "https://www.alpenferienwohnungen.de/assets/images/a/Garmisch-Partenkirchen-08-6335188a.jpg", "http://www.garmisch-partenkirchen-info.de/header/garmisch-partenkirchen.jpg" ];
var currentImage = 0;
function changeImage() {
currentImage++;
if (currentImage > images.length - 1) {
currentImage = 0;
}
imgArea = document.getElementById("#urid");
}
I have the following script running to rotate between two of my logos.
What i am trying to do is the page will load and then the image will begin to rotate directly to the other image with out blank.
Here is the code:
var logo1 = "logo2.png";
var logo2 = "logo1.png";
var images = new Array (logo1, logo2);
var index = 1;
function rotateImage()
{
$('.logoimage').fadeOut('slow', 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);
});
<img class="logoimage" src="logo1.png" onmouseover="this.src='logo2.png'" onmouseout="this.src='logo1.png'" alt="Dear Leader" style="display: inline;">
Instead to use onmouseover and onmouseout you can use the jQuery hover.
While you are in the hovering function you have to stop the timer fading effects, in order to avoid the blinking effect.
My proposal is:
var logo1 = "https://ac3d197e9505f18c50e0-32b9f49f48b2c22be12b40ee79e2acc4.ssl.cf1.rackcdn.com/icon/logos_and_badges_thumbs_up/7x5uDqD4GBTrCSbXggZ-/58C79CAE-C3E6-4D6A-BAF5-A03631274FD7.png";
var logo2 = "https://www.facebookbrand.com/img/assets/asset.f.logo.lg.png";
var images = new Array (logo1, logo2);
var index = 1;
var onHovering = false;
function rotateImage() {
if (onHovering) {
return; // prevent fading while hovering...
}
$('.logoimage').fadeOut('slow', function() {
$(this).attr('src', images[index]);
$(this).fadeIn('fast', function() {
if (index == images.length-1) {
index = 0;
} else {
index++;
}
});
});
}
$(function () {
setInterval (rotateImage, 1000);
$('.logoimage').hover(function() {
onHovering = true;
$(this).attr('src', images[0]);
}, function() {
onHovering = false;
$(this).attr('src', images[1]);
});
});
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<img class="logoimage" src="https://www.facebookbrand.com/img/assets/asset.f.logo.lg.png" alt="Dear Leader" style="display: inline;">
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">
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);
});