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";
}
Related
I have this code snippet below...
You can see I am trying to load 9 pictures.
When I execute the following code, I only get an alert 7 times and the console does never log "all images loaded". Why is this?
var images = [];
edge_topleft = new Image(); images.push(edge_topleft);
edge_topright = new Image(); images.push(edge_topright);
edge_bottomleft = new Image(); images.push(edge_bottomleft);
edge_bottomright = new Image(); images.push(edge_bottomright);
edge_cross = new Image(); images.push(edge_cross);
block = new Image(); images.push(block);
ice = new Image(); images.push(ice);
way_lr = new Image(); images.push(way_lr);
way_ud = new Image(); images.push(way_ud);
var len = images.length;
var counter = 0;
[].forEach.call(images, function( img ) {
img.addEventListener( 'load', incrementCounter, false);
} );
function incrementCounter() {
counter++;
alert(counter);
if ( counter === len ) {
console.log("all images loaded");
}
}
edge_topleft.src = "https://dummyimage.com/10";
edge_topright = "https://dummyimage.com/20";
edge_bottomleft = "https://dummyimage.com/30";
edge_bottomright.src = "https://dummyimage.com/40";
edge_cross.src = "https://dummyimage.com/50";
block.src = "https://dummyimage.com/60";
ice.src = "https://dummyimage.com/70";
way_lr.src = "https://dummyimage.com/80";
way_ud.src = "https://dummyimage.com/90";
Here is the fiddle: https://jsfiddle.net/hnoaj8bg/
Anybody that knows what I'm doing wrong?
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>
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/
So now that i have figured out how to swap two images I have discovered that I have to do it again but now with 4 images, rotating each of them left whenever the button is clicked. I tried using the same code that was used for the two images but it instead turns every picture to earthrise.jpg. Here is my code
function rotateLeft() {
var image1 = document.getElementById("image1")
var image2 = document.getElementById("image2")
var image3 = document.getElementById("image3")
var image4 = document.getElementById("image4")
if (image1.src.indexOf('/jmurphy9/111/images/earthrise.jpg')>-1) {
image1.src = '/jmurphy9/111/images/earth.jpg';
}
if (image1.src.indexOf('/jmurphy9/111/images/earth.jpg')>-1) {
image1.src = '/jmurphy9/111/images/maine.jpg';
}
if (image1.src.indexOf('/jmurphy9/111/images/maine.jpg')>-1) {
image1.src = '/jmurphy9/111/images/baywindows.jpg';
}
if (image1.src.indexOf('/jmurphy9/111/images/baywindows.jpg')>-1) {
image1.src = '/jmurphy9/111/images/earthrise.jpg';
}
if (image2.src.indexOf('/jmurphy9/111/images/earthrise.jpg')>-1) {
image2.src = '/jmurphy9/111/images/earth.jpg';
}
if (image2.src.indexOf('/jmurphy9/111/images/earth.jpg')>-1) {
image2.src = '/jmurphy9/111/images/maine.jpg';
}
if (image2.src.indexOf('/jmurphy9/111/images/maine.jpg')>-1) {
image2.src = '/jmurphy9/111/images/baywindows.jpg';
}
if (image2.src.indexOf('/jmurphy9/111/images/baywindows.jpg')>-1) {
image2.src = '/jmurphy9/111/images/earthrise.jpg';
}
if (image3.src.indexOf('/jmurphy9/111/images/earthrise.jpg')>-1) {
image3.src = '/jmurphy9/111/images/earth.jpg';
}
if (image3.src.indexOf('/jmurphy9/111/images/earth.jpg')>-1) {
image3.src = '/jmurphy9/111/images/maine.jpg';
}
if (image3.src.indexOf('/jmurphy9/111/images/maine.jpg')>-1) {
image3.src = '/jmurphy9/111/images/baywindows.jpg';
}
if (image3.src.indexOf('/jmurphy9/111/images/baywindows.jpg')>-1) {
image3.src = '/jmurphy9/111/images/earthrise.jpg';
}
if (image4.src.indexOf('/jmurphy9/111/images/earthrise.jpg')>-1) {
image4.src = '/jmurphy9/111/images/earth.jpg';
}
if (image4.src.indexOf('/jmurphy9/111/images/earth.jpg')>-1) {
image4.src = '/jmurphy9/111/images/maine.jpg';
}
if (image4.src.indexOf('/jmurphy9/111/images/maine.jpg')>-1) {
image4.src = '/jmurphy9/111/images/baywindows.jpg';
}
if (image4.src.indexOf('/jmurphy9/111/images/baywindows.jpg')>-1) {
image4.src = '/jmurphy9/111/images/earthrise.jpg';
}
}
function init(){
var button1 = document.getElementById("btn1")
button1.onclick = rotateLeft;
}
window.onload = init;
Like i said, when the button is clicked it changes every picture to earthrise.jpg and I'm not sure why.
If your 4 images can be contained in a span or a div, rotate left by appending the first image to the parent container. It will move to the last position, and the other images will slide over or up, if they are not absolutely positioned in their parent. Doesn't matter what the id or the source is-
btn.onclick= rotateLeft;
if they are the only content in their container:
function rotateLeft(pa){
var pa= pa || document.getElementById('shiftingImageContainer');
pa.appendChild(pa.firstChild);
}
or if they are separated by other content on the page:
function rotateLeft(pa){
var pa= pa || document.getElementById('shiftingImageContainer');
pa.appendChild(pa.getElementsByTagName('img')[0]);
}
I have this id in my html code:
<div id="me">
<img src="Me.JPG" alt="Me" width="450" height="450" alt="picture" align="right"/>
</div>
how can i change the picture every 3 seconds once the mouse is over the picture,
and to go back to the original picture once the mouse is out?
You can create a function that will change the image every 3 seconds. Then, when you mouse over the image, call the function and start a timer. When the mouse leaves the image, clear the timer.
var img = document.getElementById( "me" ).getElementsByTagName( "img" )[0];
var images = ["Me.JPG", "new image path", "..."];
var i = 1;
var timer;
function change() {
img.src = images[i];
if ( ++i >= images.length ) {
i = 0;
}
timer = setTimeout( change, 3000 );
}
img.onmouseover = function() {
timer = setTimeout( change, 3000 );
};
img.onmouseout = function() {
img.src = images[0];
clearTimeout( timer );
};
Here's a link to a quick solution on JsFiddle: http://jsfiddle.net/jJBEu/2/
var img = document.getElementById('me').getElementsByTagName('img')[0],
index = 0,
sources = [
'http://icons.iconarchive.com/icons/iconka/social-treat/128/yumtube-icon.png',
'http://icons.iconarchive.com/icons/iconka/social-treat/128/sweeter-icon.png',
'http://icons.iconarchive.com/icons/iconka/social-treat/128/facebow-icon.png'
],
timer;
img.addEventListener('mouseover', swapImages, false);
img.addEventListener('mouseout', function(){
clearTimeout(timer);
img.src = sources[0];
}, false);
function swapImages(event, setindex){
index = index == (sources.length - 1) ? 0 : index + 1;
timer = setTimeout(function(){
img.src = sources[index];
swapImages();
}, 3000);
}
Edited to fix a dumb mistake where I was checking array index against length without subtracting 1.
html:
<img src="Me.JPG" alt="Me" width="450" height="450" alt="picture" align="right"
onmouseover="animate(this)" onmouseout="stopanimation()" />
javascript:
/* globals */
var animTimer = null;
var animImg = null;
var images = [new Image(), new Image(), new Image(), new Image(), new Image(),new Image()];
var imgIndex = 0;
/* pre-load images in browser cash */
images[0].src = "Me.JPG";
images[1].src = "anim1.gif";
images[2].src = "anim2.gif";
images[3].src = "anim3.gif";
images[4].src = "anim4.gif";
images[5].src = "anim5.gif";
/* animation */
function animate(img){
if (typeof img != 'undefined'){animImg = img;}
imgIndex += 1;
if (imgIndex>images.length-1){imgIndex=1;}
animImg.src=images[imgIndex].src;
animTimer = setTimeout(animate, 3000);
}
function stopanimation(){
clearInterval(animTimer);
animImg.src = images[0].src;
}
Something like, just give the img an id of myImg (or whatever you want):
var img_arr = ["img1.png", "img2.png", "img3.png"],
img_index = 0,
interval_id = 0,
div = document.getElementById("me"),
img = document.getElementById("myImg");
div.onmouseover = function () {
interval_id = window.setInterval(function () {
if (img_index === (img_arr.length - 1)) {
img_index = 0;
}
img.src = img_arr[img_index++];
}, 3000);
};
div.onmouseout = function () {
window.clearInterval(interval_id);
};