Indicator for Zoom stack


#1

My client has a requested to add an icon or other method (like opacity change for example) to the Zoom stack, as she doesn’t think visitors will realize that the images can be zoomed on click.

I’ve used the Overlap stack to place a FA icon from the Icon Font stack to place the FA icon onto the Zoom stack image, but unfortunately the area with FA icon no longer triggers the Zoom stack.

Any ideas on how to get the Zoom stack trigger to work with this configuration, or an alternative way to have some kind of indicator for the Zoom stack?

Thanks very much!


#2

Currently the indicator is that the cursor turns into a magnifying glass with the plus sign inside of it as the visitor passes over the image.

I’ll add it to my todo list of things to look at… The problem that might arise though is that it would require adding an overlay to the image, thus making the image un-clickable, and making the image zoom inaccessible, as the Zoom stack actually shrinks down the full-size image and then zooms up that full-size image once clicked. So I can’t promise that this is a doable thing. You’ve seen this same thing with using the Overlap stack in your test.

Currently I do have a lot going on, so it might not be something immediate that I can look at.


#3

What about adding a soft drop shadow to the image when hovered over? Or having the image zoom just a tiny bit when hovered over? Thoughts? These would be configureable of course.


#4

If you like you could also use the Badge Box stack, like so to add a little indicator to the image:


#5

I like the small zoom idea. That would be very nice.


#6

I like both the drop shadow and the small zoom ideas as well. They would both be helpful options.

Would an opacity change be more difficult to implement?

The Badge Box stack is also a great suggestion - thanks for that! Will give it a try in the meantime.


#7

You mean like an overlay, so that the image is tinted when hovered over? If so, then yes. That tinted overlay covers the image, making it non-clickable, just as the Overlap stack caused a problem in your setup. It is the same general principle.

Cool! Sounds good!


#8

Not an overlay as such but a de-saturazation fade sort of effect, but perhaps that itself is also an overlay?

In which case, your ideas of a slight zoom and/or drop shadow options are best, and very cool.

Btw, I love the Zoom lightbox - very elegant and attractive!


#9

I could maybe apply a CSS ‘filter’ of sorts to it, but I’ll have to look at it. I think the most reliable things would be the two I mentioned above and the Badge Box stack, for this particular Zoom stack. I’ll have a closer look tomorrow.


#10

Thanks Adam! Much appreciated.

I just put up the Badge stack and I really like it - hope the client will too. As this is my first completely new project since Potion Pack was released, I apparently forgot about some of the new stacks like Badge. There are really quite a lot of Foundry stacks now - it’s amazing actually! So I really appreciate your suggestion. The Forum is so great for problem solving input as others have mentioned previously.


#11

I’m glad to help out. I hope your client likes it too. It should work pretty well, I think.

I do like that this forum is helpful to Foundry users and that it is a nice, civil, place to share ideas and get support.


#12

The badge box solution is a neat win win solution because it remains visible on all devices. Quite a few “hover” type images effects don’t work on touch devices where there is no hover. Using the badge box makes it very obvious that it can be clicked or pressed.


#13

Agreed! Heard back from the client and she likes it as well. That was a great suggestion and most helpful!