I'm very new to javascript and I was wondering if it would be possible to have javascript automtically change the image after few seconds, this is my college project and it can be very messy. Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>titleHere</title>
<link rel="stylesheet" href="../styles/main.css">
<link rel="stylesheet" href="../styles/menu.css">
<script>
function changeImage(imageName){
var pickImage = document.getElementById("mainImg");
pickImage.src = imageName;
}
</script>
</head>
<body>
<div class="page_container">
<div class="menu">
<div class="logo"></div>
<nav id="cssmenu">
<ul>
<li><span>HOME</span></li>
<li class="active"><span>GALLERY</span></li>
<li><span>CONTACT</span></li>
</ul>
</nav>
</div>
<div class="resortTitle"><center>The Reves Recours</center></div>
<div class="thumbnails" align="center">
<img src="../images/resort1.jpg" onmouseover="changeImage('../images/resort1.jpg')" alt="Missing Image"/>
<img src="../images/resort2.jpg" onmouseover="changeImage('../images/resort2.jpg')" alt="Missing Image"/>
<img src="../images/resort3.jpg" onmouseover="changeImage('../images/resort3.jpg')" alt="Missing Image"/>
<img src="../images/resort4.jpg" onmouseover="changeImage('../images/resort4.jpg')" alt="Missing Image"/>
</div>
<div class="preview" align="center">
<img src="../images/resortLogoLarge.png" id="mainImg">
</div>
<div class="thumbnails" align="center">
<img src="../images/resort5.jpg" onmouseover="changeImage('../images/resort5.jpg')" alt="Missing Image"/>
<img src="../images/resort6.jpg" onmouseover="changeImage('../images/resort6.jpg')" alt="Missing Image"/>
<img src="../images/resort7.jpg" onmouseover="changeImage('../images/resort7.jpg')" alt="Missing Image"/>
<img src="../images/resort8.jpg" onmouseover="changeImage('../images/resort8.jpg')" alt="Missing Image"/>
</div>
<div class="greybar"></div>
<div class="footer">
<div class="watmark"> Created by: ---</div>
</div>
</div>
</body>
Just add
window.onload=function(){
setInterval(function(){changeName("yourImageName")},2000) //2 seconds
}
to the beginning of the <script>. It will change your image after 2 seconds pass.
var images = ['src1','src2','src3'],i=0;
setTimeout(function(){
changeImage(images[i]);
i++;
if(i>images.length)
i=0;
},3000);
You can get the array of list of images you have and then loop thorugh for the delay as you would required using various solutions available for delay like using setInterval on Window load etc.
Related
I have a container in which it is a horizontal scroll slider. I am just trying to figure how to show the element that is in the viewport at the time
I tried to look for left. I tried to put the slides in an array and look for the x axis but I am a little stumped.
This is my scroll function.
const scroll = () => {
const scrollContainer = document.querySelector('.slider');
scrollContainer.addEventListener('wheel', (e) => {
e.preventDefault();
scrollContainer.scrollLeft += e.deltaY;
});
};
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>demo</title>
</head>
<body>
<div class="slider hidden" id="slideshowContainer">
<div class="innerSlider" id="innerSlider">
<div class="slide">
<img src="https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=958&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1583847268964-b28dc8f51f92?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1586105251261-72a756497a11?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=958&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1618220048045-10a6dbdf83e0?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=880&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" draggable="false" />
</div>
<div class="slide">
<img src="https://images.unsplash.com/photo-1513694203232-719a280e022f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" draggable="false" />
</div>
</div>
</div>
</body>
</html>
I've been searching the internet for someone who is having the same problem but I wasn't able to find a solution. I just can't figure out how to change the source of an image using javascript. I initially thought that it might be because I was writing the javascript in another file instead of within the actual html file but I tried putting the script within the html file and that didn't work either. If someone could tell me if there's something I'm doing wrong that would be great.
<!DOCTYPE html>
<html>
<head>
<title>
Rock Paper Scissors Game
</title>
<link rel="stylesheet" href="styles.css" />
<body>
<header>
<h1>Rock Paper Scissors</h1>
</header>
<div class="score-board">
<div id="user-label" class="badge">user</div>
<div id="computer-label" class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Make Your Move!</p>
</div>
<div class="choices">
<div class="choice" **onclick="changeImg()**" id="r">
<img src="images/rock.png" width="115" height="95" />
</div>
<div class="choice" id="p">
<img src="images/paper.png" width="120" height="120" />
</div>
<div class="choice" id="s">
<img src="images/scissors.png" width="130" height="110" />
</div>
</div>
<div class="fighters">
<div class="fighter" id="u">
<img src="images/rock.png" width="370" height="300" />
</div>
<div class="fighter" id="c">
<img src="images/rockflipped.png" width="370" height="300" />
</div>
</div>
<div class="squares">
<div class="square" id="userSquare"></div>
<div class="square" id="computerSquare"></div>
</div>
**
<script>
var userImg = document.getElementById('u');
var compImg = document.getElementById('c');
function changeImg() {
console.log('here');
userImg.src = 'file:///C:/...scissors.png';
}
</script>
**
<script src="app.js" charset="utf-8"></script>
</body>
</head>
</html>
Simple Description
You need to put the id attribute inside the img tag.
And it needs to be unique. What you are doing now is that you are getting the div which is not the actual image.
Example:
<img var userImg = document.getElementById("c500");
<script>
function changeImg()
{
console.log("here");
userImg.src = "https://i.chzbgr.com/full/8759954176/hFD7BD608/can-has-code-review.jpg";
}
changeImg();
</script>
JSFiddle: https://jsfiddle.net/m56tq1ba/
Full Source
<!DOCTYPE html>
<html>
<head>
<title>
Rock Paper Scissors Game
</title>
<link rel="stylesheet" href="styles.css" />
<body>
<header>
<h1>Rock Paper Scissors</h1>
</header>
<div class="score-board">
<div id="user-label" class="badge">user</div>
<div id="computer-label" class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Make Your Move!</p>
</div>
<div class="choices">
<div class="choice" onclick="changeImg()" id="r">
<img src="images/rock.png" width="115" height="95" />
</div>
<div class="choice" id="p">
<img src="images/paper.png" width="120" height="120" />
</div>
<div class="choice" id="s">
<img src="images/scissors.png" width="130" height="110" />
</div>
</div>
<div class="fighters">
<div class="fighter" id="u">
<img id="userImg_100" src="images/rock.png" width="370" height="300" />
</div>
<div class="fighter" id="c">
<img src="images/rockflipped.png" width="370" height="300" />
</div>
</div>
<div class="squares">
<div class="square" id="userSquare"></div>
<div class="square" id="computerSquare"></div>
</div>
<script>
var userImg = document.getElementById('userImg_100');
var compImg = document.getElementById('c');
function changeImg() {
console.log('here');
userImg.src = 'https://i.chzbgr.com/full/8759954176/hFD7BD608/can-has-code-review.jpg';
}
</script>
<script src="app.js" charset="utf-8"></script>
</body>
</head>
</html>
The problem is you are getting the div with the id="u" and assigning the src for that which wont work.
Get the image by assigning an id to it and ge that image tag by its id and assign the image. modified your code little bit as below
<!DOCTYPE html>
<html>
<head>
<title>
Rock Paper Scissors Game
</title>
<link rel="stylesheet" href="styles.css" />
<body>
<header>
<h1>Rock Paper Scissors</h1>
</header>
<div class="score-board">
<div id="user-label" class="badge">user</div>
<div id="computer-label" class="badge">comp</div>
<span id="user-score">0</span>:<span id="computer-score">0</span>
</div>
<div class="result">
<p>Make Your Move!</p>
</div>
<div class="choices">
<div class="choice" **onclick="changeImg()**" id="r">
<img src="images/rock.png" width="115" height="95" />
</div>
<div class="choice" id="p">
<img src="images/paper.png" width="120" height="120" />
</div>
<div class="choice" id="s">
<img src="images/scissors.png" width="130" height="110" />
</div>
</div>
<div class="fighters">
<div class="fighter" id="u">
<img id="u_image" src="images/rock.png" width="370" height="300" />
</div>
<div class="fighter" id="c">
<img id="c_image" src="images/rockflipped.png" width="370" height="300" />
</div>
</div>
<div class="squares">
<div class="square" id="userSquare"></div>
<div class="square" id="computerSquare"></div>
</div>
**
<script>
var userImg = document.getElementById('u_image');
var compImg = document.getElementById('c_image');
function changeImg() {
console.log('here');
userImg.src = 'file:///C:/...scissors.png';
}
</script>
**
<script src="app.js" charset="utf-8"></script>
</body>
</head>
</html>
When I click on the image itself, the lightbox loads but the image itself doesn't - instead, all I see is a white box. Basically, the lightbox shows up, but the image doesn't load. I'm not sure what I am doing wrong. I watched a youtube video on how to create a lightbox and followed the steps exactly. I don't know what I am doing wrong. I included the links to the proper javascript and css files.
Please help!!
This is my html below:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description:" content="Image Gallery">
<meta http-equiv="author" content="Fiona Blumin" />
<title>Image Gallery</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<link rel="stylesheet" href="style.css" type="text/css">
<script src="js/jquery.js"></script>
<link rel="stylesheet" href="lightbox.min.css" type="text/css">
<script type="text/javascript" src="lightbox-plus-jquery.min.js"></script>
</head>
<body>
<div class="Welcome">
<h1>My Travels through Europe</h1>
</div>
<div class="Pictures">
<div class="container-fluid">
<div class="row">
<div class="col">
<a href="images/pic1.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic1 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic2.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic2 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic3.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic3 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic4.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic4 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic5.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic5 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic6.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic6 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic7.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic7 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic8.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic8 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic9.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic9 copy.jpg" alt="">
</a>
</div>
</div>
<div class="row">
<div class="col">
<a href="images/pic10.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic10 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic11.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic11 copy.jpg" alt="">
</a>
</div>
<div class="col">
<a href="images/pic12.jpg" data-lightbox="mygallery">
<img class="small-img" src="images/pic12 copy.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</body>
</html>
This how it looks when I click on an image in my gallery:
maybe this is the problem
src="images/pic1 copy.jpg"
try to do it like this
src="images/pic1copy.jpg"
and make sure you are targeting the right picture with the right path. Let me know if it works
Here is my HTML page:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Demo slider</title>
<link href="themes/1/js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="themes/1/js-image-slider.js" type="text/javascript"></script>
</head>
<body>
<div id="sliderFrame">
<div id="slider">
<img src="images/image-slider-1.jpg" id="img1" alt="" />
<img src="images/image-slider-2.jpg" id="img2" alt="" />
<img src="images/image-slider-3.jpg" id="img3" alt="" />
<img src="images/image-slider-4.jpg" id="img4" alt="" />
<img src="images/image-slider-5.jpg" id="img5" alt="" />
</div>
</div>
<div id="custom_text">
<h1 style="color: blue;">Image 1 text</h1>
</div>
<div id="custom_text1">
<h1 style="color: blue;">Image 2 text</h1>
</div>
<div id="custom_text2">
<h1 style="color: blue;">Image 3 text</h1>
</div>
<div id="custom_text3">
<h1 style="color: blue;">Image 4 text</h1>
</div>
<div id="custom_text4">
<h1 style="color: blue;">Image 5 text</h1>
</div>
</body>
</html>
Using menucool's Javascript Image Slider library: link to site
I want to display different text on different images i tried it giving absolute and relative positions to div and img tag but unable to acheive the output.
The javascript slider function is the predefined function.Basically i want to achieve this
This is why you always read the documentation:
http://www.menucool.com/javascript-image-slider#view2
Captions are set through each slide image's alt attribute. If the
image is formatted as lazy loaded image, its caption can be defined by
the title or data-alt attribute:
HTML
<img src="//placehold.it/250x250" id="img1" alt="Caption one" />
<img src="//placehold.it/249x249" id="img2" alt="Caption two" />
<img src="//placehold.it/251x251" id="img3" alt="Caption three" />
<img src="//placehold.it/248x248" id="img4" alt="Caption four" />
<img src="//placehold.it/252x252" id="img5" alt="Caption five" />
JSFiddle Demo
i'm making a website with Fabricjs. One div is going to be the canvas and another is going to have lots of images (hundreds). I want to be able to click on the images so that they pop up in the canvas. My question is; how do i get the src of the images when clicked on so that an img node goes into the canvas node. Should i make an array of addEventl... for each of the images?
(writing in javascript)
thanks as always :)
<!doctype html>
<html lang="en";>
<head>
<meta charset="utf-8" />
<title>CustomCase</title>
<link rel="stylesheet" href="HeaderFooter.css">
<link rel="stylesheet" href="SkapaDesign.css">
<script src="Jquery.js"></script>
<script src="Fabric.js"></script>
<script src="Canvas.js"></script>
</head>
<body>
<div id="Wrapper">
<header id="Header">
Om Oss
Välj Design
<img id="Logo" src=LogotypHemsida.png>
Skapa Design
Hjälp
</header>
<section id="Body">
<img id="UpperShadow" src=NeråtSkugga.png>
<div id="LeftColumn">
<div id="TextMode">
</div>
<div id="CanvasContainer">
<canvas id="Canvas" width="270px" height="519px"></canvas>
</div>
<div id="LayerMode">
</div>
<div id="IPhoneMode">
</div>
</div>
<div id="RightColumn">
<div id="TextureMode">
</div>
<div id="TextureFilter">
</div>
<div id="TextureView">
<div id="TextureViewInside">
<div id="images">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
</div>
</div>
</div>
</div>
<img id="LowerShadow" src=UppåtSkugga.png>
</section>
<footer id="Footer">
<div id="FooterSpace"></div>
<div id="FooterColumnLeft">
Välj Design
Skapa Design
Om Oss
Hjälp
</div>
<div id="FooterDevider">
</div>
<div id="FooterColumnRight">
<div id="Facebook">
<img id="FacebookLogo" src=FacebookLogo.png>
Gilla oss på Facebook
</div>
<div id="Twitter">
<img id="TwitterLogo" src=TwitterLogo.png>
Följ oss på Twitter
</div>
</div>
<div id="FooterSpace"></div>
<div id="BottomColor"></div>
</footer>
</div>
</body>
</html>
You don't have to declare onclick for each img.
Try this: http://jsfiddle.net/cEh93/
$("#images img").click(function() {
var getsource = $(this).attr("src");
alert(getsource);
});
You don't need the onclick on each image, you can attach a jQuery event handler to all images and get their src attribute (this will output the image src to the console when the image is clicked):
jQuery(document).ready(function()
jQuery("#images img").on( "click", function() {
console.log( jQuery( this ).attr('src') );
});
}); // ready
You can set the retrieve of SRC only attaching event for upper DIV (using JS), like that:
<div id="images" onclick="getSelectedImageURL(event);">
<input type="image" src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
<img src="FärgadePapper.png">
<img src="Hajar.png">
<img src="Labyrint.png">
<img src="Martini.png">
</div>
To get current selected image SRC on click event...
function getSelectedImageURL(event){
if(event.target.localName.toUpperCase() == 'IMG')
alert(event.target.src);
}