Clickable event in JavaScript in orde to display an image - javascript

So I have a photo gallery that contains photo's in a thumbnail, and one big image. When the user clicks the thumbnail, it should display the thumbnail image larger. Everything else is done but I can't get the JS to work. I know it's something small, so can someone take a look at and see what I am doing incorrectly? Thank you in advance.
<html>
<head>
<title></title>
<meta charset = "UTF-8">
<meta http-equiv = "X-UA-Compatible" content = "IE=edge">
<meta name = "viewport" content = "width=device-width, initial-scale = 1">
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link rel = "stylesheet" href = "html5reset.css">
<link rel = "stylesheet" href = "gallery.css">
</head>
<body>
<div class = "main">
<div class = "wrapper">
<div id = "largeImage">
<img src = "images/machine_1.jpg" alt = "machining image" width = "920" height = "400" id = "bigImage" class = "border"/>
</div>
<div class = "thumbnail">
<img src="images/machine_1.jpg" alt = "machining lathe" id="machine_1"/>
<img src="images/machine_2.jpg" alt = "machining lathe" id="machine_2"/>
<img src="images/machine_3.jpg" alt = "machining lathe" id="machine_3"/>
<img src="images/machine_4.jpg" alt = "machining lathe" id="machine_4"/>
<img src="images/machine_5.jpg" alt = "machining lathe" id="machine_5"/>
<img src="images/machine_6.jpg" alt = "machining lathe" id="machine_6"/>
</div>
</div>
</div>
<script src = "gallery.js"></script>
</body>
</html>
function imgFunction() {
var bigImage = document.getElementById("bigImage");
var thumbnail = document.getElementById("thumbnail");
thumbnail.addEventListener("click",function(event) {
if (event.target.tagName == "IMG") {
bigImage.src = event.target.src;
}
},false);
}
window.addEventListener("load", imgFunction, false);

I think you want to select your <div class="thumbnail"> but you use getElementById.
So just give your div the id: <div id="thumbnail">.

JQuery Weave: http://kodeweave.sourceforge.net/editor/#3aa0ea4a91d84cfd35f0b8b4151499bc
Plain JS Weave: http://kodeweave.sourceforge.net/editor/#21d2b4bd5fa4c388d7e63c34ea23f4cd
Your main problem is you're calling document.getElementById("thumbnail") and no #thumbnail exists in your html.
So either change...
document.getElementById("thumbnail")
to
document.querySelector(".thumbnail")
or
to
<div id="thumbnail">
Here's a JQuery solution.
var thumbnail = document.querySelector('.thumbnails');
var preview = document.querySelector('.preview');
thumbnail.addEventListener("click", function(e) {
if (e.target.tagName == "IMG") {
preview.src = e.target.src;
}
}, false);
.gallery {
text-align: center;
}
.preview {
width: auto;
max-width: 100%;
}
.thumbnails {
white-space: nowrap;
overflow: auto;
}
.thumbnails img {
cursor: pointer;
height: 70px;
}
<div class="gallery">
<img src="http://www.catersnews.com/wp-content/uploads/2015/06/1_CATERS_BEAR_HANDSHAKE_07-800x498.jpg" class="preview">
<div class="thumbnails">
<img src="http://www.catersnews.com/wp-content/uploads/2015/06/1_CATERS_BEAR_HANDSHAKE_07-800x498.jpg">
<img src="https://s-media-cache-ak0.pinimg.com/736x/9a/44/23/9a4423324fe1fcc23c436a91ad4c9667.jpg">
<img src="http://www.earthtouchnews.com/media/734889/Baby_bears_2014-11-25.jpg">
<img src="http://i.imgur.com/wYFHJNI.jpg">
</div>
</div>

Related

click handler to enlarge image

