For the clicking part, you would most likely have to use a javascript solution (like this example from TippyJS, or search on Github for âtooltipâ or âpopoverâ).
Then, in your HTML where you define what should be displayed, youâd go like this:
Ok so Iâve been thinking it as well and I think the easiest or probably the only way for my design need is to have all details available, stacked and hidden and use JavaScript to show details of the clicked item.
At first I was having the impression that I can just pass the $slug of the clicked item to a function which uses the slug to fetch the fields. But I think it is not possible.
Well, your answer verifies my solution in mind so thanks.
Blockquote[quote=âdaybugging, post:4, topic:14385â]
You could also fetch page information via AJAX from the API I guess ⊠but then again, itâs just text, right
[/quote]
Actually Iâll be fetching the cover image as well. I donât know how much impact will those images add on the page load. I have more than 50 items so 50 images from thumbnail and 50 images for the hidden details. I could lazy load the images though.
Iâm going to read about AJAX maybe itâs a better fit for me.
Lazyloading on image-heavy sites is always viable, true. I donât know your case, but it seems to me that putting everything in the source (and lazyloading images, maybe also text) is preferable.
You can create another div, print âaltâ there (same way you did for img), make it hidden by default, and visible on hover. Or you can use something like this https://codepen.io/peiche/pen/vhqym - looks like modal window, but there is no js.
Btw, the design attached is not mine. Iâm using it for inspiration about how would I present the full details.
I can pretty much achieve the functionality, I mean the detail panel, to appear and disappear using JavaScript on click. My initial query was how to fetch the details.
So I think this is considered solved.
As verified by you guys, I will stack all the details within my loop, hide them and show the details of the clicked thumbnail using JavaScript. In addition, I would certainly implement lazy loading here.
Will the content in the side panel be just an excerpt of the subpage/product content?
Maybe if it is the full subpage content, it is better to load it with ajax?
Great. This is the exact functionality I was trying to get. Thank you sir. Do you have some code there for me to start on?
I too have 0 ajax experience.