How can i improve image slider transition. It is rather erratic. I want it to be smooth (smooth in and out properly). The problem is image only fadeIn, i cannot figure out how to fadeOut.
var nextimage = 0;
var timer = 0;
doSlideshow();
function doSlideshow() {
if (nextimage >= images.length) {
nextimage = 0;
}
$('.col-md-8')
.css('background-image', 'url("' + images[nextimage++][0] + '")')
.fadeIn(3000, function() {
timer = setTimeout(doSlideshow, 3000);
});
}
$(".col-md-8").hover(function() {
clearTimeout(timer);
});
$(".col-md-8").mouseout(function() {
setTimeout(doSlideshow, 3000);
});
Pen
setInterval(function(){
$("#top").fadeOut(function() {
$(this).attr("src","http://1.bp.blogspot.com/-cFt5KNrHsHc/TZMH6XUBu-I/AAAAAAAAAR4/R6hOP7lffx0/s1600/apple-logo.png").fadeIn().delay(1000).fadeOut(function(){
$(this).attr('src', 'http://coreldrawtips.com/images/applebig.jpg').fadeIn().delay(1000);
});
}
);
}, 400
Check this link also.
I have fixed this for you, you do not need settimeout for this kind of stuff, there are many other ways.
function doSlideshow() {
if (nextimage >= images.length) {
nextimage = 0;
}
$('.col-md-8')
.css('background-image', 'url("' + images[nextimage++][0] + '")');
$('.col-md-8').hide().fadeIn(3000).fadeOut(2000, function() {
doSlideshow()
});
}
Link to codepen, there is bit more to say about this, which I will do later.
http://codepen.io/damianocel/pen/PzQwNr
Related
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.
I code simple slide show using setInterval and also I have 2 jQuery functions for toggle div. Code seems working, but there is small issue. When I navigate to site toggle div part is working perfectly. But when first slide changes toggle functions stop working.
$(document).ready(function () {
var ImageCount = 1;
var ImageTotal = 3;
setInterval(function SlideAuto() {
if (ImageCount == 1) {
ImageCount = ImageCount + 1;
} else {
if (ImageCount < ImageTotal) {
ImageCount = ImageCount + 1;
} else {
if (ImageCount == ImageTotal) {
ImageCount = 1;
}
}
}
var ImageURL = 'img/SliderIMG/' + ImageCount + '.jpg';
$("#SliderIMG").attr('src', ImageURL);
}, 3000);
$("#tab1").click(function () {
$("#con1").toggle("fade");
$("#con2").toggle("fade");
});
$("#tab2").click(function () {
$("#con1").toggle("fade");
$("#con2").toggle("fade");
});
});
Html and Javascript code:
<img src="imgs/right.gif" id="image_change" onclick="changeImage()"/>
<script>
function changeImage() {
var src = document.getElementById("image_change").src;
var imgsrc = src.substring(src.lastIndexOf("/")+1);
if (imgsrc == "left.gif")
{
document.getElementById("image_change").src = "imgs/right.gif";
alert('if'+document.getElementById("image_change").src);
}
else
{
document.getElementById("image_change").src = "imgs/left.gif";
alert('else'+document.getElementById("image_change").src);
}
}
</script>
When i click on the image, a new image is replacing in fraction of milli seconds..can i make the replacing of the image slow by using javascript or by adding any css class to it??any help would be appreciated..
try this
Using javascript
var op = 0.1; // initial opacity
element.style.display = 'block';
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
alert("here");
}, 10);
var img =document.getElementById("image_change");
fade(img);// Chnage image in fade method
Using jquery
// increase the 500 to larger values to increase the duration
// of the fadeout and/or fadein
$('#image_change').fadeOut(500, function () {
$('#image_change').attr("src", "/newImage.png");
$('#image_change').fadeIn(500);
});
The above jQuery way is straight forward and easy , if you want this in vanilla JavaScript you can use setTimeout with opacity to create fade out and fade in effect for further details check link below
Pure JavaScript fade in function
You can use setTimeout() function of window object to make delay for execution of your code.
Try this :
HTML :
<img src="http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg" id="image_change" onclick="changeImage();" />
javaScript :
function changeImage() {
var src = document.getElementById("image_change").src;
var imgsrc = src.substring(src.lastIndexOf("/") + 1);
if (imgsrc == "Cartoon-6.jpg")
{
window.setTimeout(function(){
document.getElementById("image_change").src = "http://topwallpaperswide.com/wp-content/uploads/cartoon-wallpapers-jerry-the-mouse-running-and-shouting-20140823213658-53f9097a18af8.jpg";
//alert('if'+document.getElementById("image_change").src);
}, 1000);
}
else
{
window.setTimeout(function(){
document.getElementById("image_change").src = "http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg";
//alert('else'+document.getElementById("image_change").src);
}, 1000);
}
}
jsFiddle
You can do it this way:
function changeImage() {
setTimeout(function() {
var src = document.getElementById("image_change").src;
if (src == "http://s25.postimg.org/iyly1k3uz/arrow_left.png") {
document.getElementById("image_change").src = "http://s25.postimg.org/tzh36kw3v/arrow_right.png";
} else {
document.getElementById("image_change").src = "http://s25.postimg.org/iyly1k3uz/arrow_left.png";
}
}, 1000);
}
body {
background-color: lightblue;
}
<img src="http://s25.postimg.org/tzh36kw3v/arrow_right.png" id="image_change" onclick="changeImage()" />
I was looking for a way to change the background of a div using jQuery and I found this question:
change background image jquery
I made it and it's working. But, there's a way to ease the process? Like an fade-in/out?
Sorry for my english. And thank you for your time.
UPDATE:
.branding{
min-height:530px;
background-image:url(../images/brandings-0.jpg);
background-repeat:no-repeat;
background-position:center;
}
var newBg = [
'site/assets/images/brandings-1.jpg',
'site/assets/images/brandings-2.jpg',
'site/assets/images/brandings-3.jpg'];
var i = 0;
var rotateBg = setInterval(function(){
i++;
if(i > 2)
i=0;
$('.branding').css({backgroundImage : 'url(' + newBg[i] + ')'});
}, 5000);
<div class="branding"></div>
Try the following fiddle I created for you.
http://jsfiddle.net/ujyjcfea/1/
var i = 0;
var newBg = [
'http://lorempixel.com/output/animals-q-c-640-480-2.jpg',
'http://lorempixel.com/output/animals-q-c-640-480-1.jpg',
'http://lorempixel.com/output/animals-q-c-640-480-4.jpg'];
var image = $('.branding');
image.css('background-image', 'url(http://lorempixel.com/output/animals-q-c-640-480-2.jpg)');
setInterval(function () {
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + newBg[i++] + ')');
image.fadeIn(1000);
});
if (i == newBg.length)
i = 0;
}, 5000);
http://www.programming-free.com/2013/12/change-background-image-jquery.html
demo - http://jsfiddle.net/victor_007/RyGKV/643/
var i = 0;
var images = ['http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg', 'http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-2.jpg', 'http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg'];
var image = $('#slideit');
image.css('background-image', 'url(http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg)'); //Initial Background image setup
setInterval(function () {
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images[i++] + ')');
image.fadeIn(1000);
});
if (i == images.length) i = 0;
}, 5000);
I am trying to stop a loop so other things can run, then return to the loop again at the correct time in the sequence. The code I have runs once, but then seems to be unable to run after I use clearInterval();
function runPlanner() {
var plannerInterval = setInterval(function(){
imageCounter++;
var imageTotal = $('li img').length;
if (imageCounter > imageTotal + 1) {
$('li img').hide();
imageCounter = 0;
clearInterval(plannerInterval);
} else {
$('li img:nth-child(' + imageCounter +')').fadeIn('slow');
}
console.log('image counter:',imageCounter);
console.log('image total:',imageTotal);
}, 2500);
}
Then I can run this initially, with:
runPlanner();
But if the condition is met, where clearInterval is called, then using that function call doesn't work. Any ideas, please!?
Try to use setTimeout style. so you will not have a problem with clearInterval anymore.
like this.
function runPlanner() {
imageCounter++;
var imageTotal = $('li img').length;
if (imageCounter > imageTotal + 1) {
$('li img').hide();
imageCounter = 0;
} else {
$('li img:nth-child(' + imageCounter +')').fadeIn('slow');
// re-called `runPlanner` after 2500 sec
setTimeout(runPlanner, 2500);
}
console.log('image counter:',imageCounter);
console.log('image total:',imageTotal);
}
runPlanner();