Interactive slider in JS and HTML - javascript

Hi I have created a slider in Javascript but I want to now change it to an interactive slider where you click on it to change slides and not just automatic. I have changed the javascript and now when I click on a slide it comes up with page not found. What have I forgotten to do. This is what I have so far.
<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 = "Photos/slide1.jpg" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "Photos/slide2.jpg"
slideimages[2] = new Image()
slideimages[2].src = "photos/slide3.jpg"
</script>
</head>
<body>
<header>
<div id="logo">
<img id="logo" src="Photos/logo.jpg" alt="My logo">
</div>
<div id="navigation_container">
<!-- the body -->
<div class="rectangle">
<!-- the navigation links -->
<ul id="navigation">
<li>✭ HOME</li>
<li>✭ link 2</li>
<li>✭ link 3</li>
<li>✭ link 4</li>
</ul>
<!-- end the body -->
</div>
<!-- end container -->
</div>
</header>
<div id="content-scroll">
<h1> Scrapbooking ideas</h1>
<img src="Photos/slide1.jpg" id="slide" width=550 height=300 />
<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 = "link1.htm"
else if (whichimage == 1)
window.location = "link2.htm"
else if (whichimage == 2)
window.location = "link3.htm"
}
slideit()
</script>
Thanks for any help
Linda

I wouldn't even use any sort of <a> tag here. I'd apply the onclick attribute suggested by sanfor directly to the <img> tag, so your code would be:
<img src="Photos/slide1.jpg" id="slide" width="550" height="300" />
Note that I used double quotes when I put in values for the width and height attributes. This is just a good practice to do. Both ways of going about it will work.

if i get it right, you want something like this.
for automatically start if user doesn't click on any of the links you can start automatically after 10 seconds using this piece of code
setTimeout(function(){slideit(0);},10000);
or user can click any of the links to start sliding with specific image associated with it before 10 seconds have passed(you can give it any specific time)
setTimeout(function(){slideit(0);},10000);
var links=document.getElementsByTagName('li');
for(i=1;i<links.length;i++){
(function(val){
links[val].addEventListener('click',function(){
slideit(val);
});
})(i);
}
//variable that will increment through the images
var step = 0;
var whichimage = 0;
function slideit(num){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[num].src;
if (num<2)
num++;
else
num=0;
//call function "slideit()" every 2.5 seconds
setTimeout("slideit("+num+")",2500)
}

Related

How to click through images stored in var in javascript

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>

Javascript images slide

I am creating a website for my school project. I want to put some pictures in a slide show, but for some reason my code isnt working. Here is my code
<div class="row">
<div class="col-md-12">
<h3 class = "Contains">
<script type = "text/javascript">
var image1= new image()
image1.src=images/truck1.png
var image2= new image()
image2.src=images/truck4.png
var image3= new image()
image3.src=images/truck7.png
</script>
<img src="images/truck1.PNG" name = "slide" width ="400" height ="400">
<script>
var step =1;
function slideit(){
document.images.slide.src=eval("image"+step+".src");
if (step<3)
step++;
else
step=1;
setTimeout("slideit()", 2500);
}
slideit()
</script>
</h3>
</div>
A very basic and simple example of how you can step through an array
//Array of images
var Images = ['https://dummyimage.com/100x100/000/fff.jpg',
'https://dummyimage.com/200x200/000/fff.jpg',
'https://dummyimage.com/300x300/000/fff.jpg'
];
//Step counter
var step = 1;
function gallery() {
//change image
document.getElementById('Imgs').src = Images[step];
//Or you can use - document.images.slide.src=Images[step];
// is step more than the image array?
if (step < Images.length - 1) {
// No - add 1 for next image.
step++;
} else {
// Yes - Start from the first image
step = 0;
}
}
//When the ready, set interval.
window.onload = setInterval(gallery, 2500);
<img id="Imgs" name="slide" src="https://dummyimage.com/100x100/000/fff.jpg" />
The method you're trying will return the following errors in the browser console.
Uncaught ReferenceError: image is not defined(anonymous function)
Uncaught TypeError: Cannot read property 'src' of undefined
The browser console is your best friend when it comes to using javascript.
If you have any questions, please leave a comment below and I will get back to you as soon as possible.
If you want to stick with the same method here it is:
var step = 1;
var image1 = new Image();
image1.src = "https://dummyimage.com/100x100/000/fff.jpg";
var image2 = new Image();
image2.src = "https://dummyimage.com/200x200/000/fff.jpg";
var image3 = new Image();
image3.src = "https://dummyimage.com/300x300/000/fff.jpg";
function slideit() {
document.images.slide.src = window['image' + step].src;
if (step < 3)
step++;
else
step = 1;
setTimeout(slideit, 2500);
}
slideit();
<div class="row">
<div class="col-md-12">
<h3 class="Contains">
<img src="https://dummyimage.com/100x100/000/fff.jpg" name="slide" />
</h3>
</div>
I hope this helps. Happy coding!
Your problem is most probably in your "imagex.src=xxxxxxx". The images urls are string and must be quoted as such. So it should be :
image1.src="images/truck1.png"
Also, you try to call setTimeout with a string instead of a function reference/name. It should be :
setTimeout(slideit, 2500);
However, a setInterval would be best here instead of a setTimeout as it will call a function repetingly.
JS aside, there are some quirk in the HTML part. Mostly, you shouldn't use a H3 to wrap a div. H3 are ususaly used for page sub-titles, not for a 400x400 images ^^
As mentioned in your question comments, using eval is generaly a bad idea.
To Simplify, you could do something like this :
<div class="row">
<div class="col-md-12">
<div class="Contains">
<img src="images/truck1.PNG" name="slide" width="400" height="400">
<script>
var pictures = ["images/truck1.png",
"images/truck4.png",
"images/truck7.png"];
var step = 0;
function slideIt(){
if (step<3)
step++;
else
step=0;
document.images.slide.src=pictures[step];
}
setTimeout(slideit, 2500);
</script>
</div>
</div>
</div>

