Develop Reference

First JS script tag works normally, second script tag does not read the file

I'm attempting to use multiple JS files for my page, but for some reason, whenever I attempt to add a second , the second one does not work, not matter where I position it, and changing ID tags doesn't help either
Here's the HTML code
<div id="buttoncontainer" class="buttoncontainer">
<script src="js/menu.js"></script>
<script src="js/test.js"></script>
<div class="rightmenu">
<div id="test" style="height:400px;width:100px;outline:solid red 1px;">
</div>
And here's the JS files
menu.js
let headerContent = `
<a href="index.html">
<img src="images/buttons/homebutton.gif" class="button"></a>
<a href="blog/blogmain.html">
<img src="images/buttons/blogbutton.gif" class="button"></a>
<a href="art/artmain.html">
<img src="images/buttons/artbutton.gif" class="button"></a>
<div class="dropmenu1">
<a href="art/fanartmain.html">
<img src="images/buttons/fanartbutton.gif" class="button"></a>
<div class="dropmenu1-content">
<a href="links/links.html">
<img src="images/buttons/linksbutton.gif" class="button dropbutton"></a>
</div>
</div>
<div class="dropmenu2">
<a href="art/donate.html">
<img src="images/buttons/donatebutton.gif" class="button"></a>
<div class="dropmenu2-content">
<a href="comissions/comissions.html">
<img src="images/buttons/comissionsbutton.gif" class="button dropbutton"></a>
</div>
</div>
<a href="guestbook/guestbook.html">
<img src="images/buttons/guestbookbutton.gif" class="button"></a>
<div class="dropmenu3">
<a href="art/about.html">
<img src="images/buttons/aboutbutton.gif" class="button"></a>
<div class="dropmenu3-content">
<a href="https://junessai.github.io/Old-JuneSSai.net-Archive/" target="_blank">
<img src="images/buttons/oldsitebutton.gif" class="button dropbutton"></a>
<a href="changelog/changelog.html">
<img src="images/buttons/changelogbutton.gif" class="button dropbutton"></a>
</div>
</div>
`;
document.querySelector('#buttoncontainer').insertAdjacentHTML('beforeend', headerContent);
test.js
let headerContent = `
<img src="images/test.png">
`;
document.querySelector('#test').insertAdjacentHTML('beforeend', headerContent);

If you have multiple JavaScript files, they all share the same global namespace.
Because your global variable headerContent has already been declared in menu.js, test.js cannot share the same global variable name.
You could rename headerContent in one of the files to a different name, such as menuHeaderContent and testHeaderContent, to differentiate the two variables.
Or you could put everything inside of {} so any global variables you create are not within the actual global scope:
{
let headerContent = `
<a href="index.html">
<img src="images/buttons/homebutton.gif" class="button"></a>
<a href="blog/blogmain.html">
<img src="images/buttons/blogbutton.gif" class="button"></a>
<a href="art/artmain.html">
<img src="images/buttons/artbutton.gif" class="button"></a>
<div class="dropmenu1">
<a href="art/fanartmain.html">
<img src="images/buttons/fanartbutton.gif" class="button"></a>
<div class="dropmenu1-content">
<a href="links/links.html">
<img src="images/buttons/linksbutton.gif" class="button dropbutton"></a>
</div>
</div>
<div class="dropmenu2">
<a href="art/donate.html">
<img src="images/buttons/donatebutton.gif" class="button"></a>
<div class="dropmenu2-content">
<a href="comissions/comissions.html">
<img src="images/buttons/comissionsbutton.gif" class="button dropbutton"></a>
</div>
</div>
<a href="guestbook/guestbook.html">
<img src="images/buttons/guestbookbutton.gif" class="button"></a>
<div class="dropmenu3">
<a href="art/about.html">
<img src="images/buttons/aboutbutton.gif" class="button"></a>
<div class="dropmenu3-content">
<a href="https://junessai.github.io/Old-JuneSSai.net-Archive/" target="_blank">
<img src="images/buttons/oldsitebutton.gif" class="button dropbutton"></a>
<a href="changelog/changelog.html">
<img src="images/buttons/changelogbutton.gif" class="button dropbutton"></a>
</div>
</div>
`;
document.querySelector('#buttoncontainer').insertAdjacentHTML('beforeend', headerContent);
}

