Posted on Jan 27 • Edited on Mar 18

How make Thumbnails on JavaFX?

A Thumbnail is an image that when clicked, it is shown much larger on the screen with an overlay to highlight the image and its details, here you can see an interactive example: W3 School thumbnails

Thumbnails are very common in web pages, in this case, I will show you how to create these thumbnails in JavaFx desktop application, for this we will require the latest version of FxPopup, a library to create popups and more in your application

<dependency> <groupId>io.github.hugoquinn2</groupId> <artifactId>fxpopup</artifactId> <version>1.1.0</version> </dependency>

Thumbnails were added to FxPopup starting with version v1.2.0

Makin a simple Thumbnail

To create a simple thumbnail we will only require an overlay and an image, with the following example you can create a thumbail

Rectangle overlay; FxPopup fxPopup; ImageView imageView; @FXML public void initialize() { // FxPopup object fxPopup = new FxPopup(); // Image example imageView = new ImageView("https://th.bing.com/th/id/OIP.TnnO-9C6THhBBCzOhTe7mQHaFj?rs=1&pid=ImgDetMain"); // Making a Overlay overlay = new Rectangle(); overlay.setFill(Color.BLACK); overlay.setOpacity(0.3); // Remove image and overlay when the overlay is clicked overlay.setOnMouseClicked(event -> { MasterUtils.remove(imageView); MasterUtils.remove(overlay); }); } @FXML protected void onThumbnails() { // Show overlay before image fxPopup.show(overlay, Pos.CENTER); // Bind Overlay with root, for max size overlay.widthProperty().bind(((Pane) MasterUtils.getRoot()).widthProperty()); overlay.heightProperty().bind(((Pane) MasterUtils.getRoot()).heightProperty()); // Show image above Overlay fxPopup.show(imageView, Pos.CENTER); }

Although this code is enough to create thumbnails, we can improve this by making all images always have this thumnails

Making a Custom `ImageView` for Thumbnails

we're going to create our own controller using FxPopup, so when creating this object it will always have the option to show the thumbnail of the image

public class ThumbnailImage extends ImageView { // Thumbnail Structure Rectangle overlay; FxPopup fxPopup; ImageView thumbImage; // Thumbnail config double scaleThumbImage = 0.6; double overlayOpacity = 0.3; Color overlayColor = Color.BLACK; // Thumbnail classes for CSS styles String DEFAULT_CLASS_OVERLAY = "overlay"; String DEFAULT_THUMB_IMAGE = "thumb-image"; // Constructor null, path and Image, for customization public ThumbnailImage() {this(null, null);} public ThumbnailImage(String s) {this(s, null);} public ThumbnailImage(Image image) {this(null, image);} // General constructor class private ThumbnailImage(String s, Image image) { fxPopup = new FxPopup(); thumbImage = new ImageView(); overlay = new Rectangle(); // Set classes thumbImage.getStyleClass().add(DEFAULT_THUMB_IMAGE); overlay.getStyleClass().add(DEFAULT_CLASS_OVERLAY); if (s != null) { this.setImage(new Image(s)); thumbImage.setImage(new Image(s)); } else if (image != null) { this.setImage(image); thumbImage.setImage(image); } // Overlay config overlay.setFill(overlayColor); overlay.setOpacity(overlayOpacity); setThumbnail(); } private void setThumbnail() { overlay.setOnMouseClicked(event -> { MasterUtils.remove(thumbImage); MasterUtils.remove(overlay); }); setOnMouseClicked(event -> { Rectangle2D screenBounds = Screen.getPrimary().getBounds(); double screenWidth = screenBounds.getWidth(); double thumImageWidth = screenWidth * scaleThumbImage; // Show overlay before image fxPopup.show(overlay, Pos.CENTER); // Bind Overlay with root, for max size overlay.widthProperty().bind(((Pane) MasterUtils.getRoot()).widthProperty()); overlay.heightProperty().bind(((Pane) MasterUtils.getRoot()).heightProperty()); // Resize image to 80% size windows and preserve ratio thumbImage.setFitWidth(thumImageWidth); thumbImage.setPreserveRatio(true); // Show image above Overlay fxPopup.show(thumbImage, Pos.CENTER); }); } // Getters and Setters functions for customization public double getScaleThumbImage() { return scaleThumbImage; } public void setScaleThumbImage(double scaleThumbImage) { this.scaleThumbImage = scaleThumbImage; } public double getOverlayOpacity() { return overlayOpacity; } public void setOverlayOpacity(double overlayOpacity) { this.overlayOpacity = overlayOpacity; } public Color getOverlayColor() { return overlayColor; } public void setOverlayColor(Color overlayColor) { this.overlayColor = overlayColor; } }

With our new controller it is now enough to create multiple objects and add them wherever we want, as in the following example

@FXML public void initialize() { ImageView imageView = new ThumbnailImage("https://shorturl.at/Ymi2B"); ImageView imageView2 = new ThumbnailImage("https://shorturl.at/1Lr99"); ImageView imageView3 = new ThumbnailImage("https://shorturl.at/cSuFt"); ImageView imageView4 = new ThumbnailImage("https://shorturl.at/SNygg"); imageView.setFitWidth(150); imageView2.setFitWidth(150); imageView3.setFitWidth(150); imageView4.setFitWidth(150); imageView.setPreserveRatio(true); imageView2.setPreserveRatio(true); imageView3.setPreserveRatio(true); imageView4.setPreserveRatio(true); root.getChildren().addAll(imageView, imageView2, imageView3, imageView4); }