I cant change the html or css files. My task is to set a click handler to my thumbnails to enlarge the image in the img within the element. While also setting the figcaption text in the figure to the thumbs title attribute. I need to attach to the div id = thumbnails. My script is not enlarging my thumbnails or titles.
This is what I have so far.
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
<script type="text/javascript" src="js/chapter09-project02.js">
document.getElementById("thumbnails").addEventListener("click", function(e) {
if(e.target && e.target.nodeName.toLowerCase == "img") {
// Taking the image src and converting it to medium image.
var srcValue = e.target.src.replace("small","medium");
// Taking title and storing it for later.
var titleValue = e.target.title;
document.getElementById("featured").src = srcValue;
document.getElementById("featured").title = titleValue;
document.getElementById("figcaption").innerHTML = titleValue;
}
});
document.getElementById("figcaption").addEventListener("onmouseover", function(e) {
var figcaption = e.target.style.opacity = .8;
});
document.getElementById("figcaption").addEventListener("onmouseout", function(e) {
var figcaption = e.target.style.opacity = 0;
});
</script>
</head>
<body>
<header>
<h2>Share Your Travels</h2>
<nav><img src="images/menu.png"></nav>
</header>
<main>
<figure id="featured">
<img src="images/medium/5855774224.jpg" title="Battle" />
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="images/small/5855774224.jpg" title="Battle" />
<img src="images/small/5856697109.jpg" title="Luneburg" />
<img src="images/small/6119130918.jpg" title="Bermuda" />
<img src="images/small/8711645510.jpg" title="Athens" />
<img src="images/small/9504449928.jpg" title="Florence" />
</div>
</main>
</body>
</html>
Is something like this what you were after?
var caption = document.getElementsByTagName("FIGCAPTION")[0];
var images = document.getElementsByTagName("IMG");
for (val of images) {
if(images[0] !== val){
val.addEventListener("click", function(e) {
caption.innerHTML = this.title;
images[0].title = this.title;
images[0].src = this.src.replace("small","medium");
});
}
}
img {
width: 100px;
height: 100px;
}
<!DOCTYPE html>
<html lang="en">
<head >
<meta charset="utf-8">
<title>Chapter 9 - Share Your Travels</title>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<header>
<h2>Share Your Travels</h2>
</header>
<main>
<figure id="featured">
<img src="https://cdn.pixabay.com/photo/2018/01/20/14/26/panorama-3094696__340.jpg" title="Battle" />
<figcaption>Battle</figcaption>
</figure>
<div id="thumbnails">
<img src="https://cdn.pixabay.com/photo/2018/05/15/09/23/raindrop-3402550__340.jpg" title="Battle" />
<img src="https://cdn.pixabay.com/photo/2018/04/23/14/23/giraffe-3344366__340.jpg" title="Luneburg" />
<img src="https://cdn.pixabay.com/photo/2018/04/20/18/19/grass-3336700__340.jpg" title="Bermuda" />
<img src="https://cdn.pixabay.com/photo/2018/05/12/12/48/mountain-crumpled-3393209__340.jpg" title="Athens" />
<img src="https://cdn.pixabay.com/photo/2018/04/24/19/14/hai-3347787__340.jpg" title="Florence" />
</div>
</main>
</body>
</html>

Uncaught TypeError: Cannot read property 'src' of undefined at displayFull

