@alessio
It is not possible to have parts of the previous and next images visible to the left and right of the main image (like in the gallery whose link you provided) but you could have the next image as the gallery's background.
You would need to use several Juicebox-API methods to fetch the URL of the next image in the gallery and then set the gallery container's background via CSS (using JavaScript) each time a new image is selected.
As an example, create a sample gallery with JuiceboxBuilder-Pro and use the following code as the gallery's 'index.html' file.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Juicebox-Pro Gallery</title>
<meta charset="utf-8" />
<meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
<style type="text/css">
body {
margin: 0px;
}
</style>
</head>
<body>
<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: 'juicebox-container',
backgroundColor: 'rgba(0,0,0,0)',
enableLooping: 'TRUE'
});
// Run each time a new image is selected
jb.onImageChange = function(e) {
// Get current image id
var image = e.id;
// Get total number of images in gallery
var total = jb.getImageCount();
// Set next image id (set to 1 if current image is last in gallery)
var next = image === total ? 1 : image + 1;
// Get info for next image
var info = jb.getImageInfo(next);
// Get url for next image
var url = info.imageURL;
// Set background
$('#juicebox-container').css('background', 'linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url("' + url + '")').css('background-position', 'center').css('background-size', 'cover');
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->
</body>
</html>