I am designing a bootstrap based website. I have a navigation bar and below it there is a full screen background image. I want to change the the background image after some seconds. The image is inside a header tag and has some text over it in the center. The code for header:-
<header id="image">
<div class="header-content">
<h1>Hello</h1>
</div>
</header>
The css for header:-
header {
position: relative;
width: 100%;
min-height: auto;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
background-position: center;
background-image: url('images/1.jpg');
text-align: center;
color: white;
}
.header1 {background-image: url('images/1.jpg');}
.header2 {background-image: url('images/2.jpg');}
.header3 {background-image: url('images/3.jpg');}
The javascript i tried:-
<script type="text/javascript">
function run(interval, images) {
var int = 1;
function func() {
var d = document.getElementById("image");
d.className += "header"+int;
int++;
if(int === images) { int = 1; }
}
var swap = window.setInterval(func, interval);
}
run(5000, 3);
</script>
I tried to change the class property after an interval but it didn't work.
I want to change the background-image of the header lets say after every 10 seconds to 2.jpg and then to 3.jpg and then back to 1.jpg using plain javascript. Please provide a way as i am unable to think of a way to change the image. I would be highly grateful if anyone can help.
This will take care of what you are looking for, assuming that your images are named with digits.
var counter = 1; //instantiate a counter
var maxImage = 5; //the total number of images that are available
setInterval(function() {
document.querySelector('header').style.backgroundImage = "url('images/" + (counter + 1) + ".jpg')";
if (counter + 1 == maxImage) {
counter = 0; //reset to start
} else {
++counter; //iterate to next image
}
}, 10000);
Related
I have below code that is a function for changing background-image every 10th second:
$(function() {
var body = $(".home");
var backgrounds = [
"url(img/Agure.jpg)",
"url(img/Arsenal1.jpg)",
"url(img/ManUtd.jpg)",
"url(img/stadion.jpg)",
];
var current = 0;
function nextBackground() {
body.css(
"background",
backgrounds[current = ++current % backgrounds.length]);
setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css("background", backgrounds[0]);
The code works but I want the images always to cover the full page. Some images are to small to cover the full page so they just stack up next to each other. Any suggestions how I can change the code?
HTML and CSS:
<section class="home">
<div class="centered">
<div class="h-100 row align-items-center">
</div>
</div>
</section>
.home {
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
}
The issue here is a combination of two things:
You aren't using background-repeat: no-repeat which means the images will tile to cover the background (This is only visible when the image is smaller than the container, which can be confusing)
And you're setting background in JS, rather than background-image which would overwrite your extra CSS properties.
Here's a modified version:
$(function() {
var body = $(".home");
var backgrounds = [
"url(https://picsum.photos/200/300)",
"url(https://picsum.photos/100/300)",
"url(https://picsum.photos/300/300)",
"url(https://picsum.photos/250/300)",
];
var current = 0;
function nextBackground() {
body.css(
"background-image",
backgrounds[current = ++current % backgrounds.length]
);
setTimeout(nextBackground, 10000);
}
setTimeout(nextBackground, 10000);
body.css("background-image", backgrounds[0]);
})
.home {
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="home">
<div class="centered">
<div class="h-100 row align-items-center">
</div>
</div>
</section>
When the image is small the browser automatically adds multiple image (stacked in your case)
Try adding the following in your css to avoid it
background-repeat: no-repeat;
Also instead of writing
body.css("background", backgrounds[0]);
write
body.css("background-image", backgrounds[0]);
I am cycling through background images in javascript/jQuery like this...
var duration = 2500;
var delay = 500;
var i = 0;
setInterval(function() {
if (i == 0) {
$(".myimage").css("background-image", "url('https://placeimg.com/1640/1480/any')");
}
if (i == 1) {
$(".myimage").css("background-image", "url('https://placeimg.com/1640/1481/any')");
}
if (i == 2) {
$(".myimage").css("background-image", "url('https://placeimg.com/1640/1482/any')");
}
if (i == 3) {
$(".myimage").css("background-image", "url('https://placeimg.com/1640/1483/any')");
}
i++;
}, duration + delay)
.myimage {
height: 500px;
width: 500px;
transition: background-image 1s linear;
background-image: url('https://placeimg.com/1648/1488/any');
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myimage">
</div>
Problem is, I get flashes of no image occasionally, I think this is down to the images not being loaded in time. Is there a way to preload them?
You could preload them using CSS like:
body::after{
position:absolute; width:0; height:0; overflow:hidden; z-index:-1;
content:url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
}
NOTE: You could use an array of images in the JS code and change them based on the index i.
var duration = 2500;
var delay = 500;
var i = 0;
var images = ['https://placeimg.com/1640/1480/any', 'https://placeimg.com/1640/1481/any', 'https://placeimg.com/1640/1482/any', 'https://placeimg.com/1640/1483/any'];
setInterval(function() {
$(".myimage").css("background-image", "url(" + images[i] + ")");
i++;
}, duration + delay)
.myimage {
height: 500px;
width: 500px;
transition: background-image 1s linear;
background-image: url('https://placeimg.com/1648/1488/any');
background-size: cover;
}
body::after {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
z-index: -1;
content: url(https://placeimg.com/1640/1480/any) url(https://placeimg.com/1640/1481/any) url(https://placeimg.com/1640/1482/any) url(https://placeimg.com/1640/1483/any);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myimage">
</div>
You can preload the images as followed
function preloadImages(){
var images = ["https://placeimg.com/1640/1480/any","https://placeimg.com/1640/1481/any","https://placeimg.com/1640/1482/any","https://placeimg.com/1640/1483/any"];
var prelaodedImages = [];
for(i=0;i<images.length;i++){
prelaodedImages[i] = new Image();
prelaodedImages[i].src = images[i];
console.log(prelaodedImages[i].src)
}
}
preloadImages();
After the images are preloaded you can use your code and instead of
"url('https://placeimg.com/1640/1480/any')")
You use
"url("+prelaodedImages1.src+")")
This should normally result in your images already being loaded and displaying correctly.
For the first time, browser needs to download all the images, once downloaded, it'll load from cache.
So, flashes of no image will come every time whenever browser download file. you have two options
the approach you are following (which is ok)
Use CSS trick to load all at once by using following code
.myimage {
height: 500px;
width: 500px;
transition: background-image 1s linear;
background-image: url('https://placeimg.com/1648/1480/any');
background-image: url('https://placeimg.com/1648/1481/any');
background-image: url('https://placeimg.com/1648/1482/any');
background-image: url('https://placeimg.com/1648/1483/any');
background-size: cover;
}
Once browser loads it, it wont be reloaded all the time. the second time the same image is rendered there wont be such issue,
make the image cycle using i= i==3?0:++i.
Rather than just i++
Fiddle
I need to make a carousel with a fade transition that goes black, or even better some dark grey color like #2B303A. I've found this code on the web that works perfectly, the only problem is that the fade effect is a really bright white that I don't like and it's bothering for the eyes.
How can I make it fade to black between images?
$(document).ready(function() {
//Carousel
var vet_url = ["https://i.imgur.com/Bb39Qpp.jpg", "https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg"];
var len = vet_url.length;
var i = 0;
function swapBackgrounds() {
$("#background").animate({
opacity: 0
}, 700, function() {
$($("#background")).css('background-image', 'url(' + vet_url[(i + 1) % len] + ')').animate({
opacity: 1
}, 700);
});
i++;
}
setInterval(swapBackgrounds, 10000);
});
#background {
background-color: #2B303A;
position: absolute;
z-index: 1;
min-height: 100%;
min-width: 100%;
background-image: url("https://images.wallpaperscraft.com/image/palms_road_marking_123929_1920x1080.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="background"></div>
View on JSFiddle
you need to do it on the html element, in your test case at least.
html
{
background-color:#2B303A;
}
Setting the opacity to 0 let you see the element underneath the carousel, in this case there's nothing but the body itself. The background-color of the body wasn't set so it was the default white one. Setting the background-color to black solved the problem.
jquery's .animate does not work with background-colors though it can work with:
https://github.com/jquery/jquery-color
Heyo,
I'm currently working on a background slider but I can't make it work as I want it to work.
So what I need is a fade-effect which produces no white space between the images.
So ... the following image should fadeIn but the current image should just stay and fadeOut when the fadeIn effect of the following image is done. (If that makes sense)
This is the current script I'm using:
$(document).ready(function(){
var count = 1;
var images = [ "http://i.imgur.com/HX0X6lV.png", "http://i.imgur.com/N50Ye7i.png", "http://i.imgur.com/TFG5oaa.png"];
var image = $(".background");
setInterval(function(){
image.fadeOut(500, function(){
image.css("background-image","url("+images[count++]+")");
image.fadeIn(500);
});
if(count == images.length)
{
count = 0;
}
},3000);
});
.background {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
background-size: cover;
background-position: center center;
background-image: url("http://i.imgur.com/HX0X6lV.png");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background"></div>
I've been working on a website that serves as a gallery for fantasy art, an evolving project, and I've currently hit a barricade in where to go from something I can't get to work. I tried Masonry and Wookmark both, and had issues with both, so I'm trying to do something else. I'm wanting to spawn in either divs or spans (I'm not sure which to use) within grid with the class identifier images and set their backgrounds to specific image sources that "cover", centered, so I basically have a grid of square windows into these images and when clicked, they bring up a lightbox (which I've succesfully created). Right now I've managed to get the images to show but the containers are smooshed down and have no padding left or right.
Truth be told, I have no idea what to do with the relative/absolute positioning and inline/block display parameters, and I feel this is where I'm going wrong but I don't know really what these things entail.
Segment of the HTML:
<div id="grid" class="grid"></div>
<br>
CSS:
.grid {
z-index:2;
display: inline-block;
}
.images {
display:inline-block;
position:relative;
width:25%;
height:25%;
z-index:2;
padding-right: 0.25em;
padding-left: 0.25em;
padding-top: 0.5em;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
}
Javascript:
var mix = shuffle(Object.keys(backInfo));
function unlockImages () {
setTimeout(function () {
if (mix !== undefined) {
var input = mix.shift();
var entry = backInfo[input];
var elem = document.createElement("div");
elem.setAttribute("class", "images");
elem.setAttribute("id", input);
elem.setAttribute("title", entry.caption);
elem.setAttribute("onclick", "javascript:changeImage(" + input + ");");
document.getElementById("grid").appendChild(elem);
document.getElementById(input).style.backgroundImage = "url(" + entry.image + ")";
$("#" + input).fadeTo(0,0);
$("#" + input).fadeTo(20000,1);
unlockImages();
}
}, 0)
}
And a live preview of what's going on at the moment: http://www.dreamquest.io
I think the problem you are describing is css. I played with your css a little and came up with this:
.grid {
z-index:2;
display: inline-block;
height: 500px;
width: 1500px;
}
.images {
display:inline-block;
position:relative;
width:25%;
height:25%;
z-index:2;
margin-right: 0.25em;
margin-left: 0.25em;
margin-top: 0.5em;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
Some things to note with your css:
when you are setting a percentage width x height, your parent container has to have a value. Since you didn't set a height value in the .grid class your images get squished because it is taking 25% of 0 height.
background-attachment: fixed; forces your picture not to auto resize, which i am assuming you want
you were using padding that is why you are not getting the spacing between images. Padding is for the interior of the element. If you want space between elements then you need to use margin, which I have used in the above css. hth
I assume that you want to create dynamic grid and populate images for each box. Use below code to achieve it.
create container div with id "wrapper".
Add Javascript function and called it where ever you want.
function DrawGrid() {
var rows = 2;
var columns = 2;
$("#wrapper").empty();
for (var i = 0; i < rows; i++) {
var $row = $("<div />", {
class: 'row'
});
//add columns to the the temp row object
for (var c = 0; c < columns; c++) {
var $square = $("<div />", {
class: 'square'
});
//Set your imageHere
$square.append("<img></img>");
$row.append($square.clone());
}
$("#wrapper").append($row.clone());
}
}