Information boxes

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.

I hope there is a better way of doing this…

1 Like

Nothing built-in in Sparkle currently, sorry.

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.

We haven’t announced anything.

Hi, How about the “Zoom image in Lightbox” option?
Dave

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.

At last! It took some tinkering, but I got it. Thanks again macmancape for the tip.

@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…

There, now you have a long wish-list.

Happy New Year!

@Ramses, in case you mean something like this, it can be achieved in Sparkle with just a little effort.

I have created a screen recording and shared a dropbox link.

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.

I am open to all possible methods.

All I did was this:

  1. Insert an image box in Sparkle.
  2. Drop any image in the image box (I made a question mark and dropped it).
  3. Click this new image.
  4. 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.
  5. Resize image and adjust text to accommodate it.

That’s all. :slight_smile:

1 Like

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.

Hi Duncan,
are there any plans to add this? Would be a very, very helpful feature. Thanks, c.

1 Like

We haven’t announced anything.

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):

The page:
http://raaskot.dk/om_raaskot/index.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.

2 Likes