Press "Enter" to skip to content

Responsive Accordion Image Photo Gallery In JavaScript

Responsive Gallery Design is a responsive image gallery where users can expand and collapse images just like an accordion slider.

accordion slider, accordion with background image, accordion slider bs, accordion slider free download, accordion image gallery, accordion slider with text, accordion slider jquery

How to make use of it:

1. Add photos as background to the boards.

<div class="container">
  <div class="panel active" style="background-image:url(img/1.jpg);">
    <h3>WebCodeFlow</h3>
  </div>
  <div class="panel" style="background-image:url(img/2.jpg);">
    <h3>WebCodeFlow</h3>
  </div>
  <div class="panel" style="background-image:url(img/3.jpg);">
    <h3>WebCodeFlow</h3>
  </div>
  <div class="panel" style="background-image:url(img/4.jpg);">
    <h3>WebCodeFlow</h3>
  </div>
  <div class="panel" style="background-image:url(img/5.jpg);">
    <h3>WebCodeFlow</h3>
  </div>
  <div class="panel" style="background-image:url(img/6.jpg);">
    <h3>WebCodeFlow</h3>
  </div>
</div>

2. Necessary CSS Styles.

.container
{
  display: flex;
  width: 90vw;
}

.panel
{
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 85vh;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  flex: .5;
  margin: 10px;
  transition: all 700ms ease-in;
}

.panel h3
{
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  left: 20px;
  margin: 0;
  opacity: 0;
  
}

.panel.active
{
  flex: 5;
}

.panel.active h3
{
  opacity: 1;
  transition: opacity .3s ease-in .4s;
}

@media(max-width:480px)
{
  .container
  {
      width: 100vw;
  }

  .panel:nth-last-of-type(6),
  .panel:nth-last-of-type(7)
  {
      display: none;
  }
}

3. Enable smooth, accordion-style transitions by toggling CSS classes.

const panels = document.querySelectorAll('.panel');
panels.forEach((panel) => {
  panel.addEventListener('click', () => {
    removeActiveClasses();
    panel.classList.add('active');
  });
});
function removeActiveClasses() {
  panels.forEach((panel) => {
    panel.classList.remove('active');
  });
}

Accordion Style Responsive Photo Gallery In JavaScript, responsive image gallery design Plugin/Github


See Demo And Download

Official Website(gunesenes): Click Here

This superior jQuery/javascript plugin is developed by gunesenes. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.