Develop Reference

appendTo adds element to another one, but it does not show on the website

I am trying to add arrows to my simple lightbox. The arrows are simple symbols "<" and ">. I have created them with jquery and when I try to add them to the image, they show up in the developer tools but not in the website for whatever reason. Can you tell me what's the problem please?
Here is the screenshot of the issue, if you did not understand my poor english. As you can see, the arrows are created in developer tools, but they cannot be found on the website. https://prnt.sc/26lyfbc
//Gallery Lightbox made with Jquery
let gallery = $('#gallery'),
overlay = $('<div = id = "overlay"></div>').appendTo('body').hide();
//Opens the lightbox with chosen image
gallery.find('a').on("click", function(event){
event.preventDefault();
let href = $(this).attr('href'),
image = $('<img>', {src: href}),
larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW
image.appendTo(overlay);
larrow.appendTo(image);
overlay.show();
//Closes the Lightbox with the image, by clicking on the overlay
$(document).on("click", "#overlay", function(){
overlay.hide();
image.remove();
})
})
.gallery {
display: none;
opacity: 0;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
width: 1004px;
margin: 0 auto;
}
.gallery img {
position: relative;
top: 100px;
height: 200px;
width: 300px;
margin: 0 1em;
}
#overlay {
background: rgba(0, 0, 0, .7);
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#overlay img {
margin-top: 5%;
border: solid 5px white;
border-radius: 5px;
}
//Dont mind these, the silly values are just for testing purposes
#larrow {
font-size: 500px;
color: red;
z-index: 2000;
}
#rarrow {
font-size: 500px;
color: red;
z-index: 2000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="gallery" id="gallery">
<img src="img\placeholder1.jpg" alt="">
<img src="img\placeholder2.jpg" alt="">
<img src="img\placeholder3.jpg" alt="">
<img src="img\placeholder4.jpg" alt="">
<img src="img\placeholder5.jpg" alt="">
<img src="img\placeholder6.jpg" alt="">
</div>
</body>

You have a few errors in your code. Instead of
larrow = $('<div = id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div = id = "rarrow"> > </div>'); //RIGHT ARROW
You should write it like this. There is no need for the '=' between div and id.
larrow = $('<div id = "larrow"> < </div>'); //LEFT ARROW
rarrow = $('<div id = "rarrow"> > </div>'); //RIGHT ARROW
The same goes for the following tags:
overlay = $('<div id = "overlay"></div>').appendTo('body').hide();
Putting the div tags in the image will also not work. Instead you should put the image and the arrows in a container together like this:
<div id="overlay">
<img src ... </img>
<div id = "larrow"> < </div>
<div id = "rarrow"> > </div>
</div>
Refer to Floating Div Over An Image to see the needed css.

How can I change img src from list of (non-image) items?

What I'm trying to do feels like it should be very simple, but I haven't found the right thing.
Say I have something like this:
.list {
float: left;
width: 200px;
height: 500px;
overflow-y: auto;
}
.show {
float: right;
width: 500px;
height: 500px;
}
.display {
max-width: 500px;
max-height: 500px;
width: auto;
height: auto;
}
<div class="container" style="width: 700px;">
<div class="list">
<li>img1.jpg</li>
<li>img2.jpg</li>
<li>img3.gif</li>
<li>img4.png</li>
</div>
<div class="show">
<img src="img1.jpg" class="display" id="display">
</div>
</div>
When clicking on the list item on the left, I want the img src on the right to change to the displayed text in the list item (or some equivalent). Bonus points if there are previous and next arrows on the image on the right to continue scrolling through the available images.
Sort of like a lightbox gallery, but instead of using thumbnails, it's clicking on text or a link that creates the full size element, and instead of popping up a lightbox it just changes the existing image on the page.
Ideally I'd like to use vanilla JavaScript, but using jQuery or something isn't out of the question.

