CODEWITHSUNDEEP
javascriptjquerysquarespace
iwatakeshi
iwatakeshi

Reputation: 697

Open Squarespace Slideshow Gallery in New Tab

I'm trying to open individual images that appear on the slideshow in a new tab which I have done successfully by using jQuery but the problem still exists in the meta data that hovers over the image. When the meta is clicked, the page redirects the user in the same tab instead of a new tab.

What I have tried is grabbing the meta's element with $('.slide .meta') and prevent the meta from being clicked by using event.preventDefault() in click(). The click was recognized but it still allowed the page to load the url which I thought it was strange. So any help would be greatly appreciated!

Here's the jQuery snippet that works for the images:

<script>

  // Make sure the page is loaded
  // before running the script
  $(document).ready(function() {

    // Grab the gallary container's link
    $('.sqs-gallery-container a').click(function(event) {

      // Get the link element
      var href = $(this).attr('class');

      // Add the attribute '_blank' to open the
      // generic link to that new tab
      $(this).attr('target', '_blank');

        // Grab the link
        var link = $(this).attr('href');

        // Check if the link isn't equal to '#'
        if(link !== '#'){
          // Open the page
          window.open(link);
        }

      // Prevent the gallary from opening the link
      // and let us do our own thing!
      event.preventDefault();
   });

  }); // end ready

</script>

and here is the slideshow gallery snippet that was copied from Chrome's console:

https://gist.github.com/iwatakeshi/95fc070a668198566588

A sample of the slideshow can be found here:

https://help.squarespace.com/guides/using-the-slideshow-gallery-block

or the actual Gallery:

Squarespace Slideshow Gallery

Upvotes: 1

Views: 654

Answers (1)

asmockler
asmockler

Reputation: 187

Have you tried moving event.preventDefault() to the top of the block? So your code would become:

<script>
$(document).ready(function() {
    $('.sqs-gallery-container a').click(function(event) {
        event.preventDefault(); // preventDefault first
        var link = $(this).attr('href');

        if(link != '#'){
            window.open(link);
        }
    });
});
</script>

You also had an unused variable href that I removed.

Upvotes: 0

Related Questions