Jump to content
Go to solution Solved by Beyondspace,

Recommended Posts

  • marleydesigns changed the title to Flip Over Grid Gallery Images
  • Solution
Posted (edited)
18 hours ago, marleydesigns said:

I'm trying to figure out a way to make these graphics flip or turn around on a hover to reveal a fact (written in the gallery description), as if you were turning over a playing card.

if this possible to do with a grid gallery, or is there a better alternative?

 

https://trivium-trivia.squarespace.com/content

pw: manifest

There are some effect you can try on my showcases

Gallery Hovers — Beyondspace (squarespace.com)

image.thumb.png.6640982d935b70001354e5b9f7db3e98.png

Support me by pressing 👍  or marking as solution if this useful for you

Edited by Beyondspace

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
3 hours ago, marleydesigns said:

@Beyondspace Thanks for you reply!! I entered the code as instructed and wasn't able to see any results ☹️

Which gallery are you trying? Can you share some screenshots and leave the URL linked to it?

Edited by Beyondspace

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
20 hours ago, marleydesigns said:

It seems that you do not wrap my js on <script></script>

image.thumb.png.6f0acc6ca325344504c7836b8a035503.png

You should add to Settings->Advanced->Code Injection->Footer

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if ( window.location === window.parent.location ) {	  
      var galleryItems = document.querySelectorAll(' .gallery-grid-item');	
      for (var i = 0; i < galleryItems.length; i++) {
        var cls = galleryItems[i].className;
        cls = cls.replace(/(^|s)imghvr-S+/g, '');
        galleryItems[i].className = cls + " " + "imghvr-zoom-in";
      }	
    }
  })	
</script>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
4 hours ago, Beyondspace said:

It seems that you do not wrap my js on <script></script>

image.thumb.png.6f0acc6ca325344504c7836b8a035503.png

You should add to Settings->Advanced->Code Injection->Footer

<script>
  document.addEventListener('DOMContentLoaded', function() {
    if ( window.location === window.parent.location ) {	  
      var galleryItems = document.querySelectorAll(' .gallery-grid-item');	
      for (var i = 0; i < galleryItems.length; i++) {
        var cls = galleryItems[i].className;
        cls = cls.replace(/(^|s)imghvr-S+/g, '');
        galleryItems[i].className = cls + " " + "imghvr-zoom-in";
      }	
    }
  })	
</script>

 

Oh whoops! Okay, so I entered that code as instructed, but it's still not working. Did I enter any other code wrong, or perhaps are there specific settings I need to enable/disable for the plug in to work? I'm lost 😅

Again, I really appreciate your help!!

Link to comment
4 hours ago, marleydesigns said:

Oh whoops! Okay, so I entered that code as instructed, but it's still not working. Did I enter any other code wrong, or perhaps are there specific settings I need to enable/disable for the plug in to work? I'm lost 😅

Again, I really appreciate your help!!

Opp, my code works for gallery section (image section in fluid engine)

image.thumb.png.35d891f00d807fe032240213494c9303.png

You can consider using it

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
2 hours ago, Beyondspace said:

Opp, my code works for gallery section (image section in fluid engine)

image.thumb.png.35d891f00d807fe032240213494c9303.png

You can consider using it

ohhhh okay! my bad 😅 I added that one instead and its now working, but i'm not able to see the description now 🤔

Link to comment
On 1/7/2023 at 11:13 AM, marleydesigns said:

ohhhh okay! my bad 😅 I added that one instead and its now working, but i'm not able to see the description now 🤔

I check that the descriptions are disable now. Have you turned it on yet?

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.