I'm writing this script to rotate a background Image every 3 seconds but it doesn't work at all and i'm stumped as to why not.
$(document).ready(function() {
var inc = 0;
var bgImages = new Array();
bgImages.push("Images/backgroundDog-small.jpg");
bgImages.push("Images/backgroundDog1-small.jpg");
bgImages.push("Images/backgroundDog2-small.jpg");
bgImages.push("Images/backgroundDog3-small.jpg");
setInterval(change, 3000);
function change() {
//if we're not at the end of the array
if (inc < (bgImages.length)) {
var image = bgImages[inc];
$('body').css('backgroundImage', image);
console.log(image);
inc++;
//reset the counter inc and go through the array again
} else {
inc = 0;
}
}
});
The background-image attribute in CSS doesn't expect just the image URL; you need to write it like you actually would in a stylesheet: url("example.png")
$('body').css('backgroundImage', 'url("'+image+'")');
Related
What would be the best way to have an array of background images and loop through them using js/jquery in an infinite loop?
this is what I have so far:
//ANIMATE JUMBOTRON BACKGROUND IMAGE
$(document).ready(function() {
var backgroundImage = [
'url(/static/images/slideshow/slide0.jpg)',
'url(/static/images/slideshow/slide1.jpg)',
'url(/static/images/slideshow/slide2.jpg)',
'url(/static/images/slideshow/slide3.jpg)',
'url(/static/images/slideshow/slide4.jpg)'
];
$('.jumbotron').css('background-image', backgroundImage[0]);
})
this is obviously just the array and simple css, but I am a bit lost on how to loop through the array?
A counter variable and a window.setInterval should do you. Increment the counter every time the interval'd function runs - once you hit the length of the background image array reset it back down to 0.
var backgroundImages = [
'url(/static/images/slideshow/slide0.jpg)',
'url(/static/images/slideshow/slide1.jpg)',
'url(/static/images/slideshow/slide2.jpg)',
'url(/static/images/slideshow/slide3.jpg)',
'url(/static/images/slideshow/slide4.jpg)'
],
backgroundImageCounter = 0,
jumbotron = $('.jumbotron');
window.setInterval(function() {
jumbotron.css('background-image', backgroundImages[backgroundImageCounter]);
backgroundImageCounter++;
if(backgroundImageCounter >= backgroundImages.length) {
backgroundImageCounter = 0;
}
}, 5000);
There is this thing called setInterval.
var count = 0;
var div = document.getElementById('a');
var btn = document.getElementById('b');
var interval = setInterval(function(){
div.innerText = count;
count++;
}, 1000);
btn.addEventListener('click', function(){
clearInterval(interval);
});
<div id="a">0</div>
<button id="b">Stop</button>
I have this image for a slider. I want it to fade to the next image after the button is clicked. The JQuery makes the image fade in and out to make the transition cleaner when the src changes. However, the image stays the same after fading.
Html
<button onclick = "prev()" id = "prev">Prev</button>
<img id = "slider" src = "" height = "600px" width = "600px"/>
<button onclick = "next()" id = "next">Next</button>
JQuery
var images = ['', '', ''];
var num = 0;
function next() {
var slider = $('#slider');
num++;
if(num >= images.length) {
num = 0;
}
slider.fadeOut('slow', function() {
slider.src = images[num];
slider.fadeIn('slow');
});
}
function prev() {
var slider = $('#slider');
num--;
if(num < 0) {
num = images.length-1;
}
slider.fadeOut('slow', function() {
slider.src = images[num];
slider.fadeIn('slow');
});
}
I have taken out the images I tested it with as their links were too long. The three slider images would be in the JQuery "images" variable and the starting one in the image src.
Assuming that images is an array of image URLs, then your mistake is trying to set slider.src instead of slider.attr('src, value);.
So, use this instead:
slider.attr('src', images[num]);
I have to make a program which is able to present an animation once opened.
Here the code that I have so far, but I am not sure how to fix it to automatically show the pictures and I am not allowed to use a button or hover over the image to change it , and I'm not allowed to use a premade gif or a gif at all
var index = 0;
var ImageList = ["http://www.iconsplace.com/icons/preview/orange/happy-256.png", "http://www.iconsplace.com/icons/preview/orange/sad-256.png"];
var image1 = document.getElementById("myImage");
function onTimer() {
timerValue++;
para.innerHTML = timerValue;
if (timerValue >= 30) {
img.src("http://www.iconsplace.com/icons/preview/orange/happy-256.png");
} else if (timer <= 60) {
img.src("http://www.iconsplace.com/icons/preview/orange/sad-256.png");
} else {
img.src("http://www.iconsplace.com/icons/preview/orange/happy-256.png");
}
}
<img id="myImage" src="http://www.iconsplace.com/icons/preview/orange/happy-256.png" style="width:200px">
You can use an interval:
window.onload = function(){
var index = 0;
var ImageList = ["Images/happy.png", "Images/sad.png"];
var image1 = document.getElementById("myImage");
var a = 0;
setInterval(function(){
a++;
image1.src = ImageList[a % ImageList.length];
}, 30000);
}
It changes the image per 30 seconds.
You have the two images in an array. USE it!
var index = 0;
var ImageList = ["http://www.iconsplace.com/icons/preview/orange/happy-256.png", "http://www.iconsplace.com/icons/preview/orange/sad-256.png"];
window.onload=function() { // page has finished loading, image is available
var image1 = document.getElementById("myImage");
var tId=setInterval(function() {
index=index==0?1:0; // if 0 then 1 else 0
// for more images instead use:
// index++; if (index>=ImageList.length)index=0;
image1.src=ImageList[index]; // how to set the image src
},5000); // every 5 seconds
}
<img id="myImage" src="http://www.iconsplace.com/icons/preview/orange/happy-256.png" style="width:200px">
I have a div item in table, i am rotating the div in JS and i am calling the function repeatedly, but the flip happens only for first time when the function is executed and again when function is called it just shows the div, without flipping the div.
The thing what i need is, when each time i call the function the div should flip the div.
How can i do that?
Css:
.box-1{
transform: rotateY(180deg);
display:none;
}
JQuery:
function startSlidecat1(started) {
for (var i = 0; i < footwear.length; i++) {
var image = footwear[i][0];
imgslidercat1(image, i * 2100, i == footwear.length - 1);
}
};
function imgslidercat1(image, timeout, last) {
window.setTimeout(function() {
document.getElementById('flip-1').style.display = 'none';
document.getElementById('category-1').style.display = 'block';
document.getElementById('category-1').innerHTML = "";
var product = document.getElementById('category-1');
var elem = document.createElement("img");
product.appendChild(elem);
elem.src = image;
if (last) {
flip();
}
}, timeout);
}
startSlidecat1();
function flip(){
$('#category-1').delay(100).css('display', 'none');
$('.box-1').delay(100).css('display', 'block');
$('.box-1').transition({
perspective: '100px',
rotateY: '360deg'
},200)
setTimeout(startSlidecat1, 2000);
}
The first time when div is flipping, its rotateY value changes from 180deg to 360deg, that is visible. But from second time onward, its value remains at 360deg so nothing happens. You just need to reset the value each time you call the function like this,
$('.box-1').css({transform:'perspective(100px) rotateY(180deg)'});
You can include this inside the startSlidecat1 function like this,
function startSlidecat1(started) {
$('.box-1').css({transform:'perspective(100px) rotateY(180deg)'});
for (var i = 0; i < footwear.length; i++) {
var image = footwear[i][0];
imgslidercat1(image, i * 2100, i == footwear.length - 1);
}
};
I am writing this in JavaScript, and the issue is that I can't seem to figure out how to make a permutation. Ideally, I want to click the button and image would change to next, from a1.jpg to a2.jpg to a3.jpg to a4.jpg to a1.jpg and so on... But when I wrote this code, it would skip a2 and a3. I also did rearrange the conditionals since I realized that it reads from the top to bottom, but it would always skip one of the four pictures.
function changeImage() {
if (document.images) {
if (document["buttonOne"].src == a3.src){
document["buttonOne"].src = a4.src}
}
if (document.images) {
if (document["buttonOne"].src == a2.src){
document["buttonOne"].src = a3.src
}
if (document.images) {
if (document["buttonOne"].src == a1.src){
document["buttonOne"].src = a2.src}
}
if (document.images) {
if (document["buttonOne"].src == a4.src){
document["buttonOne"].src = a1.src}
}
}
Try it in a more simple way
var imgs = ['a1.jpg', 'a2.jpg', 'a3.jpg', 'a4.jpg'];
function changeImage() {
var img = document["buttonOne"];
if (!img._index) img._index = 0;
img.src = imgs[img._index++];
if (img._index >= imgs.length) img._index = 0;
}
img._index replaces the global variable with index of the shown image. Good to use when you want to change a few images, each of them will keep its own counter.
ps: if the only thing that changes is the number in the filename then the code can be even shorter without an array:
function changeImage(max) {
var img = document["buttonOne"];
if (!img._index) img._index = 0;
img.src = 'a' + img._index + '.jpg';
if (img._index >= max) img._index = 0;
}