I need some with javascript code. I have a html code that read my list of image from in my image folder. I have to create a function button, so when I click on the next button, the next image will show. I have my code, but somehow it's not working. I have debug the code, there is no error, however the next image is not showing
Here is my code code:
var $ = function(id) {
return document.getElementById(id);
};
var listNode, captionNode, imageNode;
// Process image links
var i, linkNode, image;
var imageCache = [];
var imageCounter = 0;
var nexButton = function () {
listNode = $("image_list");
captionNode = $("caption");
imageNode = $("image");
var links = listNode.getElementsByTagName("a");
var imageCounter = 0;
for (i = 0; i < links.length; i++) {
linkNode = links[i];
// Preload image and copy title properties
image = new Image();
image.src = linkNode.getAttribute("href");
image.title = linkNode.getAttribute("title");
if (imageCounter < linkNode) {
imageCounter = imageCounter + 1;
image = imageCache[imageCounter];
imageNode.src = image.src;
captionNode.firstChild.nodeValue = image.title;
}
else {
alert("This is the last image");
}
}
};
window.onload = function() {
$("next").onclick = nexButton;
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Slide Show</title>
<link rel="stylesheet" href="main.css">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="slide_show.js"></script>
</head>
<body>
<section>
<h1>Fishing Slide Show</h1>
<ul id="image_list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<h2 id="caption">Casting on the Upper Kings</h2>
<p>
<img src="images/casting1.jpg" alt="" id="image">
</p>
<input type="button" value="Previous" name="previous" id="previous">
<input type="button" value="Next" name="next" id="next">
</section>
</body>
</html>
Related
I need some help preloading images in javascript, here is my code right now. I have to preload the images and then attach a mouseover and mouseout event to them, but preloading is really the only problem I am having right now.
"use strict";
var $ = function(id) { return document.getElementById(id); };
window.onload = function preload() {
var image1 = $("image1");
var image2 = $("image2");
// preload images
var links = $("image_list").getElementsByTagName("a");
var i,link, image;
// attach mouseover and mouseout events for each image
image1.onmouseover = function() {
"images/release.jpg";
};
image1.onmouseout = function() {
};
image2.onmouseover = function() {
};
image2.onmouseout = function() {
};
};
Blockquote
Here is the HTML
<!DOCTYPE html>
<html>
<head>
<title>Image Rollover</title>
<link rel="stylesheet" type="text/css" href="rollover.css">
<script type="text/javascript" src="rollover.js"></script>
</head>
<body>
<main>
<h1>Fishing Images</h1>
<p>Move your mouse over an image to change it and back out of the
image to restore the original image.</p>
<ul id="image_list">
<li><a href="images/release.jpg" id="catch" title="Catch and
Release"></a></li>
<li></li>
<li></li>
<li></li>
</ul>
<p>
<img id="image1" src="images/hero.jpg" alt="">
<img id="image2" src="images/bison.jpg" alt="">
</p>
</main>
</body>
</html>
`
You can do that binding the event onload
image2.onload = function(){
image2.onmouseover = function() {
};
image2.onmouseout = function() {
};
}
If you want to wait for all images to load you can do it with jQuery
$(window).on("load", function() {
//This will be executed when every single DOM element is loaded
}
I'm making a slideshow in Javascript with a play/pause button. When I press one time on the button, the slideshow starts to play. When I press a second time, the slideshow has to stop. I only have no idea how to put this function in one button.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Oefening 19.7</title>
<link href="stijl_Oefening19_6.css" rel="stylesheet" />
<script>
var i = 0;
var foto = new Array(3);
var timer;
foto[0] = "images/slideshow/slideshow1.png";
foto[1] = "images/slideshow/slideshow2.png";
foto[2] = "images/slideshow/slideshow3.png";
foto[3] = "images/slideshow/slideshow4.png";
function slide() {
document.getElementById("slideshow").src = foto[i];
if (i < foto.length - 1) i++;
else i = 0;
timer = setTimeout("slide()", 3000);
}
</script>
</head>
<body>
<div id="portfolio">
<img src="images/slideshow/slideshow1.png" id="slideshow" alt="slideshow" />
</div>
<div id="button">
<a href="#" id="startcycle" onclick="slide()">
<img id="btnCycle" src="images/slideshow/cyclebutton.png" />
</a>
</div>
</body>
</html>
Use setInterval() instead. And separate the switch function and the slide function.
function slide() {
document.getElementById("slideshow").src = foto[i];
i = (i + 1)%foto.length;
}
function setTimer(){
if (timer) {
// stop
clearInterval( timer );
timer=null;
}
else {
timer = setInterval("slide()",1000);
}
}
Let the button call setTimer().
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<img name="img" src="http://4.bp.blogspot.com/-Jdj5JKTA1xQ/T-BzvrQDZhI/AAAAAAAABhs/bX0TUEFb3Ck/s1600/windows-help1.png" width="90%" height="100%">
<script>
setInterval(function () {
var images = document.getElementsByTagName('img'); // get all img DOM objects
for (var i = 0; i < images.length; i++) {
images[i].src = images[i].src.replace(/\btime=[^&]*/, 'time=' + new Date().getTime());
}
}, 1000);
</script>
</body>
</html>
In Chrome I can see my picture refresh every second, but in IE version 9 it does not work. It does not refresh after displaying one time. How can I solve this problem, or is there any other way to do it?
The code, as is, should work. Also in IE 9.
Try something like this to verify that the scr attribute actually get changed:
Sample fiddle
JSFiddle does not work well in IE 8 – which I tested on, but this should give you a viewable sample for IE:
Sample fiddle
HTML:
<img src="http://jsfiddle.net/img/initializing.png?time=123" />
<img src="http://jsfiddle.net/img/initializing.png?time=123" />
<br/>
Img0.src: <input type="text" /><br/>
Img1.src: <input type="text" /><br />
Counter : <input type="text" />
CSS:
input {
width : 500px;
}
Javascript:
var img = document.getElementsByTagName('img');
var inp = document.getElementsByTagName('input');
var cnt = 0;
setInterval(function () {
inp[2].value = ++cnt;
for (var i = 0; i < img.length; i++) {
img[i].src = img[i].src
.replace(/\btime=[^&]*/, 'time=' + new Date().getTime());
inp[i].value = img[i].src;
}
}, 1000);
I have a problem with javascript.
I need to add onclick listener for all img tags in my page, so click on an image should call imageClicked and pass element to function. but this code all time pass img src="../images/3.jpg" to function.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sample Page</title>
</head>
<body onload="start()">
<script type="text/javascript">
function start(){
var images = document.getElementsByTagName("img");
for ( var i = 0; i < images.length; i++) {
var image=images[i];
image.addEventListener('click', function(){
imageClicked(image);
});
}
}
function imageClicked(image){
alert(image.src)
}
</script>
<div id="main">
<div id="center">
<button>نمایش اسلایدی</button>
</div>
<div id="gallery">
<div id="img1" class="image">
<img src="../images/1.jpg"></img>
<div id="title">
<label>عکس</label>
</div>
</div>
<div id="img2" class="image">
<img src="../images/2.jpg"></img>
<div id="title">
<label>عکس</label>
</div>
</div>
<div id="img" class="image">
<img src="../images/3.jpg"></img>
<div id="title">
<label>عکس</label>
</div>
</div>
</div>
</div>
That is because of the scope. Everytime you loop the image value is set again. And so it will always pass the last image in the loop.
You can do 2 thing. Use the this like below. Or create an anonymouse function.
function start(){
var images = document.getElementsByTagName("img");
for ( var i = 0; i < images.length; i++) {
images[i].addEventListener('click', function(){
imageClicked(this);
});
}
}
// Or even better
function start(){
var images = document.getElementsByTagName("img");
for ( var i = 0; i < images.length; i++) {
images[i].addEventListener('click', imageClicked);
}
}
function imageClicked(){
alert(this.src); // this refers to the image
}
Anonymouse function:
function start(){
var images = document.getElementsByTagName("img");
for ( var i = 0; i < images.length; i++) {
(function(image){
image.addEventListener('click', function(){
imageClicked(image); // Use the element clicked object (this)
});
})(images[i]);
}
}
What you want is something like this:
function start(){
var images = document.getElementsByTagName("img");
for ( var i = 0; i < images.length; i++) {
images[i].addEventListener('click', function(){
imageClicked(this);
});
}
}
function imageClicked(image){
alert(image.src)
}
In the code you wrote, you copied the image element and then assigned an eventListener to the copy of the object. Because this copy was over-written multiple times, imageClicked was referred to by the only one that wasn't over-written, the last image. The this is to refer to the actual image element in the callback function.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Can someone suggest good javascript code to implement slideshow such that all the elements of slideshow are declared in or an array.I want it using purely javascript without using jQuery
This may be useful to you. Copy and replace images.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>image slide show</title>
<style type="text/css">
body {
background:#FFC;
}
input[type="button"] {
background:#939907;
color:#fff;
border:1px solid #434603;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-ms-border-radius:5px;
font-weight:bold;
cursor:pointer;
height:25px;
}
img {
width:525px;
height:200px;
border:2px solid #CF3;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-ms-border-radius:15px;
}
</style>
<script type="text/javascript">
var images=new Array();
var i=0, t, f=false;
images[0] ="images/heli1.jpg";
images[1] ="images/heli2.JPG";
images[2] ="images/heli3.JPG";
images[3] ="images/heli4.JPG";
images[4] ="images/heli5.JPG";
images[5] ="images/heli6.JPG";
images[6] ="images/heli7.JPG";
images[7] ="images/heli2.JPG";
images[8] ="images/heli9.JPG";
images[9] ="images/heli1.jpg";
images[10] ="images/heli2.JPG";
images[11] ="images/heli3.JPG";
images[12] ="images/heli4.JPG";
images[13] ="images/heli5.JPG";
images[14] ="images/heli6.JPG";
function start(){
if(i>=images.length){
i=0;
document.getElementById('img').src=images[i];
i++;
}
else{
document.getElementById('img').src=images[i];
i++;
}
t=setTimeout("start()", 1000);
}
function play(){
if(f==false){
f=true;
start();
}
}
function Stop(){
clearTimeout(t);
f=false;
}
function next(){
if(i>=images.length){
i=0;
document.getElementById('img').src=images[i];
i++;
}
else{
document.getElementById('img').src=images[i];
i++;
}
}
function previous(){
if(i>=images.lenght){
i=images.length;
document.getElementById('img').src=images[i];
i--;
}
else if(i<=0){
i=images.length;
document.getElementById('img').src=images[i-1];
i--;
}
else if(i>images.length){
document.getElementById('img').src=images[images.length-i];
}
else if(i<=images.length || i>0){
document.getElementById('img').src=images[i-1];
i--;
}
}
</script>
</head>
<body>
<table width="50%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td><input type="button" value="Previous" onclick="previous()" /></td>
<td align="center"><img src="images/heli6.JPG" alt="" id="img" /></td>
<td><input type="button" value="Next" onclick="next()" /></td>
</tr>
<tr>
<td colspan="3" align="center" height="50"><input type="button" value="Play" onclick="play()" />
<input type="button" value="Stop" onclick="Stop()" /></td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<script language="javascript">
loaded_img = 0;
no_of_img = 12;
img_name = new Array();
img_name.length = no_of_img - 1;
for ( var count = 0; count < no_of_img; count++)
{
var file_num = count + 1;
var filename = ("img" + file_num + ".jpg");
img_name[count] = filename;
}
var whichlink=0
function slideit(){
if (!document.images)
return
document.images.myimage.src=img_name[loaded_img].src
whichlink=loaded_img
if (loaded_img<img_name.length-1)
loaded_img++
else
loaded_img=0
setTimeout("slideit()",1000)
}
slideit()
function changeImage(direction)
{
loaded_img=loaded_img+direction;
if (loaded_img < 0)
loaded_img = no_of_img - 1;
if (loaded_img == no_of_img)
loaded_img = 0;
document.myimage.src = img_name[loaded_img];
}
</script>
<script language="javascript">
//slideshowimages()=new Array()
//slideshowimages("img1.jpg")
var whichlink=0
var whichimage=0
function slideit(){
if (!document.images)
return
document.images.myimage.src=slideimages[whichimage].src
whichlink=whichimage
if (whichimage<slideimages.length-1)
whichimage++
else
whichimage=0
setTimeout("slideit()",1000)
}
slideit()
</script>
<form>
<img src="left-disabled.gif" width="27" height="22" border="0">
<img src="img1.jpg" name="myimage">
<img src="right-enabled.gif" width="27" height="22" border="0">
</form>
</body>
</html>
This question is old, but here is a more comprehensive example with pure JavaScript. It assumes that index.html and slideshow.js are on the same level. It begins with an automatically playing slideshow (that can be paused and resumed), and it also has previous and next buttons. If you only want one of those sets of functionality, it should be fairly straightforward to remove the other.
The HTML is very barebones and can be altered as desired for the most part as long as you mind the ids. I haven't provided any styling, so that's all you.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>slideshow</title>
</head>
<body>
<section>
<div>
<img id="image">
</div>
<div>
<button type="button" id="playBtn">Play</button>
<button type="button" id="pauseBtn">Pause</button>
</div>
<div>
<button type="button" id="prevBtn">Prev</button>
<button type="button" id="nextBtn">Next</button>
</div>
</section>
<script src="slideshow.js"></script>
</body>
</html>
If you want to support IE8 and/or below, you'll need to ditch the DOMContentLoaded listener. Essentially, you could just extract the IIFE and then replace its final line return beginSlideshow with beginSlideshow(). I hope that makes sense, and I hope you find this helpful. Good luck.
// slideshow.js
document.addEventListener(
// IE 9 and up. See http://caniuse.com/#feat=domcontentloaded
'DOMContentLoaded'
, (function STRICT() {
'use strict';
// Avoid 'new' and stick to array literals where possible.
var images =
[ 'img/30.gif'
, 'img/31.gif'
, 'img/32.gif'
, 'img/33.gif'
, 'img/34.gif'
]
, img = document.getElementById('image')
, playBtn = document.getElementById('playBtn')
, pauseBtn = document.getElementById('pauseBtn')
, prevBtn = document.getElementById('prevBtn')
, nextBtn = document.getElementById('nextBtn')
, index = 0
, indexOfLastImage = images.length - 1
, play
, playInterval
, pause
, goToPrevious
, goToNext
, beginSlideShow
play = function() {
playInterval = setInterval(
function() {
if (index === indexOfLastImage) { index = 0 }
img.src = images[++index]
}
, 3000
)
}
pause = function() {
clearInterval(playInterval)
playInterval = null
}
goToPrevious = function() {
// if the slideshow was running
if (playInterval) { pause() }
// if we're at the beginning of the array
if (index === 0) {
index = indexOfLastImage + 1
}
img.src = images[--index]
}
goToNext = function() {
// if the slideshow was running
if (playInterval) { pause() }
// if we're at the beginning of the array
if (index === indexOfLastImage) {
index = -1
}
img.src = images[++index]
}
beginSlideShow = function() {
// add listeners
playBtn.addEventListener('click', play)
pauseBtn.addEventListener('click', pause)
prevBtn.addEventListener('click', goToPrevious)
nextBtn.addEventListener('click', goToNext)
// set initial image for display prior to first interval
img.src = images[index]
// kick off auto play
play()
}
// This is what's attached to and will fire on the DOMContentLoaded event
return beginSlideShow
}())
)