imagehover for project arrows, workaround with manual links

[MartinRL]

Hello there,

I would like to apply the imagehover feature to the project arrows, so on mouseover they show the thumbnail of the project they are leading to.

So far I’ve only found this thread which asks for something similar albeit more complex: http://laythemeforum.com:4567/topic/3513/custom-hover-effect-at-project-arrows-using-project-thumbnails-as-arrow/4

And some years ago I see you were contemplating implementing the feature into the plugin: http://laythemeforum.com:4567/topic/6239/image-hover-prev-next-project-in-footer/2

It just seems like such a natural thing :-) would you still consider doing it?

If that doesn’t work, I’d even be willing to manually link the corresponding images on every one of my 50+ project pages… but even for that ChatGPT is asking me to use Ajax, which is way beyond my skills... Any advice for an easier solution?

Thanks!
Martin

[arminunruh]

hey!
if you use this:
https://laytheme.com/documentation/navigation-between-projects.html#next-project-link

you cant add an imagehover link?
select your text, click this:

then click this:

now,

set imagehover link here

i know its not the "project arrow" feature but the alternative. :O you can use this in combination with the footer feature to have this underneath all projects for example

[MartinRL]

Hi Armin, thanks for your quick reply!

I am using the feature in the text editor like you suggest for my mobile version, but in the desktop version I would like to use the bullet points, as you see here: https://martinrobertlutz.de/tara-bogart/

I was wondering if that could be done with some css/java.

Or even with a simple check box you might include in the addon ;-) Though I'm happy to use code if you have a solution up your sleeve. I've been trying different css/java with ChatGPT's guidance, but it seems not to work with the dynamic loading of the varying thumbnails.

Best,
Martin

[arminunruh]

Enter this css in "lay options" -> "custom css & html" -> "custom css for desktop"

.pa-thumb-wrap {
    display: none;
}
.pa-prev::before{
    content: "●";
    float: left;
}
.pa-next::after{
    content: "●";
    float: right;
}
.pa-prev:hover .pa-thumb-wrap{
    display: block;
}
.pa-next:hover .pa-thumb-wrap{
    display: block;
}
.pa-prev:hover::before{
    display: none;
}
.pa-next:hover::after{
    display: none;
}

then in customize, in the preview go to a project.
then in the tab "project arrows"
as arrow type choose "thumbnails":

it doesnt work super well but thats all i can do.
other than that its not really possible no

[MartinRL]

Works like a beauty, you are a wizard!!!

Thank you so, so much :-)

Martin