Click Thumbnail, Display Large Image Javascript

Community Off Topic
1

So I have to create a project where one a user clicks on a thumbnail image displays the full-size image in a different location.

I understand the addEventlistener part but I don’t get how to re-direct the image in another window or location.

JavaScript:

‘use strict’;

// 1. Find and store the element we want to listen to events on.

let clickerImg1 = document.getElementById(‘img1’)

// 2. Define the function that will respond to the event.

let onImgClick = function(){
clickerImg1.window.open(“file:///Users/yollecottejean/Desktop/PhotoGallery/image/bench.jpg”);
} Would this work

// 3. Add the event listener for the element and function

clickerImg1.addEventListener(“click”, onImgClick);

2

Is this a CC exercise, or your own assignment?

2 Likes
3

What is a CC exercise? and No, it’s my own

1 Like
4

why would you use js for this? why not simply use an anchor element:

<a href="path/to/image.jpg"><img src="path/to/image.jpg"></a>

why complicate matters for yourself?

2 Likes
5

what is a CC exercise?

1 Like
6

CC = CodeCademy, so any exercise on the website.

From your previous comment, it was clear you where attempting something on your own (non exercise related)

1 Like
7

Oh okay , yea it’s my own exercise

1 Like
8

yea, we got that by now :wink:

Why would you use for JS for something so trivial that it can be accomplished simpler and better with an anchor (<a></a>) element

2 Likes
9

oh because the requirement of my exercise want me to use js

1 Like
10

oh okay I see what you are saying

1 Like
11

So I got my code to work but it’s doing the opposite of what I want the code to do. I want the user to click the thumb image and the same larger image to pop up but when I load the page the larger image is shown and I don’t want that and also can I write an addEventListener for each image.

Javascript:

function nailHandler(evnt){
let chat = document.getElementById(‘bigChat’);
if(chat.className ===‘on’){
chat.className= ‘’;
}else{
chat.className =‘on’;

}

}
let nail = document.getElementById(“nail”);

nail.addEventListener(“click”, nailHandler);

1 Like
12

So I got my code to work but it’s doing the opposite of what I want the code to do. I want the user to click the thumb image and the same larger image to pop up but when I load the page the larger image is shown and I don’t want that and also can I write an addEventListener for each image.

Javascript:

function nailHandler(evnt){
let chat = document.getElementById(‘bigChat’);
if(chat.className ===‘on’){
chat.className= ‘’;
}else{
chat.className =‘on’;

}
}
let nail = document.getElementById(“nail”);

nail.addEventListener(“click”, nailHandler);

1 Like
13

clearly there is html code involved which we do not have

please provide what you have in a bin (jsbin, jsfiddle, repl.it), so we can work with an exact replica of the problem

2 Likes
14

Personally, I don’t like the idea of a new window. Use a predefined element in the current viewport and line up the the thumbs above, below, or down the side(s).

<div id="thumbs">
    <img>
    <img>
    <img>
    <img>
    <img>
</div>
<div id="view"></div>

Now in your script, bind the listener to the parent class, “thumbs” and delegate the click events to the element that is clicked. The handler would be given the src attribute value of the target node and would then fashion a URL for the view image.

2 Likes
15

Okay sorry here it is:
http://jsfiddle.net/yjean3/vk3kxo5e/#&togetherjs=Q428qsMlve

1 Like
16

http://jsfiddle.net/yjean3/vk3kxo5e/#&togetherjs=Q428qsMlve

1 Like
17

Forked this one and took total liberties…

html 
<body>
  <div id="thumbs">
    <img src="thumb/Snow.jpg" alt="" title="Snow">
    <img src="thumb/enter.jpg" alt="" title="Enter">
    <img src="thumb/one.jpg" alt="" title="One">
    <img src="thumb/Birds.jpg" alt="" title="Birds">
    <img src="thumb/lake.jpg" alt="" title="Lake">
  </div>
  <div id="views"></div>
</body>
css 
#thumbs {
  margin: 1em auto;
}
#views {
  height: 300px;
  margin: 1em auto;
  border: 1px dotted black;
}
#thumbs,
#views {
  width: 90%;
}
#thumbs img {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
}
#views img {
  display: block;
  width: 400px;
  height: 300px;
  margin: 1em auto;
  border: 1px solid black;
}
js 
'use  strict';

const host = "http://fiddle.jshell.net/_display/";

//https://www.sitepoint.com/javascript-event-delegation-is-easier-than-you-think/
const getEventTarget = e => {
  e = e || window.event;
  return e.target || e.srcElement;
};

const thumbs = document.querySelector('#thumbs');
const views = document.querySelector('#views');

const thumbsHandler = e => {
  let target = getEventTarget(e);
  let choice = target.src;
  let title = target.title;
  choice = choice.substring(choice.lastIndexOf('/') + 1);
  choice = `${host}bigImage/${choice}`;
  let view = document.createElement('img');
  view.alt = "";
  view.src = choice;
  view.title = title;
  views.innerHTML = "";
  views.appendChild(view);
};

thumbs.addEventListener('click', thumbsHandler);

If the host raises issues then omit it.

2 Likes
19

I have a question about this part in the code I don’t understand that

const getEventTarget = e => {
e = e || window.event;
return e.target || e.srcElement;
};

let target = getEventTarget(e);

1 Like
20

There is a URL posted in the code for where to find this code, and the explanation for it. That is why it is so important to document your code with attribution links, both for where it came from, and for the information that may have been forgotten in the passing of time.

Let’s say we have a list of clickable objects. Do we give each one an event binding? or just the group? Simple answer, the group. Then we have only one listener and use way less memory and resources to manage it.

The above function is the engine that drives delegation. When a click (or other event) is fired on an element in the group, the handler calls this function first to find out which one it is. The returned object is the target element. Now we can identify the actual element, its properties and if there is one, its associated callback function.

In the above code the same code runs for every thumbnail click, only with the specific data associated, in this case, the URI to the large image. The current image is removed from the viewer, and the new one inserted into the DOM to take its place.

2 Likes
21

oh thank you, I got it now thank you so much

3 Likes