Jump to content

How to have clickthrough link on gallery but not on individual photos

Recommended Posts

Posted

Site URL: https://www.jmarz.art/portraits

Password: SuperSecretePassword

Hey all, I'm a c/c++ programmer, done a bit of kotlin for two apps I've developed and dabbled in a few other languages due to needed to be able to...and I guess this is one of those moments. I never was one for javascript, html, or anything of the sort so sorry for my limited knowledge but how would one go about setting a clickthrough link via an image in the gallery so that a user can be redirected to the gallery link. This sort of works on the first gallery (Forest Collection // 01) but then I have a unintentional loop once I get to https://www.jmarz.art/forestcollection01 . Every time I click on the the first photo (first is the top left photo) it'll go to the clickthrough link again which is what I am trying to get rid of. The intended flow I'm trying to achieve is:

  • User goes to https://www.jmarz.art/portraits - in which they can see a series of photography sessions
  • User clicks on a session of interest, which would lead them to that session. If the session of interest was Forest Collection // 01, then they would be sent to https://www.jmarz.art/forestcollection01
  • Once here, the user could click on the top left most picture (the first one) and start viewing the collection. In reality the user could click on any at this point an view the collection, but they all must allow the user to view the collection, not have a clickthrough link that basically just takes them to the same URL.
  • Replies 3
  • Views 454
  • Created
  • Last Reply
Posted

Thus far I've made something work, but it's definitely not scaleable. 

 

<script>
window.onload = function(){

    /*********Forest**************/
document.getElementById('forestcollection01-section').addEventListener("click",         function(event) {
    
      window.location.href =     'https://www.jmarz.art/forestcollection01';
          });
  
  /*********Graduation**************/
document.getElementById('graduation20-01-section').addEventListener("click",         function(event) {
    
      window.location.href =     'https://www.jmarz.art/graduation20-01/';
          });

  
      /*********Pink Skirt**************/
document.getElementById('pinkskirt01-section').addEventListener("click",         function(event) {
    
      window.location.href =     'https://www.jmarz.art/pinkskirt01';
          });

  
        /*********Fourth Of July**************/
document.getElementById('4thofjuly20-01-section').addEventListener("click",         function(event) {
    
      window.location.href =     'https://www.jmarz.art/4thofjuly20-01';
          });
};

</script>

Posted

If there is a better way to go about this then I would love to know haha. Utilizing the current method does seem to be a pain but it's how I currently have the website performing as I would like. 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.