Jump to content

Cursor should change depending on its position - arrow right and left

Recommended Posts

  • Replies 7
  • Created
  • Last Reply
<style>
	.sqs-gallery-design-stacked-slide img {
      cursor: inherit;
    }
</style>
<script>
	document.addEventListener('DOMContentLoaded', function() {
      document.querySelectorAll(".sqs-gallery-design-stacked").forEach(function(el) {
          el.addEventListener("mouseout", function(e) {
              el.style.cursor = "inherit";
          });
          el.addEventListener("mousemove", function(e) {
              var rect = e.target.getBoundingClientRect();
              var x = e.clientX - rect.left; //x position within the element.
              var elWidth = rect.width;

              var isLeft = x <= elWidth / 2;
              if (isLeft) {
                  el.style.cursor = "url(http://beyondspace.tk/wp-content/uploads/2020/11/left-cursor-e1604323655317.png) 64 64, e-resize";
              } else {
                  el.style.cursor = "url(http://beyondspace.tk/wp-content/uploads/2020/11/right-cursor.png) 64 64, e-resize";
              }
          });
      });

  });
</script>

Place above snippet to FOOTER (instruction), you may want to upload the left and right cursor on your site and replace the files url accordinglyimage.png.a2c3214c399b08f3c87c3d08b0664378.png

image.png.b9d5ba73c7c088423edb90bacf7913d7.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

hey bangank36,

thank you SO much for your quick response! 🙂
I did it exactly like you said and it works! thx

BUT the thing is... the cursor doesn't change while I'm sliding over the picture like here 
http://herzette.de/new-workspace-playbook

So, question 1: Can I fix it like the sample on my site as well?

and question 2: Where could I upload the cursor picture on my site without show it on the website online? (I would like to have a cursor for example exactly like on the herzette.de-page.

Kind regards

Ben

Link to comment

on Photography — (benediktkestler.de) I can see cursor switched, which page are you one?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

.. and now I recognized, that the cursor changes BUT when you like it changes the pictures just in one direction ... no matter if I have a right or left arrow...it goes always for and never back (the left arrow is for)...

What do you mean with "are you one"?=)

Link to comment
Just now, bene9889 said:

.. and now I recognized, that the cursor changes BUT when you like it changes the pictures just in one direction ... no matter if I have a right or left arrow...it goes always for and never back (the left arrow is for)...

What do you mean with "are you one"?=)

i mean which page are you viewing, check my screen

cu.gif (1594×773) (ibb.co)

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

BTw can upload the images here

Using the CSS Editor – Squarespace Help

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

now I checked my website one firefox and on chrome browser...there it works! 😉 I think a safari problem...:/

Thx 😉

BUT
the problem with the right sliding is still active. When I see the arrow right direction, I want to see the next picture. When I see the left arrow I want to jump back to the picture before...
atm it just jumps to the next picture... no matter which position/arrow I click

Link to comment

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.