We Keep Coding

Gallery on react using GLightbox

I displayed a gallery of images using this code. Right now, images are displayed like expected, but when i click on one, and that image expand on full screen, I can't navigate on next image
import React, { useState, useEffect } from 'react';
import img1 from './assets/img/gallery/gallery-1.jpg';
import img2 from './assets/img/gallery/gallery-2.jpg';
import img3 from './assets/img/gallery/gallery-3.jpg';
import img4 from './assets/img/gallery/gallery-4.jpg';
import img5 from './assets/img/gallery/gallery-5.jpg';
import img6 from './assets/img/gallery/gallery-6.jpg';
import img7 from './assets/img/gallery/gallery-7.jpg';
import img8 from './assets/img/gallery/gallery-8.jpg';
import GLightbox from 'glightbox';
export default function Footer() {
return(
<section id="galerie" class="gallery">
<div class="container">
<div class="section-title">
<h2>Galerie</h2>
<p>In această secțiune vă prezentăm câteva dintre produsele noastre. Pentru a vedea gama completă, va invităm să accesați pagina de Produse.</p>
</div>
</div>
<div class="container-fluid">
<div class="row g-0">
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href={img1} onClick={handleClick}>
<img src={img1} alt="" class="img-fluid" onClick={handleClick}/>
</a>
</div>
</div>
<div class="col-lg-3 col-md-4" onClick={handleClick}>
<div class="gallery-item">
<a href={img2}>
<img src={img2} alt="" class="img-fluid"/>
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href={img3} class="galelry-lightbox">
<img src={img3} alt="" class="img-fluid"/>
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href={img4} class="galelry-lightbox">
<img src={img4} alt="" class="img-fluid"/>
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href={img5} class="galelry-lightbox">
<img src={img5} alt="" class="img-fluid"/>
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href={img6} class="galelry-lightbox">
<img src={img6} alt="" class="img-fluid"/>
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href={img7} class="galelry-lightbox">
<img src={img7} alt="" class="img-fluid"/>
</a>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="gallery-item">
<a href={img8} class="galelry-lightbox">
<img src={img8} alt="" class="img-fluid"/>
</a>
</div>
</div>
</div>
</div>
</section>
);
}
I was using react. When I click on image, it expand and I want to display two arrows to navigate between images. How to do create that arrows to navigate between arrows?

You can use
lightbox.nextSlide();
lightbox.prevSlide();
Add your buttons, and css them to the position you want, and add your icons
const handleNext = (e) => {
e.preventDefault;
lightbox.nextSlide();
}
const handlePrev = (e) => {
e.preventDefault;
lightbox.prevSlide();
}
<a href="#" class="glightbox-prev" onClick={handlePrev}>previous</a>
<a href="#" class="glightbox-next" onClick={handleNext}>next</a>

Modal, how to open other pages from directory ? JS HTML CSS

<div class="row">
<div class="column">
<div class="container">
<img
src="../images/img1.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal1"><h1>Marathon</h1></div>
</div>
</div>
<div class="container">
<img
src="../images/img5.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal5"><h1>Weight Lifting</h1></div>
</div>
</div>
<div class="container">
<img
src="../images/img8.jpg"
alt="Avatar"
class="image"
width="200"
/>
<div class="black">
<div style="width:100%;cursor:pointer" id="modal8"><h1>Jogging</h1></div>
</div>
</div>
</div>
</div>
How to add modals so I can open other pages ( image01.html, image05.html ....) when I click on h1 from that photo.. I am new in this and i can't find a soulution. Any help would be great

How to sort HTML elements alphabetically with vanilla JavaScript?

I have these animal cards in a container div, and i want to sort them alphabetically. I only want to use vanilla javascript, no jquery please.
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>

Here's what I came up with. I selected all tags with the class "animal-name". Then stored their textContent in an Array, sorted it then replaced it in the original tags
let animals = document.querySelectorAll('.animal-name');
let animalNames = [];
for(let i=0; i<animals.length; i++){
animalNames.push(animals[i].textContent)
}
animalNames = animalNames.sort();
for(let i=0; i<animals.length; i++){
animals[i].textContent = animalNames[i];
}
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>