You can add JavaScript code on each li element, and sending in the li element itself with "this" in updateImage(this). I'm using a site with placeholder images, so it will look a little bit different.
function updateImage(liElement) {
const imgElement = document.querySelector('.show > img');
// Your code should be something like: "https://www.yourdomain.com/images/" + liElement.textContent
const imageSrc = `https://picsum.photos/id/${liElement.textContent}/200/200`;
imgElement.src = imageSrc;
}
.container {
display: flex;
}
.list {
width: 200px;
cursor: pointer;
padding: 0.25rem;
}
.display {
max-width: 500px;
max-height: 500px;
}
<div class="container">
<div class="list">
<li onclick="updateImage(this)">237</li>
<li onclick="updateImage(this)">240</li>
<li onclick="updateImage(this)">100</li>
<li onclick="updateImage(this)">301</li>
</div>
<div class="show">
<img src="https://picsum.photos/id/237/200/200" class="display" id="display">
</div>
</div>
You can also add a single click listener on your ul tag, and use event.target to get which li that is clicked upon.
It's a more dynamic approach, because you don't need to add onclick="updateImage(this)" on every single li tag, and it creates cleaner HTML code.
const listElement = document.querySelector('.list');
listElement.addEventListener('click', updateImage);
function updateImage(event) {
const imgElement = document.querySelector('.show > img');
const liElement = event.target;
// Your code should be something like: "https://www.yourdomain.com/images/" + liElement.textContent
const imageSrc = `https://picsum.photos/id/${liElement.textContent}/200/200`;
imgElement.src = imageSrc;
}
.container {
display: flex;
}
.list {
width: 200px;
cursor: pointer;
padding: 0.25rem;
}
list > li * {
/* so only the li tag can be event.target, and none of it's children */
pointer-events: none;
}
.display {
max-width: 500px;
max-height: 500px;
}
<div class="container">
<div class="list">
<li>237</li>
<li>240</li>
<li>100</li>
<li>301</li>
</div>
<div class="show">
<img src="https://picsum.photos/id/237/200/200" class="display" id="display">
</div>
</div>

