Floating arrows in the lightbox?

[Bitnik]

Hello,

would it be possible to change the arrows in the lightbox to floating ones, like the ones in the last of the examples here:
https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-manipulate-cursor-appearance-with-css–cms-31825

I would like to implement it in the lightbox like on this site:
https://www.artefactorylab.com/en/baukunst-9/
I think that it is much easier to navigate this way…you don´t have to search the small fixed arrows on the right / left side…

Would a solution like this be possible:
In the 1/3 of the screen to the left the cursor becomes a left arrow
In the middle 1/3 of the screen the cursor is a magnitude icon for a zoom
In the right 1/3 of the screen the cursor would be a right arrow
…or if easier to realize only left / right arrows in the left / right 50% of the screen (and zoom function only with the icon on the top)?
It would be great if you could give me some advise, how to realize it….Thank you!!!

An additional question:
I use svg to get a particular cursor when hover above links.
I would like to use another svg cursor only when hovering above images in grid and masonry portfolio (items that open a lightbox when clicked…)
How can I realize it?

Big thanks!

[SeaTheme]

Hi,

It is not an easy job.
You could test the CSS. but the CSS solution is not perfect. Because the area size(widht/height) cannot match pictures accurately. Just a suggestion.

.pswp__button--arrow--right,
.pswp__button--arrow--left { 
    width: 33%; background: none!important; height: 80%; margin-top: -40%;
 cursor: url(https://left-cursor-file-URL.png), auto;
}.pswp__button--arrow--left:before, .pswp__button--arrow--right:before {
	display:none;
}
.pswp__button--arrow--right {
cursor: url(https://right-cursor-file-URL.png), auto;}
/*the zoom cursor could be replaced also*/
.pswp--zoom-allowed .pswp__img {
cursor: url(https://zoom-cursor-file-URL.png), auto;
}

grid and masonry portfolio (items that open a lightbox when clicked…)

.lightbox-item.grid-item-mask-link {
 cursor: url(https://cursor-file-URL.png), auto;
}

please notice the cursor file size need to less than 128 x 128px

Regards!

SeaTheme – SeaTheme.net – Twitter – Facebook

[Bitnik]

Thank you very much!!!
It works :)…. (..but I had to add top: 15%, because by default it was 50% and the arrows appeared only on a smaller part of the screen …
Now it works very well in Chrome, Firefox, Opera!
Safari has a small problem. When switching to the next image in the lightbox the svw-arrow changes to a default cursor (?) for a while.
Then it displays the svg-arrow again when I move the cursor or after ca. 2 seconds by its own(?)….I don´t know which event in Safari “says” to the svg-cursor to become default cursor for a while, when switching to the next image?
If you have an idea, solution, how to manage this strange behavior in Safari, it would be great ! Thank you :)!

P.S. I looked in some other websites with similar lightboxes with floating arrows in Safari, and have to say that some of them also had problems…So Safari seems to be a problem in general…

Best!

[SeaTheme]

Hi, welcome! 🙂

I think it should be Safari’s own issue.

Regards

[Bitnik]

Thank you!

I´ve seen that even the official example of photoswipe has a problem in Safari when switching to next image:
https://photoswipe.com/#&gid=1&pid=4
When clicking the arrow for the next image there a default cursor appears suddenly when next image is loaded (the same what happens on my site)…
It seams this is a critical moment, that disables all rules?

Isn´t there a way to disable this cursor completely when in the lightbox?…So only the defined svg-cursor appears or no cursor (it would be less disturbing than this default cursor popping up)…
I tried already with cursor: none: Indeed the default cursor disappears (and my svg-cursor is still shown 🙂 perhaps because of !important) but when switching to next image this default-cursor appears again (I don´t know what happens in this moment, which class is valid, so even my cursor: none doesn´t work in this moment?)
Thanks again!

Best.

[SeaTheme]

Hi,

When clicking the arrow for the next image there a default cursor appears suddenly when next image is loaded (the same what happens on my site)…
It seams this is a critical moment, that disables all rules?

I didn’t find what’s wrong. Could you paste a screenshot to explain it? thanks

Best

[Bitnik]

It´s strange, but I can´t make a screenshot on my mac in Safari with a cursor ;)…it always show the safari screen without it..
..But it´s very easy: When clicking to the next image in the lightbox, the custom arrow changes to the default cursor!…it only occures in Safari.
It´s like on the demosite for photoswipe: https://photoswipe.com/…
There when clicking to the next image in every browser the “hand”-icon doesn´t change, in safari it changes to the default-arrow…
The same on my site, the svg-cursor changes to the default-arrow.
There is probably some kind of event in photoswipe when changing to the next image, that brings Safari (only Safari) to display this default arrow….(?)

[Author]

Posts