Gulf County Summer Digital Visitor’s Guide

                            

  

    

      
CrowdRiff Galleries in a Directory
      
This section shows how multiple CrowdRiff galleries can be displayed in one section.
      
Play around with the provided styling to make it work for your site!
    
    

      
      #hashtag1
      #hashtag2
      #hashtag3
    
    

  
                            
                        

.digital-directory .container {
  padding: 150px 4%;
  max-width: 1200px;
  margin: auto;
}
.digital-directory .content-wrapper {
  text-align: center;
  max-width: 700px;
  margin: auto;
}
.digital-directory .directory-tabs {
  text-align: center;
  max-width: 800px;
  margin: 50px auto;
}
.digital-directory .directory-tabs button {
  -webkit-appearance: none;
  background: 0 0;
  border: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
  outline: 0;
  opacity: 0.6;
  font-size: 18px;
  font-weight: 600;
  margin: 5px 10px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}
.digital-directory .directory-tabs button.active {
  opacity: 1;
  border-bottom: 2px solid;
}
.digital-directory .gallery-block {
  display: none;
}
.digital-directory .gallery-block.active {
  display: block;
}

@media screen and (max-width: 1024px) {
  .digital-directory .container {
    padding: 50px 4%;
  }
}                        

function directory(){
    const tabs = document.querySelectorAll('.directory-tab');
    const galleryWrapper = document.querySelector('.digital-directory .gallery-wrapper');

    // Create the gallery embeds using the gallery ID placed in data-id
    tabs.forEach(tab => {
        const id = tab.dataset.id;
        const block = document.createElement('div');
        block.setAttribute('class', 'gallery-block');
        block.setAttribute('data-galleryID', id);
        const gallery = document.createElement('script');
        gallery.src="https://starling.crowdriff.com/js/crowdriff.js";
        gallery.id = id;
        block.appendChild(gallery);
        galleryWrapper.appendChild(block);
    })

    // Display the first gallery by setting the first tab and first gallery to "active"
    const blocks = document.querySelectorAll('.gallery-block');
    blocks[0].classList.add('active');
    tabs[0].classList.add('active');
    
    // When a user selects another tab, remove "active" class from all tabs and all galleries, then add "active" to the selected tab and related gallery
    window.addEventListener('click', function(e){
        if (e.target.classList.contains('directory-tab') && !e.target.classList.contains('active')) {
            const allTabs = document.querySelectorAll('.directory-tab');
            allTabs.forEach(tab => {
            tab.classList.remove('active');
            })
            const allBlocks = document.querySelectorAll('.gallery-block');
            allBlocks.forEach(block => {
            block.classList.remove('active');
            })
            
            const id = e.target.dataset.id;
            e.target.classList.add('active');
            const currentBlock = document.querySelector(`.gallery-block[data-galleryID='${id}']`);
            currentBlock.classList.add('active');
        }
    })
};

directory();