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>

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);
    }