This is what I currently have, and the three background images for div#hero change upon refresh. Is there any easy way to adjust this so that they fade to an alternate image after x number of seconds, instead of upon refresh?
<script type="text/javascript">var imgCount = 3;
var dir = 'images/';
var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
var images = new Array
images[1] = "1.jpg",
images[2] = "2.jpg",
images[3] = "3.jpg",
document.getElementById("hero").style.backgroundImage = "url(" + dir + images[randomCount] + ")";</script>
Wrap your code in a function and use that inside setInterval method:
var interval_time = 5000;//in milliseconds
setInterval(your_function,interval_time);
function your_function(){
var imgCount = 3;
var dir = 'images/';
var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
var images = new Array
images[1] = "1.jpg",
images[2] = "2.jpg",
images[3] = "3.jpg",
document.getElementById("hero").style.backgroundImage = "url(" + dir + images[randomCount] + ")";
}
Now, after each interval_time your_function would run.
Related
Is there a way to make the below javascript just display the random images with out a link?
var imagenumber = 10 ;
var randomnumber = Math.random() ;
var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
var URLs = new Array() ;
images = new Array
images[1] = "images/headerpics/fall/fall17.png"
images[2] = "images/headerpics/fall/fall1.png"
images[3] = "images/headerpics/fall/fall2.png"
images[4] = "images/headerpics/fall/fall3.png"
images[5] = "images/headerpics/fall/fall4.png"
images[6] = "images/headerpics/fall/fall5.png"
images[7] = "images/headerpics/fall/fall6.png"
images[8] = "images/headerpics/fall/fall7.png"
images[9] = "images/headerpics/fall/fall8.png"
images[10] = "images/headerpics/fall/fall9.png"
var image = images[rand1] ;
var linknumber = 1 ;
var img1 = Math.round( (linknumber-1) * randomnumber) + 1 ;
links = new Array
links[1] = "index.htm"
var link = links[img1];
document.write('<a href="' + link + '"><img src="' + image + '"
border="0"></a>') ;
Thanks for any help!
Just Remove the Anchor (<a>) tag from the document.write
document.write('<img src="' + image + '"border="0">');
I'm not well know about javascripts, got this code from a website.
Using javascript to display random images from array in div
javascript working fine.
But loaded images displays in random sizes
tried using css style and all css html image attributes to resize them but nothing works, as they are displayed directly through javascript
want something to resize them directly in javascript
code main :
<script>
var arrayImg = new Array();
arrayImg[0] = "a11.jpg";
arrayImg[1] = "a12.jpg";
getRandomImage(arrayImg, "");
function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + alt = "" >';
document.writein(imgStr);
document.close();
}
</script>
code I used to resize image : (but didn't work) :
<script>
var arrayImg = new Array();
arrayImg[0] = "a11.jpg";
arrayImg[1] = "a12.jpg";
getRandomImage(arrayImg, "");
function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var img.height = 4vw;
var img.width = 20%;
var imgStr = '<img src="' + path + img + img.height + img.width + alt = "" >';
document.writein(imgStr);
document.close();
}
</script>
even tried using : (but still didn't work)
document.writeln('<td' + '><imgstr"' + height="180" width="160" border="0" ><' + '/td>');
You have a few syntax error in getRandomImage function.
function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
/*
1. variable name should not contain .
2. the width and height value should be quoted and placed in "style" attribute
*/
//var img.height = 4vw;
//var img.width = 20%;
var imgHeight = '4vw';
var imgWidth = '20%';
/* closed string quotations and placed data in the right attribute */
var imgStr = '<img src="' + path + img + '"'
+ ' style="height:' + imgHeight + ';width:' + imgWidth + ';'
+ ' alt="">';
document.writein(imgStr);
document.close();
}
You have several places where you didn't close quotation marks.
In code main:
var imgStr = '<img src="' + path + img + '"' + ' alt = "" >';
In resize code
var imgStr = '<img src="' + path + img + '" height="' + img.height + '" width="' + img.width + '" alt = "" >';
<!doctype html>
<html>
<head>
<title>ParallecScrolling</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image {
position: relative;
z-index: -1
}
#content {
height: 750px;
width: 100%;
margin-top:-10px;
background-color:#0d0d0d;
position: relative;
z-index: 1;
}
</style>
<body>
<!-- <img id="image" src="img/bg.jpg" height="710px" width="100%" /> -->
<script type="text/javascript">
var ypos,image;
function parallex() {
image = document.getElementById('image');
ypos = window.pageYOffset;
image.style.top = ypos * .7+ 'px';
}
window.addEventListener('scroll', parallex),false;
</script>
</head>
<script type="text/javascript">
var imlocation = "img/";
var currentdate = 0;
var image_number = 0;
function ImageArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
image = new ImageArray(6)
image[0] = 'bg.jpg'
image[1] = 'bg2.jpg'
image[2] = 'bg3.jpg'
image[3] = 'bg4.jpg'
image[4] = 'bg5.jpg'
image[5] = 'bg6.jpg'
var rand = 60/image.length
function randomimage() {
currentdate = new Date()
image_number = currentdate.getSeconds()
image_number = Math.floor(image_number/rand)
return(image[image_number])
}
var insert = imlocation + randomimage();
document.write("<img src='" + insert+ "'>");
</script>
<div id="content"></div>
</body>
I am trying to set my height of my insert image to 710px and the width to be 100%. What am I doing wrong?
I have tried editing the insert.height and the insert.width but that seems not to work.
Firstly, your code is not running correctly, here's why:
image = new ImageArray(6)
image[0] = 'bg.jpg'
image[1] = 'bg2.jpg'
image[2] = 'bg3.jpg'
image[3] = 'bg4.jpg'
image[4] = 'bg5.jpg'
image[5] = 'bg6.jpg'
var rand = 60/image.length
function randomimage() {
currentdate = new Date()
image_number = currentdate.getSeconds()
image_number = Math.floor(image_number/rand)
return(image[image_number])
As might notice, the lack of semicolons means that each of your statements above are not being closed. The above should become:
image = new ImageArray(6);
image[0] = 'bg.jpg';
image[1] = 'bg2.jpg';
image[2] = 'bg3.jpg';
image[3] = 'bg4.jpg';
image[4] = 'bg5.jpg';
image[5] = 'bg6.jpg';
var rand = 60/image.length;
function randomimage() {
currentdate = new Date();
image_number = currentdate.getSeconds();
image_number = Math.floor(image_number/rand);
return(image[image_number]);
Let me know if you now have any errors after sorting this out, I will then evolve my answer accordingly! :)
Part 2:
Instead of this:
var insert = imlocation + randomimage();
insert.height = "710px";
insert.width = "100%";
document.write("<img src='" + insert+ "'/>");
Let's use CSS, we have two options:
Option 1 - Use style attributes:
var insert = imlocation + randomimage();
document.write("<img style='height:710px;width:100%' src='" + insert + "'/>");
Option 2 - Use a class
var insert = imlocation + randomimage();
document.write("<img class='ourclass' src='" + insert + "'/>");
To finish off option 2, we now define "ourclass" in CSS:
.ourclass {
height:710px;
width:100%
}
I am using a good bit of jQuery to create a CSS fade effect on a website. It works really well. But as it only has 4 images in the array, It is quite likely loading the same image twice in a row.
What can I add to prevent this?
My current jQuery code is as follows :
// Playthrough Background Images
var imgArray = ['http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner1.jpg',
'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner2.jpg',
'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner3.jpg',
'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner4.jpg'
]
var nextBG = "url(" + imgArray[Math.floor(Math.random() * imgArray.length)] + ")";
$('#header.home-page').css("background-image", nextBG);
setInterval(function(){
nextBG = "url(" + imgArray[Math.floor(Math.random() * imgArray.length)] + ")";
$('#header.home-page').fadeOut('fast', function() {
$(this).css("background-image", nextBG).fadeIn('fast'); })
}, 4000); // 4 second interval
Thanks in advance.
Cheers
You can show your images one after another (and repeat this the whole time):
var counter = 0;
// Playthrough Background Images
var imgArray = ['http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner1.jpg',
'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner2.jpg',
'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner3.jpg',
'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner4.jpg'
]
var nextBG = "url(" + imgArray[counter] + ")";
$('#header.home-page').css("background-image", nextBG);
setInterval(function(){
counter++;
nextBG = "url(" + imgArray[counter % imgArray.length] + ")";
$('#header.home-page').fadeOut('fast', function() {
$(this).css("background-image", nextBG).fadeIn('fast'); })
}, 4000); // 4 second interval
or choose randomly:
// Playthrough Background Images
var imgArray = ['http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner1.jpg',
'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner2.jpg',
'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img//home/banner3.jpg',
'http://www.jesmonddenehouse.co.uk/addons/shared_addons/themes/jesmonddene/img/home/banner4.jpg'
]
var current = Math.floor(Math.random() * imgArray.length);
var nextBG = "url(" + imgArray[current] + ")";
$('#header.home-page').css("background-image", nextBG);
setInterval(function(){
var copy = imgArray.slice(0); // make copy
copy.splice(current, 1); // remove current
current = Math.floor(Math.random() * copy.length);
nextBG = "url(" + copy[current] + ")";
$('#header.home-page').fadeOut('fast', function() {
$(this).css("background-image", nextBG).fadeIn('fast'); })
}, 4000); // 4 second interval
This code should use any .jpg image from /images/bg/ folder, however it doesn't seems to be taking images below particular resolution...any suggestions?
<!--random background images from a folder-->
<script type="text/javascript">
var totalCount = 5;
function ChangeIt() {
var num = Math.ceil(Math.random() * totalCount);
document.body.background = 'images/bg/' + num + '.jpg';
document.body.style.backgroundSize = "cover";
}
</script>
Demo
document.body.background is deprecated, it should be document.body.style.background and the format you're giving it is wrong. Try
document.body.style.background = 'url(images/bg/' + num + '.jpg)';
The following also works and doesn't remove the other attributes of background, like backgroundSize for example, so you wouldn't need the line document.body.style.backgroundSize = "cover"; as long as it was set in the first place.
document.body.style.backgroundImage = 'url(images/bg/' + num + '.jpg)';
So, your code would read
<script type="text/javascript">
document.body.style.backgroundSize='cover';
document.body.style.backgroundRepeat='no-repeat'; // i've assumed this
var totalCount = 5;
function ChangeIt() {
var num = Math.ceil(Math.random() * totalCount);
document.body.style.backgroundImage = 'url(images/bg/' + num + '.jpg)';
}
</script>
Though, ideally you'd set cover and no-repeat in a CSS file.
Use document.body.style.backgroundImage = "url('" + 'images/bg/' + num + '.jpg' + ")";
(google about css background image).