I want to change an image after some seconds.
I have this code that works fine with images:
<script language="javascript">
var x = 0,
images = [
"images/product/8f0165121827ee27e9ae4645988e3742.png",
"images/product/f227c25f3cc58ab2af04a5da27879f17.png"
];
setInterval(function() {
document.getElementById('ad').src = images[x];
if (x<1) {
x+=1;
} else if (x=2) {
x=0;
}
}, 1000);
</script>
<img id='ad' type='text' src="images/product/8f0165121827ee27e9ae4645988e3742.png" />
The problem is that I have one image and one swf file.
Can I change the code to change the image and swf file at specific time?
To incorporate an SWF file, your best bet would be to use SWFObject.
It is a simple open-source Javascript library that is easy-to-use and standards-friendly method to embed Flash content. Then place this in the body of your HTML code:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
images = new Array;
images[0] = "images/product/8f0165121827ee27e9ae4645988e3742.png";
images[1] = "images/product/f227c25f3cc58ab2af04a5da27879f17.png";
setInterval(function() {changeImage()},1000);
x = 0;
function changeImage() {
if (x<2) {
document.getElementById('ad').src = images[x];
x+=1;
}
else if (x == 2) {
swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0");
x+=1;
}
else {
x=0;
}
}
</script>
<img id='ad' type='text' src="images/product/8f0165121827ee27e9ae4645988e3742.png" />
With myContent.swf being the name of the SWF file you want to add. A good tool to use along with this is the SWFObject HTML and Javascript generator. It basically generates the HTML and Javascript you need to embed the Flash using SWFObject.
#Pies I also recommend using swfObject. However, Flash can accept most media files directly as a parameter. If you're already using flash on your page, and you know it exists, you can send an image or a swf file to it:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
</head>
<bod>
<div id="ad"></div>
<script language="javascript">
images = new Array;
images[0] = "https://media.giphy.com/media/wLrdNV4YclpmM/giphy.gif";
images[1] = "http://samples.mplayerhq.hu/SWF/test.swf";
setInterval(function() {changeImage()},4000);
var x = 0;
var el = document.getElementById("ad");
function changeImage() {
swfobject.embedSWF(images[x], "ad", 600, 300, "10.0.0", null,{ bgcolor:"#000000" });
x+=1;
if (x > images.length-1) {
x=0;
}
}
changeImage();
</script>
</body>
I'd have fiddled this, but it seems jsfiddle blocks swfObject.
Related
I'm trying to use this script to iframe a page into itself, and refresh the iframe at an interval:
document.write('<iframe id="frame" src="' + window.location.href + '"><script>setInterval(function ()/{document.getElementById("frame").contentWindow.location.reload();},10000);</script>');
All it does is append '); to the end of the page.
I am using this as a script on someone else's page to auto refresh. If I just refreshed, the interval would have been destroyed.
So While I'm still unclear of what you're trying to get to with this and your question was rather unclear (in retrospect), I was curious about how can we solve this without creating an infinite loop.
window.top !== window.self
won't work because they are one and the same, so I figured that will use a hash on the original page, omit it from the child to differentiate one from its own clone.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
</head>
<body>
<h1 id="h1"></h1>
<script type="text/javascript">
document.getElementById('h1').textContent = window.location.search;
</script>
<script type="text/javascript">
if (window.location.hash === '#origin') {
var ifr = document.createElement('iframe');
var props = {
src: window.document.location.href + '?r=0',
width: 500,
height: 300,
style: "border:1px solid red;width:500px;height:300px;"
}
for (var key in props) {
ifr.setAttribute(key, props[key]);
}
document.body.appendChild(ifr);
setInterval(function(){
var s = ifr.src.split('?r=')[0];
ifr.setAttribute('src', s + '?r=' + parseInt( Math.random() * 1000000))
console.log(ifr.src);
// you can skip this, but it illustrates the refreshes
document.getElementById('h1').textContent = ifr.src;
}, 2000);
}
</script>
</body>
</html>
You will have to run this on your own, the code snippet dislikes its attempt for redirect and I cannot disagree..., - NB: only ran it in Chrome, but there's much that should be different elsewhere
Also, just for the sake of clarity, if you save this as test.html then you should run it as path/to/your/file/test.html?r=378426#origin
Took a bit of a shortcut with how the query string is handled, but the gist of it is here.
Create an iframe object, add its properties then add to the DOM and finally reload the page with a new query string every so often
var ifr = document.createElement('iframe');
var props = {
src: 'http://example.com/?r=0',
width: 500,
height: 300,
style: "border:1px solid red;width:500px;height:300px;"
}
for (var key in props) {
ifr.setAttribute(key, props[key]);
}
document.body.appendChild(ifr);
setInterval(function(){
var s = ifr.src.split('?r=')[0];
ifr.setAttribute('src', s + '?r=' + parseInt( Math.random() * 1000000))
console.log(ifr.src);
}, 10000);
I'm very new to javascript and EaseLJS but I don't understand how this doesnt work.
I have a html file:
<!DOCTYPE html>
<html>
<head>
<script src="easeljs-0.7.1.min.js" type="text/javascript"></script>
<script src="game.s.js" type="text/javascript"></script>
<script>
function init() {
renderLevel();
}
</script>
</head>
<body onLoad="init();">
<canvas id="canvas" width="500" height="300">
alternate content
</canvas>
</body>
</html>
The game.s.js file looks like:
function renderLevel()
{
var stage = new createjs.Stage("canvas");
var bitmap = new createjs.Bitmap("brick.png");
stage.addChild(bitmap);
bitmap.x = 32;
bitmap.y = 32;
stage.update();
alert(stage.canvas);
alert(bitmap.name);
}
The alert I just put there to check the values. stage.canvas rightly points to the HTML5Canvas element but the image won't show!
What am I missing here? :)
Thank you
The problem is that you are adding the image to stage before it loads, then there's no image yet. You need to wait for the image to load before adding it to the stage.
You can do this by using a preload(); function to load all the images before calling init(); or renderLevel();. Here's what this function should look like:
function preload(images, callback) {
var count = images.length;
if (count === 0) {
callback();
}
var loaded = 0;
$(images).each(function () {
$('<img>').attr('src', this).load(function () {
loaded++;
if (loaded === count) {
callback();
}
});
});
}
...and then you can use it like so:
preload(["image1.png", "image2.png"], init());
I am fairly inexperienced with Javascript, but I've been struggling with something that doesn't feel like it should be this hard. I'm trying to have my script check an image that has been loaded to see if it's valid (Not a missing file), and if it is missing, to reset the image array to item 0 and repeat, as I can assume it has reached the end of available images in the dir when it encountered a missing file.
I need to reserve several hardcoded image names in a local directory for a slideshow display, but in the event there are more reserved names than images, I need it to reset rather than display broken images.
I cannot make use of PHP or HTML5 for a more straightforward and dynamic solution. I've tried several attempts and I'm just out of ideas here. Any help would be appreciated. Thank you.
<!DOCTYPE html>
<html>
<head>
<title>Monitor Display<title>
<script src="jquery-1.10.2.min.js"></script>
<base href="file://c:/LocalDir/"/>
<!-- CSS -->
<style>
.images {
position:relative; margin:-8px; max-width:100%; height:auto;}
.images img {
position:absolute; left:0; top:0; margin:-8px; max-width:100%; height:auto;}
body {
background-color:rgb(51,51,51);}
</style>
</head>
<body>
<!-- Animation -->
<script>
$(document).ready(function(){
changeImage();
});
function changeImage() {
var img = $('.images img');
if(x >= (images.length-1)) {
x = 0;
}
else
{
x++;
}
img[0].src = images[x];
setTimeout("changeImage()", 5000);
}
var images = [],
x = 0;
images[0] = "ThumbChart0big.png";
images[1] = "ThumbChart1big.png";
images[2] = "ThumbChart2big.png";
images[3] = "ThumbChart3big.png";
</script>
<!-- Image Container -->
<div class="images">
<img src="ThumbChart1big.png"/>
</div>
</body>
</html>
you can use .error() :
....
var x = 0;
function changeImage() {
var img = $('.images img');
img.error( function() {
x = 0; // reset the array index
});
//continue...
I have a simple HTML page that when is load runs a javascript code that makes a preload of a numbers of images. When all images are loaded the java script show the result: a simple timelapse/slideshow make with the images:
that's the code:
<HTML>
<HEAD>
<TITLE>Video</TITLE>
</HEAD>
<BODY BGCOLOR="#000000">
<img name="foto">
<SCRIPT LANGUAGE="JavaScript">
var Pic = new Array();
Pic[0] = '/images/image1.jpg'
Pic[1] = '/images/image2.jpg'
Pic[2] = '/images/image3.jpg'
//this part in real code is replaced with a PHP script that print image location dinamically
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];
}
//all images are loaded on client
index = 0;
function update(){
if (preLoad[index]!= null){
document.images['foto'].src = preLoad[index].src;
index++;
setTimeout(update, 1000);
}
}
update();
</script>
</BODY>
</HTML>
My question is: how can i put an image that can it be show before the script end?
Is there a way to do it?
Is possible to print somewhere in the page the current number of image loaded in the script?
Thanx
P.S. all my test don't give me any positive feedbak: each thing i put on html page will be shown after scripts end...
Launch the code on the onLoad event and add a src to your empty image tag:
<img name="foto" src="/images/image0.jpg">
This will load image0 at the beggining.
<HTML>
<HEAD>
<TITLE>Video</TITLE>
</HEAD>
<BODY BGCOLOR="#000000" onLoad="preload()">
<img name="foto">
<SCRIPT LANGUAGE="JavaScript">
preLoad[i] = new Image();
function preload() {
var Pic = new Array();
Pic[0] = '/images/image1.jpg'
Pic[1] = '/images/image2.jpg'
Pic[2] = '/images/image3.jpg'
//this part in real code is replaced with a PHP script that print image location dinamically
var t;
var j = 0;
var p = Pic.length;
var preLoad = new Array();
for (i = 0; i < p; i++) {
preLoad[i].src = Pic[i];
}
}
//all images are loaded on client
index = 0;
function update(){
if (preLoad[index]!= null){
document.images['foto'].src = preLoad[index].src;
index++;
setTimeout(update, 1000);
}
}
update();
</script>
</BODY>
</HTML>
To add a counter, in the main loop write a string to the document with the i value, for example..
you need to have an event registered for when the image is actually fully loaded. I believe jquery has support for that.
I need some suggestions and ideas to improve a background image rotator.
The script as of now is very basic but I'm looking to change 2 thing.
I want the images to fade into each other.
I need to be able to preload the images so it doesn't have the delay when loading them when they first display.
Thoughts?
<script type="text/javascript">
var images = ['bg1.png', 'bg2.png', 'bg3.png'];
var curImage = 0;
function switchImage()
{
curImage = (curImage + 1) % images.length
document.body.style.backgroundImage = 'url(images/' + images[curImage] + ')'
}
window.setInterval(switchImage, 5000);
</script>
Example: http://www.nickersonweb.com/demo/PMS/index.html
For fading, try fadeOut() and fadeIn() with jQuery. (Demo and documentation here: http://api.jquery.com/fadeOut/, http://api.jquery.com/fadeIn/)
For preloading, trying making an invisible image somewhere on the page, like this:
<img src='bg1.png' width="0" height="0">
Another way to preload the images is using javascript to create an image object. Here's the code I used for something similiar.
var imgnum=0;
var imgsrcs=new Array("imgs/img1.jpg","imgs/img2.jpg")
var fimgs=new Array();
var imgid="imgid";
function timedCount()
{
$("#"+imgid).fadeTo(1000,0,function(){newimage();
});
setTimeout(timedCount,5000);
}
function newimage()
{
imgnum=(imgnum+1)%imgsrcs.length;
document.getElementById(imgid).src=fimgs[imgnum].src;
$("#"+imgid).fadeTo(1000,1);
}
function initializeslideshow()
{
var i;
for(i=0;i<imgsrcs.length;i++)
{
fimgs[i]=new Image(270,270)
fimgs[i].src=imgsrcs[i];
}
}
initializeslideshow();
setTimeout(timedCount,5000);
You'll need to link to jQuery (and jQuery UI, I think) to use the code above, like this, for instance:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>