HorizontalScrollImageGallery

HorizontalScrollImageGallery

import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseButton;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.stage.Screen;
import javafx.stage.Stage;

/**
 * 
 * All images used are belong to the respected owner !
 * @author abhinay_agarwal
 *
 */
public class HorizontalScrollImageGallery extends Application {

	private static final double speed = 0.10;
	private static final String LEFT_ICON = "http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/48/Actions-arrow-left-icon.png";
	private static final String RIGHT_ICON = "http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/48/Actions-arrow-right-icon.png";
	private static final String IMAGE = "http://www.hostpaperz.com/wp-content/uploads/2013/06/616498554_1357418372.jpg";

	@Override
	public void start(Stage stage) throws Exception {

		final ScrollPane scrollPane = new ScrollPane();
		scrollPane.setContent(addImages());
		scrollPane.setVbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);

		/**
		 * Stackpane to stack images with Buttons
		 */
		StackPane stackPane = new StackPane();
		stackPane.getChildren().addAll(scrollPane, addButtons(scrollPane));
		Scene scene = new Scene(stackPane, 500, 160);
		scene.getStylesheets().add(getClass().getResource("scrollButton.css").toExternalForm());
		stage.setScene(scene);
		stage.show();
	}

	public static void main(String args[]) {
		launch(args);
	}

	public HBox addImages() {
		HBox hBox = new HBox();
		hBox.setSpacing(10);
		// Adding icons of images to the HBox for creating the array of images

		for (int i = 0; i < 10; i++) {
			final ImageView image = new ImageView(IMAGE);
			image.setFitHeight(160);
			image.setPreserveRatio(true);
			image.setSmooth(true);
			image.setCache(true);

			//Adding FullScreen functionality on double Click !
			image.setOnMouseClicked(new EventHandler<MouseEvent>() {

				@Override
				public void handle(MouseEvent mouseEvent) {

					if (mouseEvent.getButton().equals(MouseButton.PRIMARY)) {

						if (mouseEvent.getClickCount() == 2) {

							BorderPane borderPane = new BorderPane();
							ImageView imageView = new ImageView();
							imageView.setImage(image.getImage());
							imageView.setFitHeight(Screen.getPrimary()
									.getBounds().getHeight() - 10);
							imageView.setPreserveRatio(true);
							imageView.setSmooth(true);
							imageView.setCache(true);
							borderPane.setCenter(imageView);
							Stage newStage = new Stage();
							newStage.setWidth(Screen.getPrimary().getBounds()
									.getWidth());
							newStage.setHeight(Screen.getPrimary().getBounds()
									.getHeight());
							newStage.setScene(new Scene(borderPane));
							newStage.show();

						}

					}
				}
			});
			hBox.getChildren().addAll(image);
		}

		return hBox;
	}
	
	//Adding Buttons to the ScrollPane
	private AnchorPane addButtons(final ScrollPane scrollPane)
	{
		Button right = new Button();
		right.setPrefSize(50, 150);
		right.setGraphic(new ImageView(new Image(RIGHT_ICON)));
		//Making the scroll move right
		right.setOnAction(new EventHandler<ActionEvent>() {

			@Override
			public void handle(ActionEvent arg0) {
		        scrollPane.setHvalue(scrollPane.getHvalue() + speed);
			}
		});
		
		Button left = new Button("Left");
		left.setPrefSize(50, 150);
		left.setGraphic(new ImageView(new Image(LEFT_ICON)));
		//Making the scroll move left
		left.setOnAction(new EventHandler<ActionEvent>() {

			@Override
			public void handle(ActionEvent arg0) {
		        scrollPane.setHvalue(scrollPane.getHvalue() - speed);
			}
		});
		
		AnchorPane box = new AnchorPane();
		AnchorPane.setLeftAnchor(left, 1.0);
		AnchorPane.setRightAnchor(right, 1.0);
		box.getChildren().addAll(left,right);
		
		return box;
	}

}

scrollButton.css

/*Transperency for button and scrollbar*/
.button {
	-fx-background-color: transparent;
}


.scroll-bar:horizontal {
    -fx-background-color: transparent;
}
.scroll-bar:horizontal .thumb {
  -fx-background-color: transparent;
}
.scroll-bar:horizontal .track {
    -fx-background-color: transparent;
}
.scroll-bar:horizontal .track-background {
    -fx-background-color: transparent;
}

.scroll-bar:horizontal .decrement-arrow {
   -fx-background-color: transparent;
}

.scroll-bar:horizontal .increment-arrow {
    -fx-background-color: transparent;
}

.scroll-bar .increment-button {
    -fx-background-color: transparent;
}

.scroll-bar .decrement-button {
   -fx-background-color: transparent;
}

Solution for

http://stackoverflow.com/questions/22708506/how-to-display-a-gallery-of-small-picture-icons-in-a-left-right-horizontal-navig

Excellent thank you so much!!