(JULIA) How do I view one Gallery Block at a Time (without seeing others beneath it)?

Site URL: http://ryanmariehelfant.com/selected-films

Hello,

When I click on one of my gallery blocks, I can see my website's other gallery blocks beneath it.

What is the CSS code to hide the other gallery blocks from appearing beneath the selected gallery block?

Thank you!

You could use this snippet by pasting it into 

Settings->Advanced->Custom Code Injection

<script>
  window.onhashchange = function() {
      [].forEach.call(document.querySelectorAll("#projectThumbs .project"), function(div) {
        div.style.display = "none";
      });
      var hash = location.hash;
      if (hash) {
          hash = hash.replace("#", "");
        
         var proj = document.querySelector("#projectThumbs .project[href='"+hash+"']");
        	
        if (proj) {
        	 proj.style.display = "block";
        }        
      } else {
      	[].forEach.call(document.querySelectorAll("#projectThumbs .project"), function(div) {
          div.style.display = "block";
        });
      }
  };
</script>

Thank you @bangank36 is there also a way to get rid of the gallery thumbnail beneath the gallery video? 

Just now, ryanmariehelfant said:

Thank you @bangank36 is there also a way to get rid of the gallery thumbnail beneath the gallery video? 

<script>
  window.onhashchange = function() {
      [].forEach.call(document.querySelectorAll("#projectThumbs .project"), function(div) {
        div.style.display = "block";
      });
      var hash = location.hash;
      if (hash) {
          hash = hash.replace("#", "");
        
         var proj = document.querySelector("#projectThumbs .project[href='"+hash+"']");
        	
        if (proj) {
        	 [].forEach.call(document.querySelectorAll("#projectThumbs .project"), function(div) {
                div.style.display = "none";
              });
        }        
      }
  };
</script>

Thank you @bangank36

Finally question!

Is there also a way to get rid of the Footer Content beneath the Gallery Block (the contacts at the bottom center of my page with the names & email addresses) when I click on a Gallery Block?

I would like to keep the contacts on my main page, but when I go to individual gallery blocks, I would not like that contact information to appear.

Thank you so so much!

<script>
  window.onhashchange = function() {
      [].forEach.call(document.querySelectorAll("#projectThumbs .project"), function(div) {
        div.style.display = "block";
      });
     document.querySelector("#footer").style.display = "block";
      var hash = location.hash;
      if (hash) {
          hash = hash.replace("#", "");
        
         var proj = document.querySelector("#projectThumbs .project[href='"+hash+"']");
        	
        if (proj) {
        	 [].forEach.call(document.querySelectorAll("#projectThumbs .project"), function(div) {
                div.style.display = "none";
              });
          	 document.querySelector("#footer").style.display = "none";
        }        
      }
  };
</script>

Cheers

@bangank36 Thank you!!!

2 minutes ago, ryanmariehelfant said:

@bangank36 Thank you!!!

Thank you, please choose the correct answers so other people can know when they face the same issue

@bangank36 When I refresh the page, it goes back to the old format (with thumbnails and contact info beneath the video). Is there Custom CSS to avoid this from happening when I refresh the page?

3 minutes ago, ryanmariehelfant said:

@bangank36 When I refresh the page, it goes back to the old format (with thumbnails and contact info beneath the video). Is there Custom CSS to avoid this from happening when I refresh the page?

Interesting, I will update the code

Make sure to change the script location on footer custom injection

<script>

  function checkProjectsHash() {

    [].forEach.call(document.querySelectorAll("#projectThumbs .project"), function(div) {
        div.style.display = "block";
      });
     document.querySelector("#footer").style.display = "block";
      var hash = location.hash;
      if (hash) {
          hash = hash.replace("#", "");
        
         var proj = document.querySelector("#projectThumbs .project[href='"+hash+"']");
          
        if (proj) {
           [].forEach.call(document.querySelectorAll("#projectThumbs .project"), function(div) {
                div.style.display = "none";
              });
             document.querySelector("#footer").style.display = "none";
        }        
      }

  }

  checkProjectsHash();
  
  window.onhashchange = function() {
    checkProjectsHash();
  };
</script>

@bangank36 Is there a way to hide the Title & Subtitle when I click on a  Gallery Block? (So nothing is above the video, but the spacing between the top of the video and top of the website is maintained)?

Cheers!

2 hours ago, ryanmariehelfant said:

 

@bangank36 Is there a way to hide the Title & Subtitle when I click on a  Gallery Block? (So nothing is above the video, but the spacing between the top of the video and top of the website is maintained)?

 

Cheers!

Seems like you resolve it 

@bangank36 Unfortuantely not!

The Title and Subtitle are unfortunately still there ("RYAN MARIE HELFANT | DIRECTOR OF PHOTOGRAPHY"). 

I just changed the name. 

Is there possibly more CSS to make it disappear when I click on Gallery Blocks?

Thank you so much!

<script>

  function checkProjectsHash() {

    [].forEach.call(document.querySelectorAll("#projectThumbs .project"), function(div) {
        div.style.display = "block";
      });
     document.querySelector("#footer").style.display = "block";
     document.querySelector("#header").style.visibility = "visible";
      var hash = location.hash;
      if (hash) {
          hash = hash.replace("#", "");
        
         var proj = document.querySelector("#projectThumbs .project[href='"+hash+"']");
          
        if (proj) {
           [].forEach.call(document.querySelectorAll("#projectThumbs .project"), function(div) {
                div.style.display = "none";
              });
             document.querySelector("#footer").style.display = "none";
          	document.querySelector("#header").style.visibility = "hidden";
        }        
      }

  }

  checkProjectsHash();
  
  window.onhashchange = function() {
    checkProjectsHash();
  };
</script>

Thank you!