The idea is to sort the DOM elements, and then append them in that order again inside the container element: this will actually move these elements in their right order:
const container = document.querySelector(".animal-container");
const key = (a) => a.querySelector(".animal-name").textContent.trim();
Array.from(container.children)
.sort((a, b) => key(a).localeCompare(key(b)))
.forEach(child => container.appendChild(child));
<div class="animal-container">
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Giraffe</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Camel</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Dog</div>
</div>
</div>
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">Lion</div>
</div>
</div>
</div>

You can do this by appending the elements to the DOM dynamically using JS.
For example,
const arr = ["Giraffe", "Camel", "Dog", "Lion"].sort()
arr.forEach((word) => {
document.getElementById("animal-container").appendChild(
<div class="animal-cards">
<div class="img-container">
<img src="#">
</div>
<div class="animal-info">
<div class="animal-name">{word}</div>
</div>
)})

fancybox two images shown at the same window

I have a gallery and images contains other images. So After click on image thubnail I want to see full size of thubnail image and other images which are not represent on gallery because they are just part of that main image. This images will be reached trough scrolling and will be shown in same window with main image.
Now i Have code like this(with one image after click on thubnail) :
<div class="col-3 thumb">
<a data-fancybox="gallery" href="1.jpg" class="fancybox" data-caption="Description 1">
<div class="hovereffect">
<img class="img-fluid" src="1.jpg" alt="">
<div class="overlay">
<h2>Tittle 1</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="2.jpg" class="fancybox" data-caption="Description 2">
<div class="hovereffect">
<img class="img-fluid" src="2.jpg" alt="">
<div class="overlay">
<h2>Tittle 2</h2>
</div>
</div>
</a>
</div>
<div class="col-3 thumb">
<a data-fancybox="gallery" href="3.jpg" data-caption="Description 3">
<div class="hovereffect">
<img class="img-fluid" src="3.jpg" alt="">
<div class="overlay">
<h2>Tittle 3</h2>
</div>
</div>
</a>
</div>
Update
Solve this with id:
<a data-fancybox="gallery" href="#img_1" class="fancybox">
<div style="display:none">
<div id="img_1"">
<div class="container">
<div class="row">
<div class="col-7" >
<a data-fancybox="gallery1" href="1.jpg" class="fancybox">
<img class="img-fluid" src="1.jpg" />
</a>
</div>
</div>
</div>
</div>
</div>

So, basically, you are asking for two way navigation (e.g., two dimensional), but I have never stumbled upon such script that would fully support that.
You can display additional images under the main image, but they will not have the same functionality (e.g., zooming/dragging/etc) or you can display them as inline elements (obviously, there would be no image-related functionality).

JS Delete div content and write new code

I have this code
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="http://" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="http://" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
I want to replace only in the first div, <img src = "" alt = ""> with <video> <source src = ""> </ video>.
To clean up div I found this code. But not the first. This is the first problem.
$('.item").empty();
To write the new code to play the video, I should use this code:
$(".item").html('<video><source src=""></video>');
I can not write a good javascript code to do what I explained you.
ps. I can’t change the first code because it’s a default slider of image.
Thanks for the help.

If you wish to use jquery you can utilise replaceWith() and :first pseudo selector to select and repalce only the first <img>:
$(function () {
$('img:first').replaceWith('<video><source src=""></video>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>
Bu tyou don't need Jquery to get it done. Document.querySelector() returns only the first element that matches the specified selector and the repalce it using replaceChild(https://plainjs.com/javascript/manipulation/replace-a-dom-element-36/):
var img = document.querySelector('.item img');
var video = document.createElement('video');
video.src = '';
img.parentNode.replaceChild(video, img);
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="" />
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>

Try this, querySelector() selects only One selector, the first matched selector:
document.querySelector('.carousel-inner .item img').outerHTML ='<video><source src=""></video>';

You can use jQuery replaceWith() method to achieve this as below.. you can modify the selector as per your need
$('img:first').replaceWith( "<video><source src=""></video>" );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carousel-inner" role="listbox">
<div class="item">
<img src="" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
<div class="item">
<img src="" alt="">
<div class="carousel-caption text-left">
<div class="container">
</div>
</div>
</div>
</div>