As you are aware, Facebook uses the data from Open Graph meta tags to populate the share window.
The thumbnail image displayed in the Facebook share window is determined by the og:image tag and this image is used no matter what image is displayed in the gallery. (You can think of this image as representing the gallery as a whole.)
The og:image tag cannot be modified client-side using JavaScript when a new image is selected (at least not so that it will be picked up by Facebook) so your server-side solution to dynamically create a web page with an appropriate og:image entry is certainly a suitable workaround.
When entering a url on iOS http://abc..../gallery/#5 always the first image is shown but not the 5th.
If using #5 in a URL (for example), then the 5th image in the gallery should initially be displayed in Mobile Safari on iOS devices (and on all other mobile browsers) as long as:
(1) The Splash Page is not used.
(2) Thumbnails are not set to display on load.
You would need to set both showSplashPage="NEVER" and showSmallThumbsOnLoad="FALSE" in order for the # to work in Small Screen Mode.
The problem with that is that the jukebox code is obfuscated and I don't have any idea which variable I could modify to achieve this behavior. Any idea about that?
Unfortunately, modifying the source code is not supported. Please see this FAQ:
Does Juicebox-Pro include the source code?
Just a thought but maybe you could use JavaScript to grab the # value from the URL and then internally set the firstImageIndex configuration option within your gallery's embedding code. This might work better for you.