bene9889 Posted November 2, 2020 Share Posted November 2, 2020 Site URL: http://www.benediktkestler.de/photography To switch between my pictures in my gallery, I want the cursor changing its direction depending on where it is. Exactly like on this page (not the design - I prefer it not so retro) : https://foto-held-weimar.de/ueber/ style-sample: https://fomu.be Could you help me with that? Kind regards Ben Link to comment
Beyondspace Posted November 2, 2020 Share Posted November 2, 2020 <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 accordingly BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
bene9889 Posted November 5, 2020 Author Share Posted November 5, 2020 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 cursor_customized_sample.mov Link to comment
Beyondspace Posted November 5, 2020 Share Posted November 5, 2020 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 - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
bene9889 Posted November 5, 2020 Author Share Posted November 5, 2020 .. 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
Beyondspace Posted November 5, 2020 Share Posted November 5, 2020 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 - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
Beyondspace Posted November 5, 2020 Share Posted November 5, 2020 BTw can upload the images here Using the CSS Editor – Squarespace Help BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox - Lightbox captions only mode) 🗓️ Delivery Date Picker (Squarespace Date picker form field) 💫 Gallery block 7.1 workaround 🥳 No-code customisations for Squarespace 🚀 Learn how to rank new pages on Google in 48 hours! 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
bene9889 Posted November 5, 2020 Author Share Posted November 5, 2020 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.