how can I share one image not the gallery?
It is not possible to have the shared image's thumbnail displayed in the pop-up Facebook share window due to limitations imposed by Facebook on what data can be passed via their share URL. Only one thumbnail image can be used per web page. However, the shared link will still point towards the correct image within your gallery, though.
The image used in the pop-up Facebook share window is set using an Open Graph og:image meta tag in the <head> section of your web page, such as the following:
<meta property="og:image" content="http://www.example.com/images/thumbnail.jpg" />
Please see here for more details on the Open Graph protocol.
You can think of the og:image as being representative of the gallery as a whole so you could use an image which best represents your gallery. (The og:image does not need to be an image from the gallery.)
If you create a gallery with JuiceboxBuilder-Pro, an og:image meta tag will be automatically generated and included in the gallery's 'index.html' file (pointing towards the first image in the gallery). If you are embedding your gallery in an existing web page alongside other content, then you will need to add an og:image meta tag manually.
Although the thumbnail image displayed in the pop-up Facebook share window will always be the same one (specified via the og:image meta tag), the link being shared will still point correctly towards the shared image in the gallery. You should notice that the URL being shared ends with something like #2 or #17 where the number represents the image in the gallery. When a user clicks on a shared link, the corresponding shared image will be opened in the gallery.
Can I handle the click on share facebook button and open another dialog?
If you really wanted to override Juicebox-Pro's click handler for the Facebook share button, you could try something like the following which will allow you to run your own custom JavaScript code when the Facebook share button is clicked.
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
containerId: "juicebox-container",
shareFacebook: "TRUE"
});
jb.onInitComplete = function() {
$('.jb-bb-btn-facebook').off('click');
$('.jb-bb-btn-facebook').click(function() {
// Custom JavaScript code to be run when Facebook share button is clicked goes here
});
};
</script>
This uses the Juicebox-Pro API (specifically the onInitComplete event) to ensure that the Facebook share button is present in the DOM (Document Object Model) before any actions are performed on it.
Please note that Juicebox-Pro was not designed with this functionality in mind (user overrides for Button Bar buttons) and whilst you are free to use such modifications, they are not officially supported (and you may run into unforeseen problems that might have to be tackled along the way).