I have image folders that expand when clicked on to view the whole album. I've been able to make the first album work, but I cant seem to get the active state to carry over to the other albums.
My JavaScript knowledge is quite limited so I'm unsure where I'm going wrong with this, but the goal here is to have a grid showcasing thumbnails for different image collections and when a collection is clicked on, the modal will popup and dynamically display the collection of images that was clicked on.
const modal = document.querySelector(".modal");
const buttons = document.querySelectorAll("[data-carousel-button]");
const carousel = document.querySelector(".carousel");
const closeButton = document.querySelector(".close");
const gridImages = document.querySelectorAll(".grid-img img");
const slide = document.querySelector(".slide");
const blueLotusFineArt = document.querySelector(".one");
const blueLotusModal = document.querySelector(".blue-lotus");
const greenWomenFineArt = document.querySelector(".two");
const greenWomenModal = document.querySelector(".green-women");
buttons.forEach((button) => {
button.addEventListener("click", () => {
const offset = button.dataset.carouselButton === "next" ? 1 : -1;
const slides = button
.closest("[data-carousel]")
.querySelector("[data-slides]");
const activeSlide = slides.querySelector("[data-active]");
let newIndex = [...slides.children].indexOf(activeSlide) + offset;
if (newIndex < 0) newIndex = slides.children.length - 1;
if (newIndex >= slides.children.length) newIndex = 0;
slides.children[newIndex].dataset.active = true;
delete activeSlide.dataset.active;
});
});
// select image from grid
// only display selected gallery
gridImages.forEach((gridImage) => {
gridImage.addEventListener("click", () => {
modal.classList.add("open");
closeButton.classList.add("open");
carousel.style.display = "block";
});
});
blueLotusFineArt.addEventListener("click", () => {
blueLotusModal.style.display = "block";
});
greenWomenFineArt.addEventListener("click", () => {
greenWomenModal.style.display = "block";
slide.style.opacity = "1";
});
closeButton.addEventListener("click", () => {
carousel.style.display = "none";
closeButton.classList.remove("open");
modal.classList.remove("open");
blueLotusModal.style.display = "none";
greenWomenModal.style.display = "none";
});
section {
min-height: 100vh;
}
img,
picture {
max-width: 100%;
display: block;
}
.flex {
display: flex;
gap: 4rem;
}
#fine-art {
position: relative;
z-index: 2;
background-color: var(--clr-primary);
min-height: auto;
}
.container {
padding-inline: 4em;
margin-inline: auto;
max-width: 120rem;
}
.wrapper {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(100px, auto);
gap: 2rem;
padding: 4rem 0;
}
.grid {
display: grid;
gap: var(--gap, 1rem);
}
.modal {
opacity: 0;
position: fixed;
z-index: 10;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(43, 43, 43, 0.5);
transition: all 300ms ease-in-out;
pointer-events: none;
backdrop-filter: blur(10px);
display: grid;
place-items: center;
}
.modal.open {
opacity: 1;
pointer-events: all;
}
.close {
position: fixed;
right: 32px;
top: 50px;
width: 50px;
height: 32px;
opacity: 0;
z-index: 20;
pointer-events: none;
transition: all 300ms ease-in-out;
cursor: pointer;
}
.close.open {
opacity: 1;
pointer-events: all;
}
.close:before,
.close:after {
position: absolute;
left: 15px;
content: " ";
height: 50px;
width: 5px;
background-color: var(--clr-primary);
}
.close:before {
transform: rotate(45deg);
}
.close:after {
transform: rotate(-45deg);
}
.blue-lotus,
.green-women {
display: none;
pointer-events: none;
}
.carousel {
width: 100vw;
height: 80vh;
position: absolute;
z-index: 10;
display: none;
}
.slide {
position: absolute;
inset: 0;
opacity: 0;
transition: 200ms opacity ease-in-out;
transition-delay: 200ms;
}
.slide > img {
height: 100%;
object-fit: contain;
object-position: center;
border-radius: 4px;
}
.slide[data-active] {
opacity: 1;
transition-delay: 0ms;
}
.carousel-button {
position: absolute;
background: none;
border: none;
font-size: 4rem;
top: 50%;
z-index: 11;
transform: translateY(-50%);
color: rgba(241, 242, 245, 0.5);
cursor: pointer;
border-radius: 0.25rem;
padding: 0 0.5rem;
background-color: rgba(43, 43, 43, 0.1);
}
.carousel-button:hover,
.carousel-button:focus {
color: rgba(241, 242, 245, 1);
background-color: rgba(43, 43, 43, 0.2);
}
.carousel-button.prev {
left: 1rem;
}
.carousel-button.next {
right: 1rem;
}
<section id="fine-art">
<div class="container fine-art">
<div class="wrapper grid">
<div class="grid-img one">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Blue Lotus</p>
</div>
<div class="grid-img two">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Green Women</p>
</div>
<div class="grid-img three">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Studio</p>
</div>
<div class="grid-img four">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Starlet</p>
</div>
<div class="grid-img five">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Portraits</p>
</div>
<div class="grid-img six">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Chameleon</p>
</div>
<div class="grid-img seven">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>De Kelders</p>
</div>
<div class="grid-img eight">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Elementals</p>
</div>
<div class="grid-img nine">
<img
src="https://source.unsplash.com/random"
alt="Fine Art"
width="450"
height="600"
decoding="async"
loading="lazy"
/>
<p>Mosaic</p>
</div>
</div>
</div>
</section>
<a class="close"></a>
<div class="modal">
<div class="carousel" data-carousel>
<button class="carousel-button next" data-carousel-button="next">
⇨
</button>
<button class="carousel-button prev" data-carousel-button="prev">
⇦
</button>
<ul class="blue-lotus" data-slides>
<li class="slide" data-active>
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 1"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 2"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 3"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 4"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 5"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Blue Lotus 6"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
</ul>
<ul class="green-women" data-slides>
<li class="slide" data-active>
<img
src="https://source.unsplash.com/random"
alt="Green Women 1"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Green Women 2"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
<li class="slide">
<img
src="https://source.unsplash.com/random"
alt="Green Women 3"
width="2100"
height="1400"
decoding="async"
loading="lazy"
/>
</li>
</ul>
</div>
</div>
Related
I am currently working on a college project for a clothing website, so what I want is that when the user hovers over a product image on the main feed, the product image keeps changing between 3-4 images of that product with a few milliseconds of transition.
this is my HTML code
<div class="imagebox">
<img src="../img/Mom Sarees/5pcs/A93A5321.JPG" alt="Saree no: A93A5321 ">
</div>
this is the CSS
.imagebox{
display: inline-block;}
.imagebox img{
margin-top: 20px;
height: 400px;
margin-right: 10px;}
Is there a way to do that using CSS or JS?
I've implemented an example by JS, I hope this will be helpful.
let intervalId;
let i = 0;
document.querySelectorAll('.product-images').forEach((poroduct) => {
const productImages = poroduct.querySelectorAll('img');
poroduct.addEventListener('mouseenter', function() {
fadeImg(productImages);
intervalId = setInterval(() => fadeImg(productImages), 1500);
});
poroduct.addEventListener('mouseleave', function() {
clearInterval(intervalId);
productImages[i].classList.remove('active');
productImages[0].classList.add('active');
i = 0;
});
});
function fadeImg(productImages) {
productImages[i].classList.remove('active');
i = (i + 1) % 4;
productImages[i].classList.add('active');
}
.container {
display: flex;
}
.imagebox {
position: relative;
flex: 1;
margin: 15px;
}
.imagebox img {
max-height: 200px;
max-width: 100%;
position: absolute;
opacity: 0;
transition: opacity 500ms;
}
.imagebox img.active {
opacity: 1;
}
<div class="container">
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/550000/?text=Image1" />
<img src="https://fakeimg.pl/350x200/005500/?text=Image2" />
<img src="https://fakeimg.pl/350x200/000055/?text=Image3" />
<img src="https://fakeimg.pl/350x200/005555/?text=Image4" />
</a>
</div>
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/000000/?text=Image1" />
<img src="https://fakeimg.pl/350x200/faaa22/?text=Image2" />
<img src="https://fakeimg.pl/350x200/885500/?text=Image3" />
<img src="https://fakeimg.pl/350x200/f500aa/?text=Image4" />
</a>
</div>
<div class="imagebox">
<a href="#" class="product-images">
<img class="active" src="https://fakeimg.pl/350x200/0000ff/?text=Image1" />
<img src="https://fakeimg.pl/350x200/00ff00/?text=Image2" />
<img src="https://fakeimg.pl/350x200/ff0000/?text=Image3" />
<img src="https://fakeimg.pl/350x200/ffff00/?text=Image4" />
</a>
</div>
</div>
I have the following code:
function seeMore() {
window.location("https://inderatech.com/index.html")
}
.see-more {
display: table;
margin-right: auto;
margin-left: auto;
}
.avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 10%;
overflow: hidden;
/* Subtle inner border */
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}
.avatar img {
height: 70%;
width: 70%;
z-index: 2;
/* Optionally add a drop shadow to the main image */
/* to make it feel "lifted" */
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}
.avatar .background {
position: absolute;
z-index: 1;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2);
filter: blur(13px) opacity(0.2);
}
/* Irrelevant styling */
.Mycontainer {
/* width: 200px; */
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-gap: 20px;
place-items: center;
width: 50%;
margin: 0 auto;
}
<div class="container">
<div class="section-title text-center">
<h2>Recent Clients</h2>
</div>
</div>
<div class="Mycontainer">
<a href="https://www.6ixangels.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
<img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
<img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
</div>
<a href="https://www.marcosbackyardswimming.ca" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./mss-transparent.png" class="background" />
<img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
<img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
<img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
<img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
</div>
<a href="https://app.cleaningassistant.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
<img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
</div>
</a>
<a href="https://www.beaniesforbaxter.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
<img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
</div>
</a>
<a href="https://6ixhottub.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
<img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
</div>
</a>
</div>
<br>
<br>
<div class="see-more">
<input type="submit" class="btn btn-defeault btn-send" value="See More">
</div>
On the desktop version, it looks okay, but if it is rendered on narrower screen, then you can see it is not horizontally centered on the page properly. What should I change in my CSS to center the div on the page?
Using flexbox allows you to automatically wrap the items. (See CSS under your “Irrelevant styling” comment.)
Using grid could seem to be good idea, because it is “modern”, but using grid usually makes sense when you want to create layout with multiple item types. Flexboxes are typically useful when you want to lay out something into columns or rows automatically without setting fixed column count.
.see-more {
display: table;
margin-right: auto;
margin-left: auto;
}
.avatar {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100px;
height: 100px;
border-radius: 10%;
overflow: hidden;
/* Subtle inner border */
box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}
.avatar img {
height: 70%;
width: 70%;
z-index: 2;
/* Optionally add a drop shadow to the main image */
/* to make it feel "lifted" */
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}
.avatar .background {
position: absolute;
z-index: 1;
pointer-events: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale(2);
filter: blur(13px) opacity(0.2);
}
/* Irrelevant styling */
.Mycontainer {
/* width: 200px; */
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
width: 50%;
margin: 0 auto;
}
<div class="container">
<div class="section-title text-center">
<h2>Recent Clients</h2>
</div>
</div>
<div class="Mycontainer">
<a href="https://www.6ixangels.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
<img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
<img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
</div>
<a href="https://www.marcosbackyardswimming.ca" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./mss-transparent.png" class="background" />
<img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
</div>
</a>
<div class="avatar">
<img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
<img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
<img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
</div>
<div class="avatar">
<img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
<img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
</div>
<a href="https://app.cleaningassistant.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
<img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
</div>
</a>
<a href="https://www.beaniesforbaxter.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
<img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
</div>
</a>
<a href="https://6ixhottub.com" target="_blank">
<div class="avatar">
<img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
<img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
</div>
</a>
</div>
<br>
<br>
<div class="see-more">
<input type="submit" class="btn btn-defeault btn-send" value="See More">
</div>
<script>
function seeMore() {
window.location("https://inderatech.com/index.html")
}
</script>
I'm struggling on changing gallery sets animation.
So far I've reached just a simple "fade" effect using opacity in #keyframes applied on .gallery-set.
I know it's a very common thing, but I can't find anything that would help me and make me understand how it works. I don't want any plugins or libraries for it. I just want to learn how to do that in pure html, css and js.
My goal is : When clicking on the menu, gallery set will change - current will slide to left and fadeout and new one will slide from right to place where previous were. (Hope I've explained it well :D ).
I've tried to add in #keyframes galleryfade transform : translateX, but I don't know what to do next.
I'm new to these things, learning JS at home on my own, so every bit of advise would be helpful to me. Thanks to everybody who will spend time on this.
CodePen link : https://codepen.io/pinnci/pen/YzydPdq
let menuLinks = document.querySelectorAll('.work-menu li a');
let gallerySets = document.querySelectorAll('.gallery-set');
gallerySets.forEach(set => {
set.classList.add('displayNone');
});
function showGallery(id){
gallerySets.forEach(set => {
if(set.id == id){
set.classList.remove('displayNone');
set.style.opacity = '1';
}else{
set.classList.add('displayNone');
set.style.opacity = '0';
}
});
menuLinks.forEach(link => {
if(link.id == id){
link.classList.add('selected');
}else{
link.classList.remove('selected');
}
});
}
menuLinks.forEach(item => {
item.addEventListener('click',function(e){
e.preventDefault();
showGallery(item.id);
});
});
showGallery('healthcare');
body{
margin: 0;
padding:0;
font-family: 'Roboto', sans-serif;
font-size: 100%;
}
.container{
width: 90%;
margin: 0 auto;
text-align: center;
}
.o-hidden{
overflow: hidden;
}
img{
max-width: 100%;
height: auto;
}
.works{
padding:1em 0 3em 0 ;
}
.works h2{
font-size: 2em;
}
.work-menu ul{
list-style: none;
padding-left: 0;
}
.work-menu a{
text-decoration: none;
color:black;
transition: 0.1s;
padding: 0.2em 0 ;
}
.selected{
border-bottom: 0.1em solid #f3bb28;
}
.work-menu li {
display: inline-block;
margin: 1em;
}
.work-menu a:hover{
color:#f3bb28;
}
.gallery-set img{
margin: 0.5em;
transition: 0.2s ease-in-out;
width: 20%;
}
.gallery-set img:hover{
transform: scale(1.03);
cursor: pointer;
}
/*GALLERY SETS*/
.displayNone{
display: none;
transition: opacity 1s ease-in-out;
}
.gallery-set{
animation: galleryFade .4s ease-in-out;
}
#keyframes galleryFade{
from{
opacity: 0.3;
}
to{
opacity: 1;
}
}
<div class="works">
<div class="container">
<h2>RECENT WORKS</h2>
<div class="work-menu">
<ul>
<li>Healthcare</li>
<li>Education</li>
<li>Goverment</li>
<li>Commercial</li>
</ul>
</div>
<div class="gallery-set" id="healthcare">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="1">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="2">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="3">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="4">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="5">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="6">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="7">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="8">
</div>
<div class="gallery-set" id="education">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="9">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="10">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="11">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="12">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="13">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="14">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="15">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="16">
</div>
<div class="gallery-set" id="goverment">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="17">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="18">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="19">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="20">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="21">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="22">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="23">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="24">
</div>
<div class="gallery-set" id="commercial">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="25">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="26">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="27">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="28">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="29">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="30">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="31">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="32">
</div>
</div>
</div>
I modified the code in order to execute the second part and show you the code so that you can modify it to your liking by adding other animations ;)
The main change was made by changing the animation with a lateral movement and 0 opacity as it already was.
let menuLinks = document.querySelectorAll('.work-menu li a');
let gallerySets = document.querySelectorAll('.gallery-set');
gallerySets.forEach(set => {
set.classList.add('displayNone');
});
function showGallery(id){
gallerySets.forEach(set => {
if(set.id == id){
set.classList.remove('displayNone');
set.style.opacity = '1';
}else{
set.classList.add('displayNone');
set.style.opacity = '0';
}
});
menuLinks.forEach(link => {
if(link.id == id){
link.classList.add('selected');
}else{
link.classList.remove('selected');
}
});
}
menuLinks.forEach(item => {
item.addEventListener('click',function(e){
e.preventDefault();
showGallery(item.id);
});
});
showGallery('healthcare');
body{
margin: 0;
padding:0;
font-family: 'Roboto', sans-serif;
font-size: 100%;
}
.container{
width: 90%;
margin: 0 auto;
text-align: center;
}
.o-hidden{
overflow: hidden;
}
img{
max-width: 100%;
height: auto;
}
.works{
padding:1em 0 3em 0 ;
}
.works h2{
font-size: 2em;
}
.work-menu ul{
list-style: none;
padding-left: 0;
}
.work-menu a{
text-decoration: none;
color:black;
transition: 0.1s;
padding: 0.2em 0 ;
}
.selected{
border-bottom: 0.1em solid #f3bb28;
}
.work-menu li {
display: inline-block;
margin: 1em;
}
.work-menu a:hover{
color:#f3bb28;
}
.gallery-set img{
margin: 0.5em;
transition: 0.2s ease-in-out;
width: 20%;
}
.gallery-set img:hover{
transform: scale(1.03);
cursor: pointer;
}
/*GALLERY SETS*/
.displayNone{
display: none;
transition: opacity 1s ease-in-out;
}
.gallery-set{
animation: galleryFade .4s ease-in-out;
}
#keyframes galleryFade{
from{
transform: translateX(450px);
opacity: 0;
}
to{
opacity: 1;
}
}
<div class="works">
<div class="container">
<h2>RECENT WORKS</h2>
<div class="work-menu">
<ul>
<li>Healthcare</li>
<li>Education</li>
<li>Goverment</li>
<li>Commercial</li>
</ul>
</div>
<div class="gallery-set" id="healthcare">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="1">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="2">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="3">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="4">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="5">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="6">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="7">
<img src="https://cdn3.wpbeginner.com/wp-content/uploads/2020/03/ultimate-small-business-resource-coronavirus.png" id="8">
</div>
<div class="gallery-set" id="education">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="9">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="10">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="11">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="12">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="13">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="14">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="15">
<img src="https://blog.mares.com/wp-content/uploads/2018/09/photo-by-Janez-Kranjc-3-Large-550x320.jpg" id="16">
</div>
<div class="gallery-set" id="goverment">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="17">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="18">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="19">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="20">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="21">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="22">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="23">
<img src="https://bsscommerce.com/blog/wp-content/uploads/2015/06/how-to-customize-order-id-550x320.png" id="24">
</div>
<div class="gallery-set" id="commercial">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="25">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="26">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="27">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="28">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="29">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="30">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="31">
<img src="https://lh3.googleusercontent.com/proxy/2GOR8jFYc-c4ueS2RnoQdshYBKcSa8Vt2UsL3VMqiFbjCqn1y0Xl_l4RalzP-rYmGYyq3oKJp_pjzcyfvG_oAowHWWi2fAxFmrp8ccbzlCSDsRxOfUtuOSpqHbepUoqSloxWZVWsKMDrmkWaLV09utnR2ACHfrQ0FS1yeSKkQNevmk8g" id="32">
</div>
</div>
</div>
I'm making a toggle sidebar where onClick of button showmenu funtion is not working. I'm trying to change the style of the sidenav from display:none to display:block but when I click the button nothing happens. I've tried with an alert and that works but not with the style.
Please help me find out where is the problem?
function showmenu() {
var sidenav = document.getElementById("sidenav");
var overdiv = document.getElementById("overlay");
if (sidenav.style.display == "none") {
overdiv.style.display = "block";
sidenav.style.display = "block";
} else if(sidenav.style.display =="block"){
sidenav.style.display = "none";
overdiv.style.display = "none";
}
}
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color:#ffffff;
left:0;
display: none;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay{
position: absolute;
margin-top: 13%;
display: none;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button id="menu-div" onclick="showmenu()">Click</button>
<nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()"><label class="menu-txt">Debate</label><img class="icon" src="images/iconos/megafono.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Mensajes</label> <img class="icon" src="images/iconos/veterinario.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Control de Salud</label> <img class="icon" src="images/iconos/corazon.png" /></a>
<a class="item" href='mapa.html' >Mapas</label> <img class="icon" src="images/iconos/mapas.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Servicios</label> <img class="icon" src="images/iconos/doctor (1).png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Configuración</label> <img class="icon" src="images/iconos/rueda-dentada.png" /></a>
<a class="item" id="logout" onclick="logout();"><label class="menu-txt">Cerrar Sesión</label> <img class="icon" src="images/iconos/exit.png" /></a>
</nav>
</header>
<div id="overlay" class="overlay" onclick="overlay()"></div>
<div id="content">
</div>
Your function working. Only change this line. Add style on nav tag style="display: none" and set default display: none or block.
<button id="menu-div" onclick="showmenu()">click here</button>
<nav class="sidenav" style="display: none" id="sidenav">
You need to remove the display:none from the CSS classes.
But really, you're taking the wrong approach here. Your CSS and JavaScript should be separated from your HTML.
See the comments inline below:
// Don't use inline HTML event atributes, like onclick.
// Do all your event/JavaScript work separately in JavaScript
// Get all the DOM references you'll use just once,
// not every time your functions run
var btnMenu = document.getElementById("menu-div");
var sideNav = document.getElementById("sidenav");
var overDiv = document.getElementById("overlay");
btnMenu.addEventListener("click", showMenu);
overDiv.addEventListener("click", overlay);
// Set up event handling on the sideNav and let all
// the events triggered from within it bubble up to it
sideNav.addEventListener("click", noDisponible);
function showMenu() {
// Just toggle the usage of the pre-made hidden class
sideNav.classList.toggle("hidden");
overDiv.classList.toggle("hidden");
console.log("function showMenu called");
}
function noDisponible(event){
// Make sure it was the right type of sideNave item
if(event.target.classList.contains("noDisponible")){
// Do work here
console.log("function noDisponible called");
} else if(event.target.classList.contains("logout")){
// Do logout here
logout();
}
}
function overlay(event){
// Do work here
console.log("function overlay called");
}
function logout(event){
console.log("function logout called");
}
.hidden { display:none; }
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color:#ffffff;
left:0;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay{
position: absolute;
margin-top: 13%;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button type="button" id="menu-div"></button>
<nav class="sidenav hidden" id="sidenav">
<a class="item noDisponible">
<label class="menu-txt">Debate</label>
<img class="icon" src="images/iconos/megafono.png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Mensajes</label>
<img class="icon" src="images/iconos/veterinario.png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Control de Salud</label>
<img class="icon" src="images/iconos/corazon.png">
</a>
<a class="item noDisponible" href='mapa.html'>
<label class="menu-txt">Mapas</label> <!--You were missing the opening label tag here -->
<img class="icon" src="images/iconos/mapas.png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Servicios</label>
<img class="icon" src="images/iconos/doctor (1).png">
</a>
<a class="item noDisponible">
<label class="menu-txt">Configuración</label>
<img class="icon" src="images/iconos/rueda-dentada.png">
</a>
<a class="item logout" id="logout">
<label class="menu-txt">Cerrar Sesión</label>
<img class="icon" src="images/iconos/exit.png">
</a>
</nav>
</header>
<div id="overlay" class="overlay hidden">OVERLAY HERE</div>
<div id="content"></div>
Set the style of sidenav programatically outside of the function:
let sidenav = document.getElementById("sidenav");
sidenav.style.display = "none";
function showmenu() {
let overdiv = document.getElementById("overlay");
if (sidenav.style.display == "none") {
overdiv.style.display = "block";
sidenav.style.display = "block";
} else if (sidenav.style.display == "block") {
sidenav.style.display = "none";
overdiv.style.display = "none";
}
}
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color: #ffffff;
left: 0;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay {
position: absolute;
margin-top: 13%;
display: none;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button id="menu-div" onclick="showmenu()">Click</button>
<nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Debate</label>
<img class="icon" src="images/iconos/megafono.png" /></a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Mensajes</label>
<img class="icon" src="images/iconos/veterinario.png" />
</a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Control de Salud</label>
<img class="icon" src="images/iconos/corazon.png" />
</a>
<a class="item" href='mapa.html'>
<label class="menu-txt">Mapas</label>
<img class="icon" src="images/iconos/mapas.png" />
</a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Servicios</label>
<img class="icon" src="images/iconos/doctor (1).png" />
</a>
<a class="item" onclick="noDisponible()">
<label class="menu-txt">Configuración</label>
<img class="icon" src="images/iconos/rueda-dentada.png" />
</a>
<a class="item" id="logout" onclick="logout();">
<label class="menu-txt">Cerrar Sesión</label>
<img class="icon" src="images/iconos/exit.png" />
</a>
</nav>
</header>
<div id="overlay" class="overlay" onclick="overlay()">Overlay</div>
<div id="content">Content</div>
You need to use window.getComputedStyle to get the css properties instead of element.style.
Element.style only gives the inline styles provided but window.getComputedStyle will give you the final styles provided to the element. element.style will give you the inline styles only and that's why to make it work, you need to add inline style display: none as suggested by #BCM.
You can read more here
function showmenu() {
var sidenav = document.getElementById("sidenav");
var overdiv = document.getElementById("overlay");
if (window.getComputedStyle(sidenav).display == "none") {
overdiv.style.display = "block";
sidenav.style.display = "block";
} else if(window.getComputedStyle(sidenav).display =="block"){
sidenav.style.display = "none";
overdiv.style.display = "none";
}
}
.sidenav {
width: 70%;
height: 85%;
top: 8%;
background-color:#ffffff;
left:0;
display: none;
border: 3px solid #77777766;
overflow-x: hidden;
transition: 0.5s;
position: fixed;
z-index: 5;
}
.overlay{
position: absolute;
margin-top: 13%;
display: none;
margin-bottom: 13%;
width: 100%;
height: 100%;
left: 0;
right: 0;
background-color: rgba(0,0,0,0.5);
z-index: 2;
cursor: pointer;
}
<header>
<button id="menu-div" onclick="showmenu()">Click</button>
<nav class="sidenav" id="sidenav">
<a class="item" onclick="noDisponible()"><label class="menu-txt">Debate</label><img class="icon" src="images/iconos/megafono.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Mensajes</label> <img class="icon" src="images/iconos/veterinario.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Control de Salud</label> <img class="icon" src="images/iconos/corazon.png" /></a>
<a class="item" href='mapa.html' >Mapas</label> <img class="icon" src="images/iconos/mapas.png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Servicios</label> <img class="icon" src="images/iconos/doctor (1).png" /></a>
<a class="item" onclick="noDisponible()"><label class="menu-txt">Configuración</label> <img class="icon" src="images/iconos/rueda-dentada.png" /></a>
<a class="item" id="logout" onclick="logout();"><label class="menu-txt">Cerrar Sesión</label> <img class="icon" src="images/iconos/exit.png" /></a>
</nav>
</header>
<div id="overlay" class="overlay" onclick="overlay()"></div>
<div id="content">
</div>
Also, for writing this type of code, you should be following #Scott Marcus's approach. It is much better and cleaner.
Can this slider be manipulated so that by clicking on a button it'll go to the previous item, and next to the next item?
Currently it's possible to move between dividers through links ("1 2 3 4 5") in the first divider, and go back to the first divider through a "back" link on each divider.
HTML:
<div id="wrapper">
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
1
2
3
4
5
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item2" class="item">
<a name="item2"></a>
<div class="content">
<img id="image1" src="http://placehold.it/350x150" />
<img id="image2" src="http://placehold.it/350x150" />
<img id="image3" src="http://placehold.it/350x150" />
<img id="image4" src="http://placehold.it/350x150" />
<img id="image5" src="http://placehold.it/350x150" />
<img id="image6" src="http://placehold.it/350x150" />
<img id="image7" src="http://placehold.it/350x150" />
<img id="image8" src="http://placehold.it/350x150" />
<img id="image9" src="http://placehold.it/350x150" />
<img id="image10" src="http://placehold.it/350x150" />
</div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="content">back</div>
</div>
<div id="item4" class="item">
<a name="item4"></a>
<div class="content">back</div>
</div>
<div id="item5" class="item">
<a name="item5"></a>
<div class="content">back</div>
</div>
</div>
</div>
CSS:
#wrapper {
width: 500px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
overflow: hidden;
}
#mask {
width: 5000px;
height: 100%;
background-color: #eee;
}
.item {
width: 500px;
height: 100%;
float: left;
background-color: #ddd;
}
.content img {
height: 100px;
width: 100px;
float:left;
margin-right: 4%;
margin-bottom: 6%;
}
.content {
width: 45%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
JavaScript:
$(document).ready(function () {
$('a.panel').click(function () {
$('a.panel').removeClass('selected');
$(this).addClass('selected');
current = $(this);
$('#wrapper').scrollTo($(this).attr('href'), 800);
return false;
});
$(window).resize(function () {
resizePanel();
});
});
function resizePanel() {
width = $(window).width();
height = $(window).height();
mask_width = width * $('.item').length;
$('#debug').html(width + ' ' + height + ' ' + mask_width);
$('#wrapper, .item').css({
width: width,
height: height
});
$('#mask').css({
width: mask_width,
height: height
});
$('#wrapper').scrollTo($('a.selected').attr('href'), 0);
}
You need to remove nav links from items and create separated nav panel with buttons.
$(document).ready(function () {
function shift(direction) {
var
$mask = $('#mask'),
items = $('.item').size(),
currentItem = $mask.data('currentItem'),
newItem;
if (currentItem == undefined) {
currentItem = 0;
}
newItem = currentItem + direction;
$mask.data('currentItem', newItem).animate({marginLeft: -500 * newItem});
if (newItem == 0) {
$("#prev").prop('disabled', true);
} else {
$("#prev").prop('disabled', false);
}
if (newItem == items - 1) {
$("#next").prop('disabled', true);
} else {
$("#next").prop('disabled', false);
}
}
$('#prev').click(function() {
return shift(-1);
});
$('#next').click(function() {
return shift(1);
});
});
#wrapper {
width: 500px;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #ccc;
overflow: hidden;
}
#nav button {
position: absolute;
top: 100px;
}
#prev {
left: 40px;
}
#next {
right: 40px;
}
#mask {
width: 5000px;
height: 100%;
background-color: #eee;
}
.item {
width: 500px;
height: 100%;
float: left;
background-color: #ddd;
}
.content img {
height: 100px;
width: 100px;
float:left;
margin-right: 4%;
margin-bottom: 6%;
}
.content {
width: 45%;
height: 220px;
top: 20%;
margin: auto;
background-color: white;
position: relative;
}
.content a {
position: relative;
top: -17px;
left: 170px;
}
.selected {
background: #fff;
font-weight: 700;
}
.clear {
clear:both;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="nav">
<button id="prev" disabled><<<</button>
<button id="next">>>></button>
</div>
<div id="mask">
<div id="item1" class="item">
<a name="item1"></a>
<div class="content">
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
</div>
<div id="item2" class="item">
<div class="content">
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
</div>
<div id="item3" class="item">
<a name="item3"></a>
<div class="content">
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
</div>
<div id="item4" class="item">
<a name="item4"></a>
<div class="content">
<img src="http://placehold.it/100x100" />
</div>
</div>
<div id="item5" class="item">
<a name="item5"></a>
<div class="content">
<img src="http://placehold.it/100x100" />
<img src="http://placehold.it/100x100" />
</div>
</div>
</div>
</div>
This solution is not finished. It doesn't cosider window resizing.