i have this slider on my website ans is working fine ... it is just and image changer which changes the images on the slide show and its code is written in the main.html file is this
<img src="images/1.jpg" name="slide" width="100%" height="368" />
<script>
<!--
var image1=new Image()
image1.src="images/1.jpg"
var image2=new Image()
image2.src="images/4.jpg"
var image3=new Image()
image3.src="images/3.jpg"
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
now its working absolutely fine.. all what i want is that i have a file name page1.js i want to put my javascript code in that file instead of my main.html file.. please tell me how i put this javascript code in that page1.js file and call it so that the image slide show will work fine as it is working now having the javascript code in the same file..
Put your javascript from above into a file named my-slides.js, and then replace the script tag in your current HTML file with this one:
<script type="text/javascript" src="my-slides.js"></script>
Ensure that my-slides.js is in the same folder as your HTML file, otherwise change the path accordingly.
FWIW, although you have not asked for this in your question, I think I should also mention the following:
Consider using curly braces to define code blocks in if and else blocks, even when it is a single line. Really improves code readability
This line: document.images.slide.src=eval("image"+step+".src") uses eval and you should avoid it. I am not sure what is accomplished here by wrapping your string concatenation with an eval. I would store the Images in an array and access this by index instead.
Rather than have a setTimeout within the function to recur, consider using setInterval outside of the function.
As requested.
This is what my-slides.js should contain.
var numImages = 3;
var images = [];
for (var i = 0; i < numImages; ++i) {
var image = new Image();
image.src = 'images/' + (i + 1) + '.jpg';
images.push(image);
}
var step = 0;
function slideit() {
if (! document.images) {
return;
}
document.images.slide.src = images[step].src;
step = (step + 1) % numImages;
}
setInterval(slideit, 2500);
All you have to do is include your JS file either at your footer or header :
<script src="js.js"></script>
and then in that JS file wil contain :
var image1=new Image()
image1.src="images/1.jpg"
var image2=new Image()
image2.src="images/4.jpg"
var image3=new Image()
image3.src="images/3.jpg"
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
the only thing you need to change is the path for the images themselves, they can be either relative to the JS file or absolute.
Related
I have a javascript loop that changes the image of a specified tag every x seconds, but when I modify it to only run when I click a button, it does nothing.
The javascript code:
<script type="text/javascript">
var step = 1
var image1 = new Image()
image1.src = "img1.jpg"
var image2 = new Image()
image2.src = "img2.jpg"
var image3 = new Image()
image3.src = "img3.jpg"
function slideit() {
if (!document.images) return
document.images.slide.src=eval("images"+step+".src")
if (step < 3)
step++
else
step=1
}
//-->
</script>
The button code:
<input type="button" name="btnnext" value="Next Picture" onclick="slideit" />
I have tried changing to onclick="slideit()" but that states
"Uncaught ReferenceError: images1 is not defined"
I am not sure where to go from here, any help would be appreciated.
It should be onclick='slideit()'
The reason you're getting Uncaught ReferenceError: images1 is not defined is because it's trying to eval('images1.src') and (I don't think) there's such a variable in your code as window.images1, window.images2 or window.images3.
What you probably want instead is to define an array of srcs, and then get srcsArray[step] and use that as your new src for your document.images.slide.
As #patrick-evans said though, you could probably fix it by changing your eval to eval('image' + step + '.src').
I hope this helps.
I need to on the click of the first image, for it to switch to the second image, and then on the click of that to switch to the third image and so on and so on.
I have this so far, and it only goes to the second image and stops there, or goes instantly to the third...
<img id="imgClickAndChange" class="art_shop" name="pic" src="images/edited_images/1.jpg" style="display: none;" onClick="changeImage();changeImageAgain();">
<script language="javascript">
function changeImage() {
if (document.getElementById("imgClickAndChange").src = "images/edited_images/1.jpg")
{
document.getElementById("imgClickAndChange").src = "images/edited_images/2.jpg";
}
}
</script>
<script language="javascript">
function changeImageAgain() {
if (document.getElementById("imgClickAndChange").src == "images/edited_images/2.jpg")
{
document.getElementById("imgClickAndChange").src = "images/edited_images/3.jpg";
}
}
</script>
I have also this example, which i pulled from another thing i did a while ago. It's an image slider, with the images already stored in the header, and they load the new image in every X seconds. Is there any way to modify this to load the next image on the click of a button (or the image itself) as opposed to it being timed? Either solution would work. Thanks
<head>
<script type="text/javascript">
var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "images/edited_images/1.jpg" // set image src property to image path, preloading image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/edited_images/2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "images/edited_images/3.jpg"
slideimages[3] = new Image()
slideimages[3].src = "images/edited_images/4.jpg"
</script>
</head>
<img id="imgClickAndChange" class="art_shop" name="pic" src="images/edited_images/1.jpg" style="display: none;" onClick="changeImage();changeImageAgain();">
<script type="text/javascript">
//variable that will incement through the images
var step=0
function slideit(){
if (!document.images)
return
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<1)
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<2)
document.getElementById('imgClickAndChange').src = slideimages[step].src
if (step<3)
step++
else
step=0
setTimeout("slideit()",1000)
}
slideit()
</script>
You can make it much simpler. Also I would not recommend preloading the images as it slows down your pageload.
Try this:
EDIT: without looping
<img id="imgClickAndChange" class="art_shop" name="pic" onClick="changeImage()">
<script>
// image sources in array. image[0] will have first image src, image[3] will have last src
var images = [
"images/edited_images/1.jpg",
"images/edited_images/2.jpg",
"images/edited_images/3.jpg",
"images/edited_images/4.jpg"
]
var step = 0;
changeImage(); // set first image src after page loads
function changeImage() {
// exit if no images, or step = number of items in array (4)
if (typeof images == "undefined" || step == images.length) return;
document.getElementById('imgClickAndChange').src = images[step];
step++;
}
</script>
I am trying to make a responsive slider for mobile version.
Site was developed using angular JS.
When I am trying to integrate the JQuery sliders, total site was distubing because of Bootstrap CSS file.
So, in that part I founded a plain Javascript code. And in this how to make those images responsive.
Below I am adding the code.
<head>
<script type="text/javascript">
var slideimages = new Array() // create new array to preload images
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "images/slide/1.jpg" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/slide/2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "images/slide/2.jpg"
</script>
</head>
<body>
<img src="firstcar.gif" id="slide" width=100 height=56 />
<script type="text/javascript">
//variable that will increment through the images
var step = 0
var whichimage = 0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
whichimage = step
if (step<2)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
function slidelink(){
if (whichimage == 0)
window.location = "#"
else if (whichimage == 1)
window.location = "#"
else if (whichimage == 2)
window.location = "#"
}
slideit()
</script>
Previous answers are correct but you have to use $ for jQuery:
$(slideimages[0]).addClass("img-responsive");
WIthout jQuery:
slideimages[0].className += "img-responsive";
To add a class, just use addClass:
slideimages[0].addClass("img-responsive");
Are you just trying to add a class? I don't quite understand your question.
EDITED you simply need to do this:
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
document.getElementById('slide').className = "img-responsive";
whichimage = step
if (step<2)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
i tried this code.. but when the image changes it is not displayed properly..
alt image(a small broken image is displayed)..
i tried putting var step=1; before the function as global variable.. But still it does not work.. I even tried document.images.slide.src = "images/pentagg.jpg";
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "images/pentagg.jpg"
var image2 = new Image()
image2.src = "images/promo.jpg"
</script>
</head>
<body>
<p><img src="images/pentagg.jpg" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
function slideit()
{
var step=1;
document.images.slide.src = eval("image"+step+".src")
if(step<2)
step++
else
step=1
setTimeout("slideit()",2500)
}
slideit()
</script>
</body>
There's something wrong you did. You made the step variable available inside slideit() function only by declaring it as a local variable. So everytime the function is being called using setTimeOut a new step variable is created. That causes never to change your initial image.
And I prefer this as the appropriate way to call the slideit function using setTimeOut
setTimeout(function(){slideit()},2500);
That's it. Here's the full code :
HTML :
<img src="http://picpuddle.com/wp-content/uploads/2014/06/cute-cartoons-21.jpg" width="500" height="300" name="slide" />
javaScript :
var step=1;
var image1 = new Image();
image1.src = "http://picpuddle.com/wp-content/uploads/2014/06/cute-cartoons-21.jpg";
var image2 = new Image();
image2.src = "http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg";
function slideit()
{
//This looks better though
//document.getElementsByName("slide")[0].src = eval("image"+step+".src");
document.images.slide.src = eval("image"+step+".src");
if(step<2)
step++;
else
step=1;
setTimeout(function(){slideit()},2500);
}
slideit();
jsFiddle
you can't pass the image variable as an argument like that. it's taking a string called "image1.src".
try putting them in an array then getting the index with your step variable.
I'm working on making a JS script that will go in the header div and display a few pictures. I looked into JQuery Cycle, but it was out of my league. The code I wrote below freezes the browser, should I be using the for loop with the timer var?
<script type="text/JavaScript" language="JavaScript">
var timer;
for (timer = 0; timer < 11; timer++) {
if (timer = 0) {
document.write('<img src="images/one.png">');
}
if (timer = 5) {
document.write('<img src="images/two.png">');
}
if (timer = 10) {
document.write('<img src="images/three.png">');
}
}
</script>
Thanks!
Assuming you want a script to rotate images and not just write them to the page as your code will do, you can use something like this:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="target"></div>
<script>
var ary = ["images/one.png","images/two.png","images/three.png"];
var target = document.getElementById("target");
setInterval(function(){
target.innerHTML = "<img src=\""+ary[0]+"\" />";
ary.push(ary.shift());
},2000);
</script>
</body>
</html>
Of course the above code has no effects (like fading) which jQuery will give yous, but it also doesn't require loading the entire jQuery library for something so basic.
How about just running the script after the page loads?
<script>
// in <head> //
function load() {
var headDiv = document.getElementById("head");
var images = ["images/one.png", "images/two.png"];
for(var i = 0; i<images.length; i++) {
image = document.createElement("img");
image.src = images[i];
headDiv.appendChild(image);
}
}
</script>
Then use <body onload="load();"> to run the script.
Edit
To add in a delay loading images, I rewrote the code:
<script>
// in <head> //
var displayOnLoad = true; // Set to true to load the first image when the script runs, otherwise set to false to delay before loading the first image
var delay = 2.5; // seconds to delay between loading images
function loadImage(url) {
image = document.createElement("img");
image.src = images[i];
headDiv.appendChild(image);
}
function load() {
var headDiv = document.getElementById("head");
var images = ["images/one.png", "images/two.png"];
for(var i = 0; i<images.length; i++) {
setTimeout(loadImage(images[i]), (i+displayOnLoad)*(delay*1000));
}
}
</script>
Set displayOnLoad = false; if you want to wait the specified delay before loading the first image. The delay is set in seconds. I recommend waiting over a single second between images, as they may take some time to download (depending on the user's internet speed).
As with the first snippet, I haven't tested the code, so please tell me if an error occurs, and I will take a look.
Since you used the jquery tag on your question, I assume you are OK with using jQuery. In which case, you can do something like this:
In your static HTML, include the img tag and set its id to something (in my example, it's set to myImg) and set its src attribute to the first image, e.g.:
<img id="myImg" src="images/one.png">
Next, use jQuery to delay execution of your script until the page has finished loading, then use setTimeout to create a further delay so that the user can actually spend a few seconds looking at the image before it changes:
<script>
var imgTimeoutMsecs = 5000; // Five seconds between image cycles
$(function() {
// Document is ready
setTimeout(function() {
// We will get here after the first timer expires.
// Change the image src property of the existing img element.
$("#myImg").prop("src", "images/two.png");
setTimeout(function() {
// We will get here after the second, nested, timer expires.
// Again, change the image src property of the existing img element.
$("#myImg").prop("src", "images/three.png");
}, imgTimeoutMsecs);
}, imgTimeoutMsecs);
});
</script>
Of course, that approach doesn't scale very well, so if you are using more than three images total, you want to modify the approach to something like this:
var imgTimeoutMsecs = 5000; // Five seconds between image cycles
// Array of img src attributes.
var images = [
"images/one.png",
"images/two.png",
"images/three.png",
"images/four.png",
"images/five.png",
];
// Index into images array.
var iCurrentImage = 0;
function cycleImage() {
// Increment to the next image, or wrap around.
if (iCurrentImage >= images.length) {
iCurrentImage = 0;
}
else {
iCurrentImage += 1;
}
$("#myImg").prop("src", images[iCurrentImage]);
// Reset the timer.
setTimeout(cycleImages, imgTimeoutMsecs);
}
$(function() {
// Document is ready.
// Cycle images for as long as the page is loaded.
setTimeout(cycleImages, imgTimeoutMsecs);
});
There are many improvements that can be made to that example. For instance, you could slightly simplify this code by using setInterval instead of setTimer.
The code you've provided simply iterates through the for loop, writing the images to the browser as it does so. I suggest you take a look at JavaScript setTimeout function.
JS Timing