This is my HTML code:
<html>
<head>
<script language="JavaScript">
<!--
// Set speed (milliseconds)
var speed = 4000
// Specify the image files
var Pic = new Array() // don't touch this
// to add more images, just continue
// the pattern, adding to the array below
Pic[0] = 'img_1.jpg'
Pic[1] = 'img_2.jpg'
Pic[2] = 'img_3.jpg'
Pic[3] = 'img_4.jpg'
// =======================================
// do not edit anything below this line
// =======================================
var t
var j = 0
var p = Pic.length
var preLoad = new Array()
for (i = 0; i < p; i++){
preLoad[i] = new Image()
preLoad[i].src = Pic[i]
}
function runBGSlideShow(){
if (document.body){
document.body.background = Pic[j];
j = j + 1
if (j > (p-1)) j=0
t = setTimeout('runBGSlideShow()', speed)
}
}
//-->
</script>
</head>
<body onload="runBGSlideShow()">
</body>
</html>
I tried everything I know to change it so the pictures will fade when replacing but I didn't succeed.
If you can I will appreciate it if you will add to the HTML code (if can't it's ok to add css )
Please look and see if you can help me.
Why reinvent the wheel?
There's a beautiful jQuery plugin that does this already
http://srobbin.com/jquery-plugins/backstretch/
Related
Here is a code that should render images randomly using DIV HTML rather than document.write, does anyone have an idea?
<script>
var theImages = new Array()
//Random-loading images
theImages[0] = '/img/pirc/hostnger-he.png' // replace with names of images
theImages[1] = '/img/pirc/hostnger-en.png' // replace with names of images
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
if(whichImage==0){
$('.hostnger').html('<img class="hostnger" src="'+theImages[whichImage]+'">')
}
else if(whichImage==1){
$('.hostnger').html('<img class="hostnger" src="'+theImages[whichImage]+'">')
}
}
</script>
<div class="hostnger"></div>
Randomize images when refreshing the pageenter code here
Where are you actually calling the showImage function?
You should add
showImage();
somewhere.
Are you including jQuery?
$('.hostnger')
Is a jQuery call and you are not including jQuery anywhere.
I've got an array in Javascript that I want to print to screen which is: (my function for ro[j] is simplified in this example, but that doesn't matter)
<div class="result2"></div>
<script>
var j;
var ro = [0];
for(j=0; j <= 49; j++){
ro[j] = j;
$('.result2').html(ro[j]);
}
</script>
But this doesn't work as I think it keeps replacing the div with each loop rather than adding to the div. Is there a good way to implement this? I thought you could try something like this:
<div class="result2"></div>
<script>
var j;
var ro = [0];
for(j=0; j <= 49; j++){
ro[j] = j;
if(j==0){
$('.result2').html(ro[j]);
}else{
var res = $('.result2').val();
$('.result2').html(res + ro[j]);
}
}
</script>
but this doesn't work since you can't seem to call the result of the script midway through the script? Or I just made a mistake, I'm not sure. Any help would be great!
edit: forgot a semicolon
A list element (ul or ol) should be used for lists as it's more semantically correct:
<ul id="result2"></ul>
Using es6 syntax you can append elements to that list like this:
const ro = [...Array(49).keys()]; // Just setting up a sample array
for (r of ro) {
let li = document.createElement('li');
li.innerHTML = r;
document.getElementById('result2').appendChild(li);
}
This will place the numbers vertically in the screen.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="result2"></div>
<script type='text/javascript'>
var ro = [];
for (var j = 0; j <= 49; j++) {
ro.push(j);
$('.result2').append(ro[j] + '<br />');
}
</script>
</body>
</html>
I'm trying to output a random image from my array and then remove it from the array afterwards for a matching game. I'm new to programming in general and I've seen (what I'm sure are) easier ways of doing it but nothing I understand yet so I'm trying it this way. The problem is that I can't get an image to print out and I'm not sure why. Any help would be appreciated! thanks!
HTML
<script>
printImage(); Sites.splice(r,1);
</script>
JS
var imgArray = new Array();
imgArray[0] = new Image();
imgArray[0].src = 'img0.jpg';
...
imgArray[23] = new Image();
imgArray[23].src = 'img23.jpg';
ImageRotation = imgArray.length;
FirstHalf = '<img src="img';
LastHalf = '.jpg" style="width:100px; height: 100px;">';
function printImage() {
var r = Math.ceil(Math.random() * ImageRotation);
document.write(FirstHalf + r + LastHalf);
}
This is how you can do what you are tried to achieve:
I've used setInterval to demonstrate.
Fiddle
HTML:
<img src="http://dummyimage.com/100x100/252799/fff.png&text=one" />
JavaScript:
var imgs = ['http://dummyimage.com/100x100/252799/fff.png&text=one', 'http://dummyimage.com/100x100/252799/fff.png&text=two', 'http://dummyimage.com/100x100/252799/fff.png&text=three', 'http://dummyimage.com/100x100/252799/fff.png&text=four', 'http://dummyimage.com/100x100/252799/fff.png&text=five', 'http://dummyimage.com/100x100/252799/fff.png&text=six', 'http://dummyimage.com/100x100/252799/fff.png&text=seven', 'http://dummyimage.com/100x100/252799/fff.png&text=eight', 'http://dummyimage.com/100x100/252799/fff.png&text=nine', 'http://dummyimage.com/100x100/252799/fff.png&text=ten'];
setInterval(function() {
var im = document.getElementsByTagName('img')[0];
im.src = imgs[Math.round(Math.random() * (imgs.length - 1))];
}, 1000);
Here is another way of setting the image, based on #chipChocolate.py's answer, and addressing OP's requirement that each image is removed from the list. Instead of changing the first image in the HTML, it rewrites the inner HTML within a <div> container.
<html>
<head>
<script type="text/javascript">
var imgs = ['http://dummyimage.com/100x100/252799/fff.png&text=one', 'http://dummyimage.com/100x100/252799/fff.png&text=two', 'http://dummyimage.com/100x100/252799/fff.png&text=three', 'http://dummyimage.com/100x100/252799/fff.png&text=four', 'http://dummyimage.com/100x100/252799/fff.png&text=five', 'http://dummyimage.com/100x100/252799/fff.png&text=six', 'http://dummyimage.com/100x100/252799/fff.png&text=seven', 'http://dummyimage.com/100x100/252799/fff.png&text=eight', 'http://dummyimage.com/100x100/252799/fff.png&text=nine', 'http://dummyimage.com/100x100/252799/fff.png&text=ten'];
var pictures = imgs.length;
var picim =[];
for (var i=0; i<pictures; i++)
picim [i] = i;
var num = 0; // current index of picture number
function randpic() {
if (pictures > 1) {
pictures--;
for (var i=num; i<pictures; i++) // remove current picture index
picim[i] = picim[i+1];
num = Math.floor(Math.random() * pictures);
var content = '<IMG src="' + imgs[picim [num]] + '" />';
document.getElementById('randpic').innerHTML = content;
}
}
</script>
</head>
<body>
<div id="randpic" onClick="javascript:randpic()">
<img src="http://dummyimage.com/100x100/252799/fff.png&text=one" />
</div>
</body>
</html>
I have this image-rotating-script that i cannot get to work in any major browser.
What the JS does is to show a random image on pageload.
Here's my code:
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
<!-- Begin
var theImages = new Array();
theImages[0] = 'img/rot/forside/FrontReklame1.jpg';
theImages[1] = 'img/rot/forside/FrontReklame2.jpg';
var j = 0;
var p = theImages.length;
var preBuffer = new Array();
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
};
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'" alt="Se vores hingste!" />')
};
// End -->
</script>
What i use to call the image:
<script type="text/javascript">
<!-- Begin
showImage();
// End -->
</script>
This code doesn't show any image live on the net and sometimes it doesn't when i test the page locally?! What am i missing here?
First of all, jquery is not needed in your code.
¿What is the purpose of var j?
Probably you are running showImage() in Header so you can't see the picture.
Try this:
function showImage(){
var selectedImage = preBuffer[whichImage];
selectedImage.alt = "Se vores hingste!";
// Using appendChild instead of document.write
document.body.appendChild(selectedImage);
};
I am working with a very outdated templated site that does not let me change anything in the top portion of the site. The Flash slideshow no longer works properly, so I was wondering if there was any way Javascript/JQuery can be added to the accessable part of the site that will dynamically replace the existing flash slideshow with a Javascript slideshow I have made?
The site is: http://www.familymattersteam.com/
Thanks in advance!
I added the following code to the "script footer" portion of the site's back end. I just started learning Javascript about a week ago, and I borrowed this code from another out of date site, so I'm sure its painful to look at. It works though!
Essentially all I did was used the innHTML command to replace the contents in the "SlideShow" ID with code for a Javascript slideshow.
var t;
var slideShowSpeed = 5000;
var crossFadeDuration = 2;
var PicA = new Array();
PicA[0] = '/Repository/1/4/1/0/7/9/141079/template_files/slide1.jpg';
PicA[01] = '/Repository/1/4/1/0/7/9/141079/template_files/slide2.jpg';
PicA[02] = '/Repository/1/4/1/0/7/9/141079/template_files/slide3.jpg';
PicA[03] = '/Repository/1/4/1/0/7/9/141079/template_files/slide4.jpg';
PicA[04] = '/Repository/1/4/1/0/7/9/141079/template_files/slide5.jpg';
var j = 0;
var p = PicA.length;
var preLoadA = new Array();
for (i = 0; i < p; i++) {
preLoadA[i] = new Image();
preLoadA[i].src = PicA[i];
};
function runSlideShowA() {
if (document.all) {
document.images.SlideShowA.style.filter='blendTrans(duration=2)';
document.images.SlideShowA.style.filter='blendTrans(duration=crossFadeDuration)';
document.images.SlideShowA.filters.blendTrans.Apply();
};
document.images.SlideShowA.src = preLoadA[j].src;
if (document.all) {
document.images.SlideShowA.filters.blendTrans.Play();
};
j = j + 1;
if (j > (p - 1)) j = 0;
t = setTimeout('runSlideShowA()', slideShowSpeed);
};
newSlide = document.getElementById('SlideShow');
newSlide.innerHTML = '<img src="/Repository/1/4/1/0/7/9/141079/template_files/slide1.jpg" name="SlideShowA" width="874" height="206">';
runSlideShowA();