Атрибут id
должен быть уникальным на странице. Когда вы выбираете элемент с помощью селектора идентификаторов, он получает только первый элемент в дереве DOM.
Замените это классом. Также у вас есть 3 галереи изображений в вашем фрагменте, и вам нужно будет прикрепить функциональность для изображений в каждой галерее. То, как вы это написали, учитывает все изображения, не относящиеся к определенной галерее.
//JS CODE
const imageContainers = document.querySelectorAll(".imgs");
const opacity = 0.7;
// Set the opacity for first image in each container
imageContainers.forEach((imageContainer) => {
imageContainer.querySelectorAll('.imgs img')[0].style.opacity = opacity;
});
// attach the click event for all the images inside the containers
imageContainers.forEach((imageContainer) => imageContainer.addEventListener("click", imgClick));
function imgClick(e) {
let currentContainer = e.currentTarget;
let currentContainerImages = currentContainer.querySelectorAll('img');
let currentImage = currentContainer.parentNode.querySelector('.current');
// update opacity for each image in container
currentContainerImages.forEach(img => (img.style.opacity = 1));
// Change current image to src of clicked image
currentImage.src = e.target.src;
// Add fade in class
currentImage.classList.add("fade-in");
// Remove fade-in class after .5 seconds
setTimeout(() => currentImage.classList.remove("fade-in"), 500);
// Change the opacity to opacity var
e.target.style.opacity = opacity;
}
<section id="portfolioProjects" class="section section-a">
<div class="container">
<div class="row animate-box">
<div class="col-md-8 col-md-offset-2 text-center fh5co-heading">
<h2 style="color: #585555db">
Portfolio
</h2>
<p class="psub-title-One">
some text
</p>
</div>
</div>
<ul class="nav nav-tabs animate-box">
<li class="active">
<a data-toggle="tab" href="#home">Simple WebSite</a>
</li>
<li><a data-toggle="tab" href="#menu1">Design</a></li>
<li><a data-toggle="tab" href="#menu2">Code Snippets</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<br />
<div class="animate-box">
<h2>Fully Functional Responsive Website</h2>
<p class="about-text">
some text
</p>
</div>
<iframe src="https://codepen.io/dasilvabrunotexas/" scrolling="auto" height="900" width="100%" class="animate-box"></iframe>
<!-- Hide Image Gallery on Big Screens-->
<!-- Hide Image Gallery on Big Screens-->
<div class="container-gallery animate-box ">
<div class="main-img">
<img src="https://www.placecage.com/200/300" alt="Image1" class="current" />
</div>
<div class="imgs">
<div class="img-One animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-two animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-three animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-four animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-five animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-six animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-seven animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-eigth animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
</div>
</div>
<!-- END Hide Image Gallery on Big Screens-->
</div>
<!-- END First Portfolio Menu-->
<div id="menu1" class="tab-pane fade">
<br />
<h2>Graphic & Web Design Projects</h2>
<p class="about-text">
some text
</p>
<!-- Hide Image Gallery on Big Screens-->
<!-- Hide Image Gallery on Big Screens-->
<div class="container-gallery animate-box ">
<div class="main-img">
<img src="https://www.placecage.com/200/300" alt="Image1" class="current" />
</div>
<div class="imgs">
<div class="img-One animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-two animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-three animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-four animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-five animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-six animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-seven animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-eigth animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
</div>
</div>
<!-- END Hide Image Gallery on Big Screens-->
</div>
<!-- END First Menu-->
<div id="menu2" class="tab-pane fade">
<br />
<div class="animate-box">
<h2>Tic-Tac-Toe Game</h2>
<p class="about-text">
SOME TEXT
<a target="_blank" href="#"><i style="color:#ffcc5c" class="fab fa-fly"></i>
</a> to see more Projects on CodePen.
</p>
</div>
<iframe src="#" height="900" width="95%" class="animate-box"></iframe>
<!-- Hide Image Gallery on Big Screens-->
<div class="container-gallery animate-box ">
<div class="main-img">
<img src="https://www.placecage.com/200/300" alt="Image1" class="current" />
</div>
<div class="imgs">
<div class="img-One animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-two animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-three animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-four animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-five animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-six animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-seven animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
<div class="img-eigth animate-box " data-animate-effect="fadeIn">
<img src="https://www.placecage.com/200/300" />
</div>
</div>
</div>
<!-- END Hide Image Gallery on Big Screens-->
</div>
</div>
</div>
<script src="../dist/js/image-gallery.js"></script>
</section>
<br />
Если я понимаю его правильно, , этот отчет об ошибках указывает, что это в настоящее время не возможно.
Это является, вероятно, лучшим, Вы собираетесь добраться:
setUndecorated(true);
getRootPane().setWindowDecorationStyle(JRootPane.NONE);
Это удалит всю строку заголовка, Java действительно не определяет способ удалить отдельные компоненты редактирования строки заголовка
:
может быть путь, проверить эти потоки: