Thumbnail image as a link to the full image

Vaadin 6 / 7 / 8 Framework UI
1

Is it possible to use an Embed to include a thumbnail image such that when they click on that image I can popup a window showing the full image?

In HTML, it’s roughly:

I have the Embed working and showing my thumbnail, but it seems natural to click on the thumbnail to see the bigger image.

Thanks for any ideas…

2

My first two initial suggestions are:

  • use a Label in XHTML mode, and place the image there
  • wrap the embedded inside a CssLayout and add a LayoutClickListener to it
3

Great suggestions, Jouni. I’m surprised I didn’t think of the Label option since I use that in a few other areas to inject good old HTML. I’ll take a look at CssLayout, too. I’ve actually just added a “View large image” Link below the thumbnail, and it’s perhaps what I need since it just makes it obvious instead of subtle.

4

Just to point out, LayoutClickListeners can be attached to most, if not all, Vaadin layouts, like HorizontalLayout and VerticalLayout. The CSSLayout is just the best choice for the matter as it is the most lightweight layout out of them all.

5

For the record, since this thread comes as a first link in my search, I point to the second link which answers my particular (but quite common) need, which is to have a clickable image:
Scaled Linked Image in Vaadin

In short:

      Link lnk = new Link("", new ExternalResource("http://vaadin.com"));
      lnk.setIcon(new ThemeResource("../runo/icons/16/user.png"));

I also note that the information of the Book of Vaadin seems outdated. I made a textual link and a graphical one (with the method above) and both are rendered with tag. Which is a good thing, as it is easy to do as described in the book (ie. something with a click listener) if you need a more complex behavior.

6

Hi, looks like the implementation has change at some point. The handling was earlier more like a Button, now it’s a . I’ll fix it in the book.