How to add the img-responsive class in javascript

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)
}

Add a FadeOut/FadeIn to a slideshow

I have been creating a site for a school project. I have everything pretty much done except for the slideshow. I have the javascript in and ready and the photos are sliding fine, but I wanted to know if there was a way to make the photos fade in and out and where I should put the "fade" function in the code? I am sure its pretty easy, but can't figure it out
I looked at the other example and I think it ahs something to do with the opacity feature, but not sure where to put it in this project?
Here is the code:
<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/jambalaya.png" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "images/sucio_rice.png"
</script>
</head>
<script type="text/javascript">
var step=0
function slideit(){
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<1)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
</script>
</head>
<body onLoad="MM_preloadImages('images/home_btn2.png')">
<div id="header">
<h1>
<img src="images/crab_logo_edit.png" width="652" height="140" alt="Singing Crab" />
</h1>
</div>
<div id="content" class="wrap_home">
<h2>Arriba!</h2>
<div id="slideshow">
<img src="images/jambalaya.png" id="slide" width="400" height="330" alt="Marsa Alam" />
</div>
<p>There's always a fiesta at The Singing Crab—The best Cajun food Louisiana has to offer! Heavy on the spices, The Singing Crab has the absolute best that Cajun has to offer.</p>
<h2>You'll love it. We just guarantee.</h2>
<script type="text/javascript">
//variable that will increment through the images
var step=0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<1)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
</script>
</div>
Um.. Didn't get why do you have 2 slideIt() functions declared, but any way, just rewrite this function to
function slideit(){
if (!document.images) return;
$('#slide').fadeOut(150,function(){
$('#slide').attr('src', slideimages[step].src);
$('#slide').fadeIn(150);
});
step = step < 0 ? step++ : 0;
}
var intervalId = setInterval(slideIt, 2500);
This is the jQuery solution, much shorter, much more beautiful than pure js. But you can make it with js only and no libs, just add this func to your code
function fade( elem, time ){
var startOpacity = elem.style.opacity || 1;
elem.style.opacity = startOpacity;
(function go() {
elem.style.opacity -= startOpacity / ( time / 100 );
elem.style.filter = 'alpha(opacity=' + elem.style.opacity * 100 + ')';
if( elem.style.opacity > 0 )
setTimeout( go, 100 );
else
elem.style.display = 'none';
})();
}
And manipulate with it instead of jQuery fadeIn/fadeOut functions.
You can pick each, but i advise you jQuery.

putting javascript slide show in orchard cms

I want to put a simple slider on orchard. I have write the code and It is working on my computer. but when I add it to orchard CMS it doesn't work. can any one help me please. the asp version is 4.5 and iis 7.5 windows server 2008. here is the code:
<html>
<head>
<script type="text/javascript">
var slideimages = new Array() // create new array to preload images
var slidenum=2
slideimages[0] = new Image() // create new instance of image object
slideimages[0].src = "emkanat1.JPG" // set image object src property to an image's src, preloading that image in the process
slideimages[1] = new Image()
slideimages[1].src = "emkanat2.JPG"
slideimages[2] = new Image()
slideimages[2].src = "emkanat3.JPG"
</script>
</head>
<body>
<div style="display: block; width:940px; height:356px;">
<img src="emkanat1.JPG" id="slide" width="940px" height="356px" />
<div >
<img style="position:absolute; margin-top: 150px; margin-left: 10px;" src=left.jpg onclick="prev()"/>
<img style="position:absolute; margin-top: 150px; margin-left: 890px;" src=right.jpg onclick="next()"/>
</div>
</div>
<script type="text/javascript">
//variable that will increment through the images
var step=0
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
if (step<slidenum)
step++
else
step=0
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
function next(){
if (!document.images)
return
if (step<slidenum)
step++
else
step=0
document.getElementById('slide').src = slideimages[step].src
}
function prev(){
if (!document.images)
return
if (step>0)
step--
else
step=slidenum
document.getElementById('slide').src = slideimages[step].src
}
slideit()
</script>
</body>
</html>
You are passing "slideit()" as your first parameter to setTimeout, there are two ways this can go, you can have an implied eval where slideit() gets executed and then the result is passed to setTimeout, or you can have the string itself passed to setTimeout, neither are what you want. You should just pass the function as the first parameter of setTimeout.
change
setTimeout("slideit()",2500)
to
setTimeout(slideit,2500)
and you should be fine.

Categories