Here's a starting point, roughing out the basic idea in vanilla JS:
const list = document.querySelector('.list');
const img = document.querySelector('#display');
const onclick = e => {
if (e.target.nodeName !== 'LI') return;
img.src = e.target.textContent;
};
list.addEventListener('click', onclick);
And a working example (I'm also setting the alt text, since the image srces are all broken links)
const list = document.querySelector('.list');
const img = document.querySelector('#display');
const onclick = e=> {
if(e.target.nodeName!=='LI') return;
img.src = e.target.textContent;
img.alt = e.target.textContent;
};
list.addEventListener('click', onclick)
.list {
float: left;
width: 200px;
height: 500px;
overflow-y: auto;
}
.show {
float: right;
width: 500px;
height: 500px;
}
.display {
max-width: 500px;
max-height: 500px;
width: auto;
height: auto;
}
<div class="container" style="width: 700px;">
<div class="list">
<li>img1.jpg</li>
<li>img2.jpg</li>
<li>img3.gif</li>
<li>img4.png</li>
</div>
<div class="show">
<img src="img1.jpg" class="display" id="display">
</div>
</div>

Changing images with right or left arrow key

I've built this gallery
https://jsfiddle.net/ramamamagagaulala/do4yLxcz/
let images = document.querySelectorAll('.work-item');
let best = document.querySelector('.work-modal');
let main = document.querySelector('.work-modal__item');
console.log(images)
let closeButton = document.getElementById("closee");
images.forEach(function(ref) {
ref.addEventListener('click', function(){
let newImage = this.getElementsByTagName('img')[0].src;
best.classList.add('work-modal--show');
main.style.backgroundImage = `url( ${newImage} )`;
})
})
closeButton.addEventListener('click', function() {
best.classList.remove('work-modal--show');
});
basically, it works like this:
you click an item.
JavaScript checks what IMG this item contains.
a modal window opens up.
then the IMG that is associated with the item, is going to be displayed as the background image of this modal.
So far so good, however, I would like to build a function so I can press the arrow keys on my keyboard and the next image is going to be displayed.
What I've tried is to select the IMG of the nextSibling while clicking. Then I have used this variable to set up the background image of the modal window. But this only worked once.
Any ideas what to try next?

I would suggest have list of images urls in an array in .js file, and then you show one modal, click right/left and just change img src value to next/previous array element, untill get to either end of array.

There are three things we need to do for this problem
Storing the image source in an array
Keep track of the position of the image index
Add an event listener to track the keypress for next & prev button on your keyboard
let images = document.querySelectorAll('.work-item');
let best = document.querySelector('.work-modal');
let main = document.querySelector('.work-modal__item');
let closeButton = document.getElementById("closee");
let currentIndex = -1;
let imgSrc = [];
images.forEach(function(ref,index) {
imgSrc.push(ref.children[0].getAttribute("src"));
ref.addEventListener('click', function(){
let newImage = this.getElementsByTagName('img')[0].src;
best.classList.add('work-modal--show');
main.style.backgroundImage = `url( ${newImage} )`;
currentIndex = index
});
})
closeButton.addEventListener('click', function() {
best.classList.remove('work-modal--show');
});
let doc = document.getElementById("work");
window.addEventListener("keydown", event => {
if(event.keyCode === 39){
// next event
if(currentIndex < imgSrc.length -1 ){
main.style.backgroundImage = `url( ${imgSrc[currentIndex+1]} )`;
currentIndex=currentIndex+1;
} else {
alert("Reached last image")
}
} else if(event.keyCode === 37){
// prev event
if(currentIndex > 0){
main.style.backgroundImage = `url( ${imgSrc[currentIndex-1]} )`;
currentIndex=currentIndex-1;
} else {
alert("Reached first image")
}
}
});
.work-container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
}
img {
width: 250px;
}
.work-item__img{
width: 100%;
height: 100%;
display: block;
transition: all 1s linear;
opacity: 1;
object-fit: cover;
transform: scale(1.1);
}
/* modal */
.work-modal{
display: none;
}
.work-modal--show{
position: fixed;
background: rgba(0,0,0,0.5);
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
display: grid;
justify-content: center;
align-items: center;
}
.work-modal__item{
height: 70vh;
width: 80vw;
border:0.5rem solid var(--yellow);
border-radius: 0.4rem;
}
#media screen and (min-width:768px){
.work-modal__item{
height: 80vh;
width: 60vw;
}
}
.work-modal__close{
position: fixed;
font-size: 3rem;
color: var(--brightYellow);
bottom: 5%;
right: 5%;
transition: color 0.5s linear;
cursor: pointer;
text-decoration: none;
display: inline-block;
}
.work-modal__close:hover{
color: red;
}
<section class="work section-padding" id="work">
<div class="work-container">
<div class="work-item item-1">
<img src="https://images.pexels.com/photos/2683138/pexels-photo-2683138.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" class="work-item__img">
</div>
<div class="work-item item-2">
<img src="https://images.pexels.com/photos/2736220/pexels-photo-2736220.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="" class="work-item__img">
</div>
<div class="work-item item-3">
<img src="https://images.pexels.com/photos/2928178/pexels-photo-2928178.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="" class="work-item__img">
</div>
</div>
</section>
<div class="work-modal">
<div class="work-modal__item"></div>
<div class="work-modal__close">
<i id="closee" class="fas fa-window-close">close</i>
</div>
</div>
JS Fiddle
https://jsfiddle.net/aamin89/b5wp3kez/1/

How to make an image larger on mouseover with Javascript?

I want to make an image larger when the mouse is moved over it, and return it to normal after. The image loads at normal size fine using the getPhoto function in my JavaScript, but when I mouse over it, nothing happens.
What am I doing wrong?
document.getElementById("photo").onmouseover = function() {
mouseOver()
};
document.getElementById("photo").onmouseout = function() {
mouseOut()
};
function getPhoto(handle) {
var img = new Image();
var div = document.getElementById("photo");
while (div.firstChild) {
div.removeChild(div.firstChild);
}
img.src = "https://res.cloudinary.com/harmhxmnk/image/upload/" + handle;
img.height = 32;
img.onload = function() {
div.appendChild(img);
};
}
function mouseOver() {
var img = document.getElementById("photo");
img.height = 100;
}
function mouseOut() {
// TODO
}
.photo {
position: absolute;
top: 86px;
right: 92px;
}
<div class="photo" id="photo"></div>