I am having trouble with this homework assignment and I have been stuck on it for a while. I am getting an error message saying
Uncaught TypeError: Cannot read property 'src' of undefined at
displayFull
Any idea to fix this?
The image folders and files are in the same folder, so the src is right.
HTML
<!DOCTYPE html>
<!-- Fig. 12.5: coverviewer.html -->
<!-- Dynamic styles used for animation. -->
<html>
<head>
<meta charset = "utf-8">
<title>Deitel Book Cover Viewer</title>
<link rel = "stylesheet" type = "text/css" href = "style.css">
<script src = "coverviewer.js"></script>
</head>
<body>
<div id = "mainimg">
<img id = "imgCover" src = "fullsize/jhtp.jpg" alt = "Full cover image">
</div>
<div id = "thumbs"> // I AM GETTING THE ERROR MESSAGE HERE FOR EACH IMAGE ON CLICK AT WITH THE ONCLICK ATTRIBUTE
<img src = "thumbs/jhtp.jpg" id = "jhtp" alt = "Java How to Program cover" onclick = "displayFull('jhtp');">
<img src = "thumbs/iw3htp.jpg" id = "iw3htp" alt = "Internet & World Wide Web How to Program cover" onclick = "displayFull('iw3htp');">
<img src = "thumbs/cpphtp.jpg" id = "cpphtp" alt = "C++ How to Program cover" onclick = "displayFull('cpphtp');">
<img src = "thumbs/jhtplov.jpg" id = "jhtplov" alt = "Java How to Program LOV cover" onclick = "displayFull('jhtplov');">
<img src = "thumbs/cpphtplov.jpg" id = "cpphtplov" alt = "C++ How to Program LOV cover" onclick = "displayFull('cpphtplov');">
<img src = "thumbs/vcsharphtp.jpg" id = "vcsharphtp" alt = "Visual C# How to Program cover" onclick = "displayFull('vcsharphtp');">
</div>
</body>
</html>
JAVASCRIPT
var fullpic = new Array(6);
//define each array element as an image
for (var i=0;i<fullpic.length;i++)
fullpic[i] = new Image(289,373);
//give the path to the src properties of the array elements
fullpic[0].src = "fullsize/jhtp.jpg";
fullpic[0].alt = "Java How to Program";
fullpic[1].src = "fullsize/iw3htp.jpg";
fullpic[2].src = "fullsize/cpphtp.jpg";
fullpic[3].src = "fullsize/jhtplov.jpg";
fullpic[4].src = "fullsize/cpphtplov.jpg";
fullpic[5].src = "fullsize/vcsharphtp.jpg";
/*function displayFull(title){
document.getElementById("imgCover").src="fullsize/"+title+".jpg";
}*/
function displayFull(i){
document.getElementById("imgCover").src=fullpic[i].src; // I AM GETTING THE ERROR MESSAGE HERE
}
To make it cleaner and readable, You can just do something like this as mentioned below. All you need is , have all the images under in your markup.
window.onload = function() {
document.querySelector("#thumbs").addEventListener("click", function(event) {
if (event.target.tagName.toLowerCase() === "img") {
var title = event.target.getAttribute("id"),
imgSrc = "fullsize/" + title + ".jpg",
imgElement = document.querySelector("#imgCover");
imgElement.src = imgSrc;
imgElement.alt = imgSrc;
}
});
}
<!DOCTYPE html>
<!-- Fig. 12.5: coverviewer.html -->
<!-- Dynamic styles used for animation. -->
<html>
<head>
<meta charset="utf-8">
<title>Deitel Book Cover Viewer</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="coverviewer.js"></script>
</head>
<body>
<div id="mainimg">
<img id="imgCover" src="fullsize/jhtp.jpg" alt="Full cover image">
</div>
<div id="thumbs">// I AM GETTING THE ERROR MESSAGE HERE FOR EACH IMAGE ON CLICK AT WITH THE ONCLICK ATTRIBUTE
<img src="thumbs/jhtp.jpg" id="jhtp" alt="Java How to Program cover">
<img src="thumbs/iw3htp.jpg" id="iw3htp" alt="Internet & World Wide Web How to Program cover">
<img src="thumbs/cpphtp.jpg" id="cpphtp" alt="C++ How to Program cover">
<img src="thumbs/jhtplov.jpg" id="jhtplov" alt="Java How to Program LOV cover">
<img src="thumbs/cpphtplov.jpg" id="cpphtplov" alt="C++ How to Program LOV cover">
<img src="thumbs/vcsharphtp.jpg" id="vcsharphtp" alt="Visual C# How to Program cover">
</div>
</body>
</html>

Trouble executing an event

