javascript newbee here :|
I created a slidershow, but i need to add 4 more slidershows on my website, if i add more slidershows only the first slidershow works, the other stand still :/
can someone explain me, what i need to change, to get multiple slidershows on my website?
here's my java script:
<script type="text/javascript">
var image1=new Image()
image1.src="bilder/tfb_g/slide1.jpg"
var image2=new Image()
image2.src="bilder/tfb_g/slide2.jpg"
var image3=new Image()
image3.src="bilder/tfb_g/slide3.jpg"
</script>
<script type="text/javascript">
var step=1
function slideit (){
document.images.slide.src=eval('image'+step+'.src')
if(step<3)
step++
else
step=1
setTimeout('slideit ()',3000)
}
slideit()
</script>
and here is the picture in my body:
<img class="small" src="./bilder/tfb_g/slide.jpg" name="slide">
i'm a bit helpless xP
Try a class:
var image1 = new Image();
image1.src = "bilder/tfb_g/slide1.jpg";
var image2 = new Image();
image2.src = "bilder/tfb_g/slide2.jpg";
var image3 = new Image();
image3.src = "bilder/tfb_g/slide3.jpg";
SlideShow = function (ele) {
this.step = 1;
this.element = ele;
this.Move = function () {
this.element.src = eval('image' + this.step + '.src');
if (this.step < 3) this.step++;
else this.step = 1;
setTimeout(this.Move(), 3000);
};
};
and for the HTML
<img class="small" src="./bilder/tfb_g/slide.jpg" onload="slideshow1 = new SlideShow(this); slideshow1.Move();">
but make sure for each element, you rename the inline javascript variables.
EX:
slideshow2 = new SlideShow(this); slideshow2.Move();
slideshow3 = new SlideShow(this); slideshow3.Move();
slideshow65 = new SlideShow(this); slideshow65.Move();
http://jsfiddle.net/Lwxbrpgj/
Related
var spanishAdventure = new Array();
spanishAdventure[0] = new Image();
spanishAdventure[0].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26756508_1743696655674610_7179458580676129491_o.jpg?_nc_cat=0&oh=f16a2edf4ee735e66b6dab095b7fb43c&oe=5B6B32B3';
spanishAdventure[1] = new Image();
spanishAdventure[1].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26758659_1743696569007952_4447096103197624856_o.jpg?_nc_cat=0&oh=a7f015a6709fa9a26f06b07fe9782999&oe=5B6A180E';
spanishAdventure[2] = new Image();
spanishAdventure[2].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678421_1743695449008064_7298258449829506874_o.jpg?_nc_cat=0&oh=d8fb71ad599a0a630f4d118c1d8be6ca&oe=5B6E0AFD';
spanishAdventure[3] = new Image();
spanishAdventure[3].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678110_1743696009008008_4042393389305650172_o.jpg?_nc_cat=0&oh=7d6afafd399c4a2d5d8f0747d59d8353&oe=5B73557C';
spanishAdventure[4] = new Image();
spanishAdventure[4].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26756324_1743697449007864_8430059194945119796_o.jpg?_nc_cat=0&oh=5c93856d22087dbf550fc98dfd7a79ce&oe=5B5FBF15';
spanishAdventure[5] = new Image();
spanishAdventure[5].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678350_1743697612341181_2805503461338827658_o.jpg?_nc_cat=0&oh=1e6d3b0c44b783742de688cedacccc20&oe=5B6E31BF';
spanishAdventure[6] = new Image();
spanishAdventure[6].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26841396_1743696739007935_7256143030060966136_o.jpg?_nc_cat=0&oh=d0b9cbe4f3920af54083ea12d2d19b40&oe=5B63A5E7';
var imageCount = 0;
var totalImage = spanishAdventure.length -1; //array length starting from 0
var img = document.getElementById('mySlides'); //HTML img element which image will be displayed
function imagePrev() {
imgCount-- ;
img.src =spanishAdventure[imageCount].src;
if (imageCount < 0) {
img.src = spanishAdventure[totalImage].src;
break;
}
}
function imageNext() {
imgCount++ ;
img.src =spanishAdventure[imageCount].src;
if (imageCount > totalImage) {
img.src = spanishAdventure[0].src;
break;
}
}
Hi Guys,
I'm currently trying to create an image gallery using Javascript image array and functions that will be called upon to create a gallery in an image element in my original HTML file (not shown). Do you see anything wrong with the js syntax and code for the next and previous functions as they seem to not work when called upon in the html file. I'm a newbie so some enlightening pointers would be fab.
mySlides is the id for an HTML img element.
Cheers,
Liam
As #Titus said, change imageCount to imgCount, or vice-versa
Remove break; from imagePrev and imageNext. It's not doing anything useful.
Build logic to keep imageCount (or imgCount) within the range of your image array.
You don't need to instantiate images to store your source urls. The urls are just text, so they could be put directly into an array, like spanishAdventure = ['urlText1', 'urlText2', ...]
var spanishAdventure = new Array();
spanishAdventure[0] = new Image();
spanishAdventure[0].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26756508_1743696655674610_7179458580676129491_o.jpg?_nc_cat=0&oh=f16a2edf4ee735e66b6dab095b7fb43c&oe=5B6B32B3';
spanishAdventure[1] = new Image();
spanishAdventure[1].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26758659_1743696569007952_4447096103197624856_o.jpg?_nc_cat=0&oh=a7f015a6709fa9a26f06b07fe9782999&oe=5B6A180E';
spanishAdventure[2] = new Image();
spanishAdventure[2].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678421_1743695449008064_7298258449829506874_o.jpg?_nc_cat=0&oh=d8fb71ad599a0a630f4d118c1d8be6ca&oe=5B6E0AFD';
spanishAdventure[3] = new Image();
spanishAdventure[3].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678110_1743696009008008_4042393389305650172_o.jpg?_nc_cat=0&oh=7d6afafd399c4a2d5d8f0747d59d8353&oe=5B73557C';
spanishAdventure[4] = new Image();
spanishAdventure[4].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26756324_1743697449007864_8430059194945119796_o.jpg?_nc_cat=0&oh=5c93856d22087dbf550fc98dfd7a79ce&oe=5B5FBF15';
spanishAdventure[5] = new Image();
spanishAdventure[5].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26678350_1743697612341181_2805503461338827658_o.jpg?_nc_cat=0&oh=1e6d3b0c44b783742de688cedacccc20&oe=5B6E31BF';
spanishAdventure[6] = new Image();
spanishAdventure[6].src = 'https://scontent.flhr4-1.fna.fbcdn.net/v/t31.0-8/26841396_1743696739007935_7256143030060966136_o.jpg?_nc_cat=0&oh=d0b9cbe4f3920af54083ea12d2d19b40&oe=5B63A5E7';
var imageCount = 0;
var totalImage = spanishAdventure.length -1; //array length starting from 0
var img = document.getElementById('mySlides'); //HTML img element which image will be displayed
function imagePrev() {
imageCount > 0 ? imageCount-- : imageCount = 6;
img.src =spanishAdventure[imageCount].src;
}
function imageNext() {
imageCount < 6 ? imageCount++ : imageCount = 0;
img.src =spanishAdventure[imageCount].src;
}
<img id="mySlides" />
<button onClick="imagePrev()">Prev</button>
<button onClick="imageNext()">Next</button>
I intend to include a button in my traffic light code so that the user can click on it to activate the traffic light however, i am unsure of where to place it in my code.
This is my code:
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "traffic light_1.png"
var image2 = new Image()
image2.src = "traffic light_2.png"
var image3 = new Image()
image3.src = "traffic light_3.png"
var image4 = new Image()
image4.src = "traffic light_2.png"
</script>
</head>
<body>
<p><img src="traffic light_1.png" width="500" height="300" name="slide" /></p>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<4)
step++;
else
step=1;
setTimeout("slideit()",3000);
}
slideit();
</script>
</body>
Place the button wherever you like inside the body tag.
<input type="button" name="start" value="Start/stop Traffic light" onclick="startStop()">
Remove the setTimeout and the slideit() initial call.
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<4)
step++;
else
step=1;
}
And add the startStop function below and the working variable declaration.
var working;
function startStop() {
if (typeof working != 'undefined') working = clearInterval(working);
else working=setInterval("slideit()", 3000);
}
I have made a slideshow and I would like to know how to add a third image. Here is my code: (by the way image 3 stated below is the image I would like to insert in too the slideshow.
<script type="text/javascript">
var image1 = new Image()
image1.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/9889814_orig.jpg"
var image2 = new Image()
image2.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/1421690233.png"
var image3 = new Image()
image3.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"
</script>
</head>
<body>
<img src="" name="slide" id="slide"/>
<script type="text/javascript">
var step=1;
function slideit()
{
document.images.slide.src = eval("image"+step+".src");
if(step<2)
step++;
else
step=1;
setTimeout("slideit()",2500);
}
slideit();
</script>
You need to add a new var and add a +1 to your counter
<script type="text/javascript">
var image1 = new Image()
image1.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/9889814_orig.jpg"
var image2 = new Image()
image2.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/1421690233.png"
var image3 = new Image()
image3.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"
var image4 = new Image()
image4.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"
</script>
</head>
<body>
<img src="" name="slide" id="slide"/>
<script type="text/javascript">
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>
Also i do recommend using an array, will make your code much cleaner and understandable
To the script scope add this same all others:
var image4 = new Image()
image4.src = "http://jgsprograms.weebly.com/uploads/2/1/5/7/21578716/3920613_orig.jpg"
The code: document.images.slide.src = eval("image"+step+".src");
will take it automaticly, because it's taking all your Image() objects in this HTML
This code is a automatic slideshow and i want to make it so when you click next it goes to the next image and back to go to the previous image
My current code:
<head>
<script type="text/javascript">
var image1 = new Image()
image1.src = "http://www.adactushousing.co.uk/images/upload/coverImage/Local%20Offer%20CCH.jpg"
var image2 = new Image()
image2.src = "http://www.northantspfg.co.uk/resources/uploads/news/wordal13-021142.JPG"
var image3 = new Image()
image3.src = "http://hmstack.files.wordpress.com/2011/07/swimming-for-the-disabled.jpg"
var image4 = new Image()
image4.src = "http://www.northantspfg.co.uk/resources/uploads/news/HiResLocalOffer13-041205.jpg"
</script>
</head>
<img src=\"images/pentagg.jpg\" width=\"500\" height=\"300\" name=\"slide\" /></p>
<script type=\"text/javascript\">
var step=1;
function slideit()
{
document.images.slide.src = eval(\"image\"+step+\".src\");
if(step<4)
step++;
else
step=1;
setTimeout(\"slideit()\",2500);
}
slideit();
</script>
You call the function slideit() on page load, this is the reason that this work automaticly, do that, it's should work:
<button onclick="slideit()">Next image</button>
<script type=\"text/javascript\">
var step=1;
function slideit()
{
document.images.slide.src = eval(\"image\"+step+\".src\");
if(step<4)
step++;
else
step=1;
}
</script>
I have this Javascript sliding image script. It works great, but I would like to add text in the form of a paragraph tag to the sliding effect, one paragraph accompanying each image in the slide. How to do that?
My code:
<script language="JavaScript">
var image = new Array("images/ref1.png", "images/ref2.png",
"images/bb.png", "images/windows.png")
var imgNumber=1
var numberOfImg = image.length
function previousImage(){
if(imgNumber > 1){
imgNumber--
}
else{
imgNumber = numberOfImg
}
document.slideImage.src = image[imgNumber-1]
}
function nextImage(){
if(imgNumber < numberOfImg){
imgNumber++
}
else{
imgNumber = 1
}
document.slideImage.src = image[imgNumber-1]
}
if(document.images){
var image1 = new Image()
image1.src = "images/ref1.png"
var image2 = new Image()
image2.src = "images/ref2.png"
var image3 = new Image()
image3.src = "images/bb.png"
var image4 = new Image()
image4.src = "images/windows.png"
}
</script>
<table>
<tr>
<td><img src="images/ref1.png" name="slideImage"></td>
</tr>
<tr>
<td><a href="JavaScript:previousImage()">
<img src="" border="none"/>prev</a>
</td>
<td><a href="JavaScript:nextImage()">
<img src="" border="none" />next</a>
</td>
</tr>
</table>
Thank You
Basically you just need to add an element to hold your text, an array that contains the text to rotate, and add a little JavaScript to make the changes.
Here's a jsFiddle example.
I added a new paragraph element with the ID of 'text' to your HTML, and in your JavaScript I created an array to hold the text. The text gets changed just like the images do using this line: document.getElementById('text').innerHTML = text[imgNumber - 1];.
JavaScript:
var image = new Array("http://www.dummyimage.com/60x60/&text=1", "http://www.dummyimage.com/60x60/&text=2", "http://www.dummyimage.com/60x60/&text=3", "http://www.dummyimage.com/60x60/&text=4");
var text = new Array('one', 'two', 'three', 'four');
var imgNumber = 1;
var numberOfImg = image.length;
function previousImage() {
if (imgNumber > 1) {
imgNumber--;
}
else {
imgNumber = numberOfImg;
}
document.slideImage.src = image[imgNumber - 1];
document.getElementById('text').innerHTML = text[imgNumber - 1];
}
function nextImage() {
if (imgNumber < numberOfImg) {
imgNumber++;
}
else {
imgNumber = 1;
}
document.slideImage.src = image[imgNumber - 1];
document.getElementById('text').innerHTML = text[imgNumber - 1];
}
if (document.images) {
var image1 = new Image();
image1.src = "http://www.dummyimage.com/60x60/&text=1";
var image2 = new Image();
image2.src = "http://www.dummyimage.com/60x60/&text=2";
var image3 = new Image();
image3.src = "http://www.dummyimage.com/60x60/&text=3";
var image4 = new Image();
image4.src = "http://www.dummyimage.com/60x60/&text=4";
}