No need for JS IMHO :-)
.photo {
position: absolute;
top: 86px;
right: 92px;
transform: scale(1);
transition: transform .5s;
}
.photo:hover {
transform: scale(1.2);
}
<div class="photo" id="photo"><img src="https://wallpaperbrowse.com/media/images/3848765-wallpaper-images-download.jpg" /></div>

None of the answers so far explain why it does not work. The reason it does not work is you are setting the height of 32 on the image. But when you are setting the height, you are setting it on the div, not the image. So if you want to do it your way, you would need to select the image. querySelector will let you reference the image in the element.
function mouseOver() {
var img = document.querySelector("#photo img");
img.height = 100;
}

I think it would be easier and cleaner to just use css for this
#photo:hover{
height: 100:
}

Very simple with CSS using flexbox (demo)
.col {
display: flex;
}
.col img {
margin: 5px 5px; /* more margin makes the image smaller */
flex-grow: 1;
}
.col img:hover {
margin: 0 0; /* less margin on hover makes the image bigger */
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
<img src="https://placekitten.com/g/200/200">
</div>
<div class="col">
<img src="https://placekitten.com/g/200/200">
</div>
</div>
<div class="row">
<div class="col">
<img src="https://placekitten.com/g/200/200">
</div>
<div class="col">
<img src="https://placekitten.com/g/200/200">
</div>
<div class="col">
<img src="https://placekitten.com/g/200/200">
</div>
</div>
</div>

Alter .css with JS? Setting dynamic .css properties with variables

I have something like the below:
<div id="left">
left
</div>
<div id="right">
right
</div>
With .css properties:
#left {
width: 60%;
float: left
min-height: ###
max-height: 1000px;
}
#right {
width: 40%;
float: right;
min-height: ###
max-height: 1000px;
}
Notice the ### for both <div> CSS min-height properties. I'd like something like the below (some pseudo JS):
var leftheight = document.getElementById(left);
var rightheight = document.getElementById(right);
if (leftheight.currentHeight > rightheight.currentHeight) {
rightheight.style.min-height = leftheight.currentHeight;
} else if (rightheight.currentHeight > leftheight.currentHeight) {
leftheight.style.min-height = rightheight.currentHeight;
}
Basically I want:
if (current height of left > current height of right) {
min-height of right = current height of left
} else if (current height of right > current height of left) {
min-height of left = current height of right
}
//ie. both left and right have the same min-heights, whichever is larger
My Javascript is wrong, and it's something I'm learning just now. Is there a method I can use to get my desired results?

You can do this:
if (leftheight.currentHeight > rightheight.currentHeight) {
rightheight.style.minHeight = leftheight.currentHeight;
} else if (rightheight.currentHeight > leftheight.currentHeight) {
leftheight.style.minHeight = rightheight.currentHeight;
}
It's actually minHeight not min-height.

There is no need for javascript here, you can achieve this by adding a container with overflow: hidden and adding positive and negative margins to the left and right divs:
<div id="container">
<div id="left">left</div>
<div id="right">right<br /><br /><br /><br />Foobar</div>
</div>
#container {
width: 75%; /* amend this as required */
overflow: hidden;
}
#left {
width: 60%;
float: left;
max-height: 1000px;
background-color: #C00;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
#right {
width: 40%;
float: right;
max-height: 1000px;
background-color: #0C0;
padding-bottom: 1000px;
margin-bottom: -1000px;
}
Example fiddle
As a rule, javascript should never be used solely for layout purposes. What would happen to your page if someone has javascript turned off?

you can use jquery
var leftheight = $('#left').height();
var rightheight =$('#right').height();
if (leftheight > rightheight) {
$('#right').css('min-height',leftheight+"px")
}
else if (rightheight > leftheight) {
$('#left').css('min-height',rightheight + "px")
}

using jquery
$(function(){ //ready function to make sure document is ready
var $leftdiv=$('#left'),
$rightdiv=$('#right'),
$leftHeight=$('#left').height(),
$rightHeight=$('#right').height();
if ( $leftHeight > $rightHeight) {
$rightdiv.css('min-height':$leftHeight + "px");
} else if ( $rightHeight > $leftHeight) {
$leftdiv.css('min-height':$rightHeight + "px");
}
});