Updated External JS Sheet Code Below
I am attempting to execute a simple photogallery. The task for my class is to hover over a small image and have the alt text and image displayed in the larger box and when the mouse leaves the text the background image should display as they were originally
Here is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<link rel="stylesheet" href="css/gallery.css">
<script src = "js/gallery.js"></script>
</head>
<body>
<div id = "image">
Hover over an image below to display here.
</div>
<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)" onmouseout = "unDo()">
<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover = "upDate(this)" onmouseout = "unDo()">
<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" onmouseover = "upDate(this)" onmouseout = "unDo()">
</body>
</html>
and here is my (broken) external Javascript sheet:
function upDate(PreviewPic){
var imageLarge= document.getElementById('image');
document.getElementById('image').innerHTML = PreviewPic.alt;
document.getElementById('image').backgroundImage =imageLarge.src;
}
function unDo(){
document.getElementById('image').innerHTML = "Hover over an image below to display here.";
}
this one works vanilla js and i commented a lot of the stuff, you said you're doing it for a class if its a coding class hopefully this helps you learn.the code snipit works but is not styled in a good way so try it out in your editor with you're css.
//grabing the ellements by id
var imgOne = document.getElementById("img1");
var imgTwo = document.getElementById("img2");
var imgThree = document.getElementById("img3");
var displayText = document.getElementById("displayText");
var displayImg = document.getElementById("displayImg");
//add eventlisteners to events
//this can be done in the html; but i prefer it in the javaScript
// event listeners for first img
imgOne.addEventListener("mouseover", function () {
displayImg.src = imgOne.src;
displayText.innerHTML = imgOne.alt;
});
// to replace
imgOne.addEventListener("mouseout", function () {
displayImg.src = "";
displayText.innerHTML = "Hover over an image below to display here.";
});
// event listeners for second img
// adds the stuff
imgTwo.addEventListener("mouseover", function () {
displayImg.src = imgTwo.src;
displayText.innerHTML = imgTwo.alt;
});
// reverts stuff
imgTwo.addEventListener("mouseout", function () {
displayImg.src = "";
displayText.innerHTML = "Hover over an image below to display here.";
});
// event listener for third img
imgThree.addEventListener("mouseover", function () {
displayImg.src = imgThree.src;
displayText.innerHTML = imgThree.alt;
});
imgThree.addEventListener("mouseout", function () {
displayImg.src = "";
displayText.innerHTML = "Hover over an image below to display here.";
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<link rel="stylesheet" href="css/gallery.css">
</head>
<body>
<div id = "image">
<!-- you could create a text node and append it rather than adding a p tag
but hard codeing it is a little easier -->
<img src="" alt="" id="displayImg">
<p id="displayText">Hover over an image below to display here.</p>
</div>
<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" id="img1">
<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" id="img2">
<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" id="img3">
<!-- i moved the script to the bottom so that you're html will load before the js
this can prevent some "can not get/append/set ****** to undefined" errors.
(i've heard either way is fine but this just the way i learned)-->
<script src="main.js"></script>
</body>
</html>
The updated javascript, I hope this works because I have not tested it:
function upDate(PreviewPic){
var imageLarge = document.getElementById("image");
imageLarge.innerHTML += '<img src="'+PreviewPic.src+'">';
imageLarge.innerHTML += PreviewPic.alt;
}
function unDo(){
document.getElementById('image').innerHTML = "Hover over an image below to display here.";
}
the upDate function will use the (this) value of the onmouseover="", the this element will be the PreviewPic, this variable will be used to insert the src and alt into the #image element. I have not edited the unDo function, this will reset the innerHTML of the #image element.
I used angular, witch is over kill; but it works and you could easily add more images. :)
var app = angular.module("MainApp", []);
app.controller("mainController", ["$scope", function($scope) {
$scope.display = {};
$scope.album = [{
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg",
name: "Styling with a Bandana"
}, {
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG",
name: "With My Boy"
}, {
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg",
name: "Young Puppy"
}];
$scope.newDisplay = function(item) {
$scope.display = item;
}
}]);
div.gallery {
box-sizing: border-box;
width: 33%;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en" ng-app="MainApp">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<link rel="stylesheet" href="main.css">
<!-- <link rel="stylesheet" href="css/gallery.css">-->
</head>
<body ng-controller="mainController">
<div class="display" ng-model="display">
<img ng-src="{{ display.img }}" alt="">
<h1>{{ display.name }}</h1></div>
<div class="gallery" ng-repeat="item in album" ng-mouseover="newDisplay(item)">
<img ng-src="{{ item.img }}" alt="">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="app.js"></script>
</body>
</html>

resizing image while dragging and dropping in javascript

We're trying to make a school project like an online delivery system.. but it will have a little tweak like drag and drop system and food customization. Like when you drag a sauce to the main image which is a bowl of rice. it would automatically change the image to a rice with sauce. sane as protein veggies and more.
I'm trying to figure out how to change image or adopting it to the main image while i drag and drop it also.. changing some of its attributes in CSS.
Also maybe there's a function that when I drag a specific image it would change the main image to a different image not the dragged one.
function doFirst(){
mypic = document.getElementById('img1');
mypic.addEventListener("dragstart", startDrag, false);
mypictwo = document.getElementById('img2');
mypictwo.addEventListener("dragstart", startDrag2, false);
mypicthree = document.getElementById('img3');
mypicthree.addEventListener("dragstart", startDrag3, false);
mypicfour = document.getElementById('img4');
mypicfour.addEventListener("dragstart", startDrag4, false);
leftbox = document.getElementById("mainbox");
leftbox.addEventListener("dragenter", function(e) {e.preventDefault();}, false);
leftbox.addEventListener("dragover", function(e) {e.preventDefault();}, false);
leftbox.addEventListener("drop", dropped, false);
}
//--------------startDrag FUNCTIONS -----------------------//
function startDrag(e){
var code = '<img id="img1" src="images/image1.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag2(e){
var code = '<img id="img2" src="images/image2.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag3(e){
var code = '<img id="img2" src="images/image4.jpg">';
e.dataTransfer.setData('Text', code);
}
function startDrag4(e){
var code = '<img id="img2" src="images/image5.jpg">';
e.dataTransfer.setData('Text', code);
}
//--------------startDrag FUNCTIONS -----------------------//
function dropped(e){
e.preventDefault();
leftbox.innerHTML = e.dataTransfer.getData('Text');
var code = '<img id="centerimg" src="images/center.png">';
ondrop
}
function drop(event){
event.preventDefault();
var code = '<img id="img2" src="images/image5.jpg" width="300px" height="300px">' ;
}
window.addEventListener ("load", doFirst, false);
#centerimg{
width:500px;
height: 500px;
}
#img2, #img1, #img3, #img4{
width:150px;
height: 150px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="drag.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-3" id="1box">
<img id="img1" src="images/image1.jpg">
</div>
<div class="col-md-3" id="2box">
<img id="img2" src="images/image2.jpg">
</div>
<div class="col-md-3" id="3box">
<img id="img3" src="images/image4.jpg">
</div>
<div class="col-md-3" id="4box">
<img id="img4" src="images/image5.jpg">
</div>
</div>
</div>
<div class="row">
<center><div class="col-md-push-4 col-md-4 mainbox" ondrop="drop(event)" id="mainbox">
<img id="centerimg" src="images/center.png">
</div></center>
</div>
</body>
</html>

change thumbnail image for main image

do i have a syntax error? , could it be that im using notepad++?
nothing is happening when i click a thumbnail image
i am new to javascript so that may be the case.
my general idea was to create an event "changeimage" that onclick would change the source of my main image for my thumbnails image to make it bigger.
<head>
<script type="text/javascript">
function changeimage(event)
{
event = event;
var targetElement = event.target;
if (targetElement.tagName == "IMG")
{
document.getElementbyid("Main").src = targetelement.getattribute("src");
}
}
</script>
<meta charset="utf=8">
<style>
#Main
{
height:540px;
width:540px;
}
.imgthmb1
{
height:100px;
width:100px;
}
</style>
</head>
<body>
<img id="Main" src="img/rickroll1.jpg" </img>
<br />
<div id="thumbnail" onclick="changeimage(event)">
<img class="imgthmb1" src="img/rickroll1.jpg" />
<img class="imgthmb1" src="img/rickroll2.jpg" />
<img class="imgthmb1" src="img/rickroll3.jpg" />
<img class="imgthmb1" src="img/rickroll4.jpg" />
<img class="imgthmb1" src="img/rickroll5.jpg" />
</div>
</body>
</html>
Yes, you have a syntax error:
targetElement is spelled targetelement in the following line:
document.getElementbyid("Main").src = targetelement.getattribute("src");
Change it to the following:
document.getElementbyid("Main").src = targetElement.getattribute("src");
On a related note, the following line is extraneous and can be removed:
event = event;
Javascript is case-sensitive.
in place of
document.getElementbyid("Main").src = targetelement.getattribute("src");
write
document.getElementbyId("Main").src = targetElement.getAttribute("src");
Also your html markup has an error:
<img id="Main" src="img/rickroll1.jpg" </img>
should be
<img id="Main" src="img/rickroll1.jpg">

Categories

Resources