Index after using the gallery in modal the first time is off?

I have some code I found that would help make a webpage have a grid of photos and then once clicked they would be able to have a lightbox modal using bootstrap to go through all the photos. However once getting out of the modal and going to a different one by clicking on it would result in them going to the first picture in the column.
HTML
Grid One:
<section id="im-grid" class="image-grid im-image-grid">
<div class="container-xxl">
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_1.jpeg" class="img-fluid" alt="Add Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_2.jpeg" class="img-fluid" alt="Edit Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_3.jpeg" class="img-fluid" alt="Find Parts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_4.jpeg" class="img-fluid" alt="Show Parts">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_5.jpeg" class="img-fluid"
alt="Part Details">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_6.jpeg" class="img-fluid"
alt="Keyboard Shortcuts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_7.jpeg" class="img-fluid"
alt="Part History Part One">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_8.jpeg" class="img-fluid"
alt="Part History Part Two">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_9.jpeg" class="img-fluid"
alt="Export Parts Part One">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_10.jpeg" class="img-fluid"
alt="Export Parts Part Two">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/IMGallery_11.jpeg" class="img-fluid"
alt="Export Parts Part Three">
</a>
</figure>
</div>
</div>
</div>
<div class="modal lightbox-modal" id="im-lightbox-modal" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
aria-label="Close"></button>
<div class="modal-body im-modal-body">
<div class="container-fluid im-container-fluid p-0">
</div>
</div>
</div>
</div>
</div>
</section>
Grid Two:
<section id="sm-grid" class="image-grid sm-image-grid">
<div class="container-xxl">
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_1.jpeg" class="img-fluid" alt="Add Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_2.jpeg" class="img-fluid" alt="Edit Part">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_3.jpeg" class="img-fluid" alt="Find Parts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_4.jpeg" class="img-fluid" alt="Show Parts">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_5.jpeg" class="img-fluid" alt="Part Details">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_6.jpeg" class="img-fluid"
alt="Keyboard Shortcuts">
</a>
</figure>
</div>
</div>
<div class="row gy-4">
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_7.jpeg" class="img-fluid"
alt="Part History Part One">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_8.jpeg" class="img-fluid"
alt="Part History Part Two">
</a>
</figure>
</div>
<div class="col-12 col-sm-6 col-md-4">
<figure>
<a class="d-block" href="">
<img width="1920" height="1280" src="images/SMGallery_9.jpeg" class="img-fluid"
alt="Export Parts Part One">
</a>
</figure>
</div>
</div>
</div>
<div class="modal lightbox-modal" id="sm-lightbox-modal" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
aria-label="Close"></button>
<div class="modal-body sm-modal-body">
<div class="container-fluid sm-container-fluid p-0">
</div>
</div>
</div>
</div>
</div>
</section>
The JavaScript:
Grid One:
const imImageGrid = document.querySelector(".im-image-grid");
const imLinks = imImageGrid.querySelectorAll("a");
const imImgs = imImageGrid.querySelectorAll("img");
const imLightboxModal = document.getElementById("im-lightbox-modal");
const imbsModal = new bootstrap.Modal(imLightboxModal);
const imModalBody = document.querySelector(".im-modal-body .im-container-fluid");
for (const link of imLinks) {
link.addEventListener("click", function (e) {
e.preventDefault();
const imCurrentImg = link.querySelector("img");
const imLightboxCarousel = document.getElementById("im-lightboxCarousel");
if (imLightboxCarousel) {
const imParentCol = link.parentElement.parentElement;
const imIndex = [...imParentCol.parentElement.children].indexOf(imParentCol);
const imbsCarousel = new bootstrap.Carousel(imLightboxCarousel);
imbsCarousel.to(imIndex);
} else {
imCreateCarousel(imCurrentImg);
}
imbsModal.show();
});
}
function imCreateCarousel(img) {
const imMarkup = `
<div id="im-lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
${imCreateSlides(img)}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#im-lightboxCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#im-lightboxCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
`;
imModalBody.innerHTML = imMarkup;
}
function imCreateSlides(img) {
let imMarkup = "";
const imCurrentImgSrc = img.getAttribute("src");
for (const img of imImgs) {
const imImgSrc = img.getAttribute("src");
const imImgAlt = img.getAttribute("alt");
imMarkup += `
<div class="carousel-item${imCurrentImgSrc === imImgSrc ? " active" : ""}">
<img src=${imImgSrc} alt=${imImgAlt}>
</div>
`;
}
return imMarkup;
}
Grid Two:
const smImageGrid = document.querySelector(".sm-image-grid");
const smLinks = smImageGrid.querySelectorAll("a");
const smImgs = smImageGrid.querySelectorAll("img");
const smLightboxModal = document.getElementById("sm-lightbox-modal");
const bsSmModal = new bootstrap.Modal(smLightboxModal);
const smModalBody = document.querySelector(".sm-modal-body .sm-container-fluid");
for (const link of smLinks) {
link.addEventListener("click", function (e) {
e.preventDefault();
const smCurrentImg = link.querySelector("img");
const smLightboxCarousel = document.getElementById("sm-lightboxCarousel");
if (smLightboxCarousel) {
const smParentCol = link.parentElement.parentElement;
const smIndex = [...smParentCol.parentElement.children].indexOf(smParentCol);
const bsSmCarousel = new bootstrap.Carousel(smLightboxCarousel);
bsSmCarousel.to(smIndex);
} else {
smCreateCarousel(smCurrentImg);
}
bsSmModal.show();
});
}
function smCreateCarousel(img) {
const smMarkup = `
<div id="sm-lightboxCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-interval="false">
<div class="carousel-inner">
${smCreateSlides(img)}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#sm-lightboxCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#sm-lightboxCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
`;
smModalBody.innerHTML = smMarkup;
}
function smCreateSlides(img) {
let smMarkup = "";
const smCurrentImgSrc = img.getAttribute("src");
for (const img of smImgs) {
const smImgSrc = img.getAttribute("src");
const smImgAlt = img.getAttribute("alt");
smMarkup += `
<div class="carousel-item${smCurrentImgSrc === smImgSrc ? " active" : ""}">
<img src=${smImgSrc} alt=${smImgAlt}>
</div>
`;
}
return smMarkup;
}
I would just like to be able to exit out of a modal of the photo and then if needed go to a different photo by clicking out of it. Im new to stack overflow so I apologize if the code is

Scrolling is locking on mobile devices

I got an issue with my website when I am trying to scroll website on mobile devices sometimes its locking and even when you slide finger on device website is not moving properly. On desktop scrolling working fine. I tried to find the solution but cant figure out what is wrong.
You can test it with developers tools on 375 px resolution or in mobile devices here
Bootstrap 4 template: NOW UI Kit by Creative Tim
I thought problem is with cookie script but when I disable it by commenting in HTML problem is not solving. I tried to comment parts of my JS file but still not working.
There is my JS Script:
var selectedClass = "";
$(".filter").click(function () {
selectedClass = $(this).attr("data-rel");
$("#gallery").fadeTo(100, 0.1);
$("#gallery div").not("." + selectedClass).fadeOut().removeClass('animation');
setTimeout(function () {
$("." + selectedClass).fadeIn().addClass('animation');
$("#gallery").fadeTo(300, 1);
}, 300);
});
$( "#scrollDown" ).click(function() {
$( "html, body" ).animate({
scrollTop: 600
}, 600, function() {
// Animation complete.
});
});
//Gallery Animations
baguetteBox.run('.grid-gallery', { animation: 'slideIn' });
//Anchor Function
function scrollToAnchor(aid){
let aTag = $("a[name='"+ aid +"']");
$('html,body').animate({scrollTop: aTag.offset().top}, 900);
}
//Menu Anchors Animations
$("#lexuslink").click(function() {
scrollToAnchor('lexus');
});
$("#fiatlink").click(function() {
scrollToAnchor('fiat');
});
$("#merclink").click(function() {
scrollToAnchor('merc');
});
$("#homelink").click(function(){
$('html, body').animate({scrollTop: 0}, 900)
});
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
let hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
window.location.hash = hash;
});
}
});
});
//E-mail Validation Function
$(".test").hide();
function validateForm() {
const name = document.getElementById('name').value;
if (name == "") {
document.querySelector('.status').innerHTML = "Wypełnij wszystkie pola.";
return false;
}
const email = document.getElementById('email').value;
if (email == "") {
document.querySelector('.status').innerHTML = "Wpisz swój adres email";
return false;
} else {
const re = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (!re.test(email)) {
document.querySelector('.status').innerHTML = "Wpisz poprawny e-mail.";
return false;
}
}
const subject = document.getElementById('subject').value;
if (subject == "") {
document.querySelector('.status').innerHTML = "Wpisz temat wiadomości.";
return false;
}
const message = document.getElementById('message').value;
if (message == "") {
document.querySelector('.status').innerHTML = "Message cannot be empty";
return false;
}
document.querySelector('.status').innerHTML = "Wysyłanie...";
document.getElementById('contact-form').submit();
}
There is my HTML File:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="samochody,do,ślubu,wynajem,lexus,fiat,zabytkowe,klasyczne,mercedes,fiat">
<meta name="author" content="Daniel Mydlarz">
<title>Samochody do ślubu - Oświęcim i okolice</title>
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/now-ui-kit.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="sass/baguetteBox.min.css">
<link rel="stylesheet" type="text/css" href="sass/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link href="https://fonts.googleapis.com/css?family=Mansalva|Princess+Sofia&display=swap&subset=latin-ext"
rel="stylesheet">
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="code.js"></script>
</head>
<body class="landing-page sidebar-collapse">
<nav class="navbar navbar-expand-lg bg-primary fixed-top navbar-transparent" color-on-scroll="300">
<div class="container">
<div class="dropdown button-dropdown d-lg-none">
<a href="#pablo" class="dropdown-toggle" id="navbarDropdown" data-toggle="dropdown">
<span class="button-bar"></span>
<span class="button-bar"></span>
<span class="button-bar"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-header">MENU</a>
<a class="dropdown-item" href="#lexus">Samochody</a>
<a class="dropdown-item" href="#galeria">Galeria</a>
<a class="dropdown-item" href="#oferta">Oferta</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#kontakt">Kontakt</a>
</div>
</div>
<div class="navbar-translate">
<a class="align-baseline nav-link d-lg-none d-xl-none d-md-none float-left" rel="tooltip"
title="Zadzwon teraz aby dowiedziec sie wiecej" data-placement="bottom" href="tel:792-877-785"
target="_blank">
<i class="fa fa-phone" style="font-size:34px;color: white"></i>
</a>
<button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse"
data-target="#navigation" aria-controls="navigation-index" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-bar top-bar"></span>
<span class="navbar-toggler-bar middle-bar"></span>
<span class="navbar-toggler-bar bottom-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse fx-start" id="navigation"
data-nav-image="./assets/img/blurred-image-1.jpg">
<ul class="navbar-nav">
<li class="nav-item">
HOME
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="dropdownbtn" href="" id="navbarDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Samochody
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuMenu">
<a href="#lexus" class="dropdown-item" id="lexuslink" name="itmlexus"
type="button">Lexus</a>
Fiat
<a href="#merc" class="dropdown-item" id="merclink" name="itmmerc"
type="button">Mercedes</a>
</div>
</li>
<li class="nav-item">
Galeria
</li>
<li class="nav-item">
Oferta
</li>
<li class="nav-item">
Kontakt
</li>
<li class="nav-item position-right10">
<a class="nav-link" rel="tooltip" title="Zadzwon teraz aby dowiedziec sie wiecej"
data-placement="bottom" href="tel:792-877-785" target="_blank">
<i class="fa fa-phone" style="font-size:34px;color: white"></i>
</a>
</li>
<li class="nav-item position-right">
<a class="nav-link" rel="tooltip" title="Sprawdź nas na Facebook'u" data-placement="bottom"
href="https://www.facebook.com/Samochody-do-Ślubu-Oświęcim-i-okolice-586389625167858"
target="_blank">
<i class="fa fa-facebook-official" style="font-size:34px;color:white"></i>
</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- End Navbar -->
<div class="wrapper">
<div class="container-fluid p-0" style="overflow:hidden">
<div class="wrapper">
<div class="page-header page-header-small">
<div class="page-header-image" data-parallax="true"
style="background-image: url('img/slub-bg2.jpg')">
</div>
<div class="content-center welcome-text">
<div class="container-fluid landing-text">
<h1 class="h1-respononsive h1-title weird-font">Nowoczesne i klasyczne samochody do ślubu
</h1>
<h3 class="h3-responsive h3-title">Pozwól sobie na odrobinę luksusu...
</h3>
<i class="fa fa-angle-double-down fa-4x arrow-down pb-2" id="scrollDown"
aria-hidden="true"></i>
</div>
</div>
</div>
<main>
<section>
<a name="lexus"></a>
<div class="section pt-2 section-about-us">
<div class="container">
<div class="row" id="lexus">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Nowoczesny Lexus</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/bg-2.jpg" alt="Lexus" class="img-fluid">
</div>
</div>
</div>
<a name="fiat" />
<div class="row" id="fiat">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Zabytkowy Fiat 126p</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/fiat1.jpg" alt="Fiat 126p" class="img-fluid">
</div>
</div>
</div>
<a name="merc" />
<div class="row" id="merc">
<div class="col-md-8 ml-auto mr-auto text-center">
<h2 class="h2-responsive
font-weight-bold title my-4 border-top border-bottom py-2">
Klasyczny Mercedes</h2>
<div class="container-lexus-photo pb-4">
<img src="./img/merc1.jpg" alt="Mercedes" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- GALERIA -->
<h2 class="h2-responsive font-weight-bold text-center border-top border-bottom py-2" id="galeria">
Galeria
</h2>
<section class="gallery-block grid-gallery">
<div class="container">
<div class="btn-group-ctn">
<button type="button" class="btn btn-info filter" data-rel="all">Wszystkie</button>
<button type="button" class="btn btn-info filter" data-rel="1">Lexus</button>
<button type="button" class="btn btn-info filter" data-rel="3">Mercedes</button>
<button type="button" class="btn btn-info filter" data-rel="2">Fiat 126p</button>
</div>
<div class="row gallery" id="gallery">
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/1.jpg">
<img class="img-fluid image scale-on-hover" src="./img/1.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/2.jpg">
<img class="img-fluid image scale-on-hover" src="./img/2.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/3.jpg">
<img class="img-fluid image scale-on-hover" src="./img/3.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/4.jpg">
<img class="img-fluid image scale-on-hover" src="./img/4.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/5.jpg">
<img class="img-fluid image scale-on-hover" src="./img/5.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/6.jpg">
<img class="img-fluid image scale-on-hover" src="./img/6.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/7.jpg">
<img class="img-fluid image scale-on-hover" src="./img/7.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 1">
<a class="lightbox" href="./img/8.jpg">
<img class="img-fluid image scale-on-hover" src="./img/8.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat01.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat01.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat02.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat02.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat03.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat03.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat04.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat04.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat05.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat05.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 2">
<a class="lightbox" href="./img/fiat06.jpg">
<img class="img-fluid image scale-on-hover" src="./img/fiat06.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc2.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc2.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc3.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc3.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc4.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc4.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc5.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc5.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc6.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc6.jpg">
</a>
</div>
<div class="col-md-6 col-lg-4 item all pics animation 3">
<a class="lightbox" href="./img/merc7.jpg">
<img class="img-fluid image scale-on-hover" src="./img/merc7.jpg">
</a>
</div>
</div>
</div>
</section>
</main>
</div>
<h2 id="oferta" class="h2-responsive font-weight-bold text-center border-top border-bottom py-2 my-5">
Oferta</h2>
<section class="pricing py-5">
<div class="container">
<div class="row center-offer">
<!-- Free Tier -->
<div class="col-lg-8">
<div class="card mb-5 mb-lg-0">
<div class="card-body">
<h6 class="card-price text-center"><span class="period">od</span> 399 <span
class="period">zł</span>
</h6>
<ul class="fa-ul">
<h4 class="text-muted mt-1">Cena zawiera:</h4>
<li>
Wybrany samochód</li>
<li>
Dojazd do domu
Pani młodej oraz Pana młodego</li>
<li>
Dojazd do kościoła
pary młodej
</li>
<li>
Przejazd na
weselną sale
</li>
</ul>
<a href="#kontakt" class="btn btn-block btn-primary text-uppercase">Zapytaj o
wolne terminy</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mb-4 pt-5 px-1" id="kontakt">
<div class="container">
<!--Section heading-->
<h2 class="h2-responsive font-weight-bold text-center my-4 border-top border-bottom py-2">
Skontaktuj się z nami</h2>
<!--Section description-->
<p class="text-center w-responsive mx-auto mb-5">Masz jakieś pytania? Chcesz dobrać indywidualną
ofertę?
</p>
<div class="row">
<!--Grid column-->
<div class="col-md-9 mb-md-0 mb-5 contact-form">
<form id="contact-form" name="contact-form" action="mail.php" method="POST">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="name" name="name" class="form-control">
<label for="name" class="">Twoje imię</label>
</div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6">
<div class="md-form mb-0">
<input type="text" id="email" name="email" class="form-control">
<label for="email" class="">Twój e-mail</label>
</div>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<div class="col-md-12">
<div class="md-form mb-0">
<input type="text" id="subject" name="subject" class="form-control">
<label for="subject" class="">Temat</label>
</div>
</div>
</div>
<!--Grid row-->
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12">
<div class="md-form">
<textarea type="text" id="message"
placeholder="Witam, interesuję mnie wynajem samochodu w terminie ..."
name="message" rows="2" class="form-control md-textarea"></textarea>
<label for="message">Twoja wiadomość</label>
</div>
</div>
</div>
<!--Grid row-->
</form>
<div class="text-center text-md-left">
<a class="btn btn-submit" onclick="validateForm()">Wyślij</a>
</div>
<div class="status"></div>
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-3 text-center kontakt-info">
<ul class="list-unstyled mb-0">
<li>
<i class="fa fa-map-marker fa-2x" aria-hidden="true"></i>
<p>32-600 Oświęcim, <br>
ul. Zagrodowa 31B</p>
</li>
<li><i class="fa fa-phone mt-4 fa-2x" style="color: black"></i>
<p>+48 792-877-785</p>
</li>
<li>
<i class="fa fa-envelope mt-4 fa-2x" aria-hidden="true" style="color: black"></i>
<p>kodiaqrentacar#gmail.com</p>
</li>
</ul>
</div>
<!--Grid column-->
</div>
</div>
</section>
</div>
<!-- Plugins -->
<script type="text/javascript"
src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js?theme=white&always=1"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/baguettebox.js/1.11.0/baguetteBox.js" async></script>
<!-- Core JS Files -->
<script src="assets/js/core/jquery.min.js" type="text/javascript"></script>
<script src="assets/js/core/popper.min.js" type="text/javascript"></script>
<script src="assets/js/core/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.6/js/mdb.min.js"></script>
<!-- Plugin for Switches, full documentation here: http://www.jque.re/plugins/version3/bootstrap.switch/ -->
<script src="assets/js/plugins/bootstrap-switch.js"></script>
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/ -->
<script src="assets\js\plugins/nouislider.min.js" type="text/javascript"></script>
<!-- Plugin for the DatePicker, full documentation here: https://github.com/uxsolutions/bootstrap-datepicker -->
<script src="assets/js/plugins/bootstrap-datepicker.js" type="text/javascript"></script>
<!-- Google Maps Plugin -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script>
<!-- Control Center for Now Ui Kit: parallax effects, scripts for the example pages etc -->
<script src="assets/js/now-ui-kit.js?v=1.3.0" type="text/javascript"></script>
</body>
</html>
Maybe someone had similar problem, hope to see some tips from you guys. If you need another script just tell me hope we solve this together.
Best Regards Daniel.

you need to remove below css code form your css file.
.wrapper {
overflow-x: hidden;
}
and also need to update your font size for the element #kontakt p in media query of 576px right now it is 1.1rem you need to reduce it 0.9rem.
I hope after done this two minor changes your scrolling problem will be solved.

fileinput-preview get details from image

I using bootstrap-fileinput to load an image to my project. Is it possible to get the image details like the size, resolution, etc?
My code is:
<div class="col-md-4">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" >
<img src="<?php echo $src; ?>" style="width:200px;height:150px" alt=""/>
</div>
<div class="fileinput-preview fileinput-exists thumbnail" id="imagem" style="max-width: 200px; max-height: 150px;">
</div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new">Escolher imagem </span>
<span class="fileinput-exists">Alterar </span>
<input id="imagem" type="file" name="...">
</span>
<a id="btnRemoverImagemCapa" href="#" class="btn red fileinput-exists" data-dismiss="fileinput"> Remover </a>
</div>
</div>

any idea to transfer this code to php or js using while or something? [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I have this code and I would like to transfer it to php or js using whiles or something like that.
<div class="contenedor canales">
<div class="thumb">
<a href="Accion.html">
<img title="Accion" src="img/thumbs/megamovieshd.jpg" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="Accion" href="Accion.html">Accion</a>
</h4>
</div>
<div class="thumb">
<a href="Bob-Esponja.html">
<img title="Bob Esponja" src="img/thumbs/mega_bobesponja.jpg" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="Bob Esponja" href="Bob-Esponja.html">Bob Esponja</a>
</h4>
</div>
<div class="thumb">
<a href="Caballeros-Del-Zodiaco.html">
<img title="Caballeros Del Zodiaco" src="img/thumbs/mega_bot.jpg" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="Caballeros Del Zodiaco" href="Caballeros-Del-Zodiaco.html">Caballeros Del Zodiaco</a>
</h4>
</div>
<div class="thumb">
<a href="Disney-Pixar.html">
<img title="Disney & Pixar" src="img/thumbs/mega_kids.jpg" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="Disney & Pixar" href="Disney-Pixar.html">Disney & Pixar</a>
</h4>
</div>
<div class="thumb">
<a href="Dragon-Ball-Z-GT.html">
<img title="Dragon Ball Z & GT" src="img/thumbs/mega_animes.jpg" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="Dragon Ball Z & GT" href="Dragon-Ball-Z-GT.html">Dragon Ball Z & GT</a>
</h4>
</div>
<div class="thumb">
<a href="Drama-y-Romance.html">
<img title="Drama Y Romance" src="img/thumbs/mega_movieshd.jpg" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="Drama & Romance" href="Drama-y-Romance.html">Drama & Romance</a>
</h4>
</div>
<div class="thumb">
<a href="El-Chavo-Del-8.html">
<img title="El Chavo Del 8" src="img/thumbs/mega_chavo.jpg" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="El Chavo Del 8" href="El-Chavo-Del-8.html">El Chavo Del 8</a>
</h4>
</div>
<div class="thumb">
<a href="Familia-Peluche.html">
<img title="Familia Peluche" src="img/thumbs/mega_familia.jpg" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="Familia Peluche" href="Familia-Peluche.html">Familia Peluche</a>
</h4>
</div>
<div class="thumb">
<a href="Los-Simpson.html">
<img title="Simpson" src="img/thumbs/mega_simpson.jpg" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="Simpson" href="Los-Simpson.html">Los Simpson</a>
</h4>
</div>
<div class="thumb">
<a href="Malcolm.html">
<img title="Malcolm" src="img/thumbs/megamalcolm.jpg" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="Malcolm" href="Malcolm.html">Malcolm</a>
</h4>
</div>
<div class="thumb">
<a href="Pokemon.html">
<img title="Pokemon" src="img/thumbs/mega_animeshd.jpg" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="Pokemon" href="Pokemon.html">Pokemon</a>
</h4>
</div>
<div class="thumb">
<a href="SouthPark.html">
<img title="SouthPark" src="img/thumbs/mega_revolucionhd.jpg" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="SouthPark" href="SouthPark.html">SouthPark</a>
</h4>
</div>
<div class="thumb">
<a href="Terror.html">
<img title="Terror" src="img/thumbs/mega_extremo.jpg" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="Terror" href="Terror.html">Terror</a>
</h4>
</div>
<div class="thumb">
<a href="Vecinos.html">
<img title="Vecinos" src="img/thumbs/mega_vecinos.jpg" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="Vecinos" href="Vecinos.html">Vecinos</a>
</h4>
</div>
</div>

Here is a PHP example
<?php
$arr_data['Accion'] = array('picture' => 'img/thumbs/megamovieshd.jpg', 'html' => 'Accion.html');
$arr_data['Bob Esponja'] = array('picture' => 'img/thumbs/mega_bobesponja.jpg', 'html' => 'Bob-Esponja.html');
?>
<div class="contenedor canales">
<?php foreach($arr_data AS $name => $arr_details){ ?>
<div class="thumb">
<a href="<?php echo $arr_details['html']; ?>">
<img title="<?php echo $name; ?>" src="<?php echo $arr_details['picture']; ?>" alt=""/>
</a>
<h4 class="txt-oculto">
<a title="<?php echo $name; ?>" href="<?php echo $arr_details['html']; ?>"><?php echo $name; ?></a>
</h4>
</div>
<?php } ?>
</div>

I will provide you a JavaScript solution. You can create an array, which will store all your thumbs, and then it will create this list dynamically:
var thumbs = [
{
'href': 'Accion.html',
'image': 'img/thumbs/megamovieshd.jpg',
'title': 'Accion'
},
{
'href': 'Bob-Esponja.html',
'image': 'img/thumbs/mega_bobesponja.jpg',
'title': 'Bob-Esponja'
}
];
thumbs.forEach(function(thumb) {
$("<div/>").addClass('thumb')
.append(
$('<a/>').attr('href', thumb.href)
.append(
$("<img/>").attr({
src: thumb.image,
title: thumb.title,
alt: ''
})
)
)
.append(
$('<h4/>').addClass('txt-oculto')
.append(
$("<a/>").attr({
title: thumb.title,
href: thumb.href
})
)
)
.appendTo('.canales');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contenedor canales"></div>
However, JavaScript solution is incorrect. It is definitely should be generated at server-side using PHP. I won't provide a solution for this.
With the help of JS solution, try to implement PHP solution yourself.