To avoid too much text on our site I want some words to pop-up an information box if someone clicks on the word (or sentence). I have not found a way of doing it in Sparkle other than making a copy of the page with the information box and linking to that copy.
That has drawbacks. If I update the original page I have to do the same with the copy. Visitors have to click an extra time if they want to see inormation on another word/sentence - the first to go back to the original page the second click to go to the other information box.
Any plans to include it anytime soon?
It is a textbox with a visibility toggle that reacts to clicks. Maybe it is much more complicated than I imagine.
Thanks macmancape. I tried it, but canât make it stop creating a copy that moves up a bit when the box is clicked, while keeping the original in place. Canât find a way to regulate the behavior. Where can I do a zoom? Can only change opacity. A zoom from 0 or 2% to 100% would do it, but canât find any such tool. Besides, an image of text is not as crisp as the real thing, but I could settle for that if it works.
OK, I found how to zoom. But would need the minimized rectangle to become invisable, but it remains as a zoomed in copy. If I could replace the small image with say an âiâ for information or something people would understand what to do.
@duncan What I think would be great is if images and text could have more of each otherâs tools. To zoom a text box and be able to make it transparent until clicked. And, to be able to animate an image On Click.
BTW, animating images On Scroll has no effect if opacity is zero as well as Lightbox opacity. Would be nice to have it when opacity and zoom go up after a click.
And if there was a way to position the image when expanded.
Animate On Click is fun. I wish I could do bothâŚ
Thanks phoenix1386 for the video. How did you do it (the trick, not the video)?
I have now done my version, but am a bit unsure if I am going to implement it because it looks a bit dull, and I canât control where the images/text shows up.
Drop any image in the image box (I made a question mark and dropped it).
Click this new image.
To the right hand side, in Style, you will see space for adding a Title. This title will come as tooltip text when your cursor hovers over the image. Add whatever you want here.
I did something very similar. I took a screen-shot of my text box and then pasted it in and reduced its size to the size of a letter. Then put opacity to 0 and chose On Click Zoom Image in Lightbox with its opacity also 0, no Action overlay.
I want an i in a cirkel (for âinfoâ), and the font used for Title does not have it so i have a textbox with that Circled Latin small â. It has the same effect.
But it is not at all as dramatic as say Animate On Scroll: âFlip in Placeâ or âSwingâ. The drawback is having to switch pages, which is not a real problem to be honest.
A hint: You may (havenât tried it specificly in Sparkle) insert css-script using Sparkles âEmbed-boxâ and write a âa:hover {}â function. Either in line (perhaps a bit cumbersome) or with a linked ccs-document. Care when exporting Sparkle publication.
Sorry I canât be more specific, but the hover-thing is quite standard (css-only) and you might find the description on ie. https://www.w3schools.com/. A while ago I made this example (non-sparkle HTML):
Thanks Raaskot, but the point of using Sparkle, for us non-pros, is to avoid using scripts.
It would need to work and look good on all devices and also be easily modified.
Hello there Raaskot,
exactly what Iâm looking for but canât seem to find it on w3schools,
mind giving me the specific on that code and/or a link to the code I can handle it from there.
