1 Topic by wsw (edited by wsw 2016-01-09 18:39:58)

  • wsw
  • Member
  • Offline
  • Registered: 2013-10-15
  • Posts: 10

Topic: Direct Image URL with Identifer

The enableDirectLinks option enables you to target a specific image by using its index in the gallery.

Is it possible to target an image via an identifier other than the image index in the gallery ?

Let's say I have an image at index #3 and I send a link to it: 

http://mysite.com/gallery#3

If I move the image to index #4, then the above URL will display another image.

If the link were 

http://mysite.com/gallery#<image_name>

then the URL would have displayed the same image.

Is this possible ?

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Direct Image URL with Identifer

No, unfortunately not.
The code which handles the direct linking functionality is buried within the 'juicebox.js' JavaScript file which is packed and obfuscated and cannot be modified.

  • sly
  • Member
  • Offline
  • Registered: 2016-02-21
  • Posts: 4

Re: Direct Image URL with Identifer

Was this feature possibility added in the mean time?
The post is 4 years old now.

I'd like to have direct links to an image inside a jukebox gallery. For example to link the image from facebook.
What is the solution for this?

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Direct Image URL with Identifer

No. Direct linking still uses only the image index number.
It is easy to allocate each image in a gallery a unique number but it would be more difficult to allow image names to be used. Some kind of mapping (image name <--> image number) might be required.

You can still link directly to an image within a Juicebox gallery from Facebook (or any other web page) as long as you know the position of the image in the gallery (which should be fine as long as you do not set randomizeImages="TRUE").
Here is a link to the 7th image in one of our demo galleries: http://juicebox.net/demos/pro/full/#7
If you wanted to use a link like this on your Facebook page, just be sure to use the whole URL (including the '#7' part at the end).

If you like, please feel free to post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked by the developers. Thank you.

  • sly
  • Member
  • Offline
  • Registered: 2016-02-21
  • Posts: 4

Re: Direct Image URL with Identifer

Hi Steven, hi all.

Thanks for the answer. Finally I got it to work but having some caveats on iOS that I'd like to share with you and asking for solutions.

The problem when sharing images on Facebook using the image number like http://xyz/mygallery/#5 is that juicebox do not deliver open graph tags (go:url, go:title, ...) for the shared image but for the whole gallery. Because Facebook requires proper set open graph tags, the image can't be shared. The image preview and description does not match the actual image.

The reason for this behavior is simple and easy to follow from the perspective of juicebox: The http selector (#) is evaluated in the user agent via javascript, while the open graph tags are rendered by a static HTML page before javascript is evaluated. It is not easy (I think impossible) to adjust the open graph tags via javascript in a way that Facebook will go fine with it.

My Solution: In cases where I like to have an external link for Facebook, Twitter or somewhat that requires proper set open graph tags, I'm using a different url layout: http://xyz/mygallery/index.php?Img=images%2Fmyimage5.jpg#5. The Img parameter can be evaluated on server side and a proper site with correct open graph tags can be rendered. The # can't be used for that because it isn't passed to the server. For a convenient usage of juicebox, I've overriden the javascript twitter, Facebook, .. handlers. When clicking the Facebook share icon in my gallery, the correct Facebook share URL including the Img parameter is generated. The image name is taken from the config.xml that gets parsed via javascript. On server side there is a index.php file that parses the config.xml file too. It renders the open graph tags dynamically and adds the image title, description and so on to the page. If you reorder or add additional images to the gallery, the image numbers will change. For that case the php script ensures the appropriate image number is used in url by modifying the url. The script ensures that the leading image selector is the Img parameter and not the # http selector.

It took me some hours to getting all these things to run. Finally it works really nice. For those who like to see that in action, can check my private website http://www.sk-sly.de

Now the caveat that seems to be a general problem that has nothing in common with my solution.
URL selectors (#) and juicebox seem not to work on iOS with safari! When entering a url on iOS http://abc..../gallery/#5 always the first image is shown but not the 5th. Please try it with you galleries. It seems that the selector is not evaluated by safari on iOS or something strange inside of the juicebox javascript code happens. On OS X with safari or other browsers everything works properly.

Does anyone know something about this issue? Is this a Safari problem on iOS or is the juicebox code broken here?

A solution for this caveat could be for me to initialize the juicebox java script by a code block that is rendered by my php script. In know on server side exactly which image has to be shown. 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?

In general I think that it wasn't the best decision of the juicebox developers to use a http selector (#) as image selector. The selector isn't passed to the server and open graph tags can't be rendered properly. We are running into problems with iOS. Links are not stable because the image order could change by resorting or inserting new images.

Regards!
Sly

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Direct Image URL with Identifer

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.

7 Reply by sly (edited by sly 2016-04-09 00:36:27)

  • sly
  • Member
  • Offline
  • Registered: 2016-02-21
  • Posts: 4

Re: Direct Image URL with Identifer

Thanks for this great help!

Indeed, setting showSplashPage="NEVER" and showSmallThumbsOnLoad="FALSE" solved the problem. When I enter a url with #<number> on iOS / safari, the proper image is shown. Thanks for that!

Sadly this does not work when I share an image on FB.

The open graph tags are set correctly:

  • og:url points to the gallery including my “Img” parameter and the correct # number

  • og:image points directly to the jpeg

The facebook preview and posting are correct. When I click on the FB post on iOS, the gallery shows the first image but not the correct one. The gallery page is shown in a safari control that is embedded in the FB app. If I hit “open in safari” or “share / copy link” and paste the url in a native safari, the correct image is shown.

No idea what is going on here. Safari behaves different when embedded in the FB app.
Now we are far away from juicebox :) Any idea?

Back to your thought: Do you have an example how to set the firstImageIndex configuration option via JS?
The lack of the splash page on small devices is really frustrating. I'm looking for another solution.

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Direct Image URL with Identifer

Safari behaves different when embedded in the FB app.
Now we are far away from juicebox :) Any idea?

Unfortunately not. Maybe someone else can help to shed some light on this for you.

Do you have an example how to set the firstImageIndex configuration option via JS?

You could try the following (which should hopefully work when expanding the gallery from the Slash Page).
Sample URL for code below: http://www.example.com/gallery/index.html#5

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>

var hash = 1;

if (window.location.hash) {
    hash = window.location.hash.substring(1);
}

new juicebox({
    containerId: 'juicebox-container',
    firstImageIndex: hash
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

You could do something similar if you wanted to use a query string instead of a hash.
Sample URL for code below: http://www.example.com/gallery/index.html?id=5

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>

var value = 1;

if (window.location.search) {
    var queryString = unescape(window.location.search);
    var queryArray = {};
    var re = new RegExp("([^?=&]+)(?:=([^&]*))?", "g");
    var queryComponent = null;
    while (queryComponent = re.exec(queryString)) {
        queryArray[queryComponent[1]] = queryComponent[2];
    }
    value = queryArray["id"];
}

new juicebox({
    containerId: 'juicebox-container',
    firstImageIndex: value
});
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Incidentally, I have notified the developers to let them know that a # in URL is currently ignored when expanding a gallery from a Splash Page. Hopefully the # can be respected in this scenario in a future version.

  • sly
  • Member
  • Offline
  • Registered: 2016-02-21
  • Posts: 4

Re: Direct Image URL with Identifer

Thanks for the support.

The point is that even if you set firstImageIndex to the right index, juiceebox do not show the correct image if showSplashPage is not  set to "NEVER".
The correct image is shown after you tap the image (then full html is loaded and show the correct image)

So # in the URL as well as the firstImageIndex do not work on mobile devices if splash page is activated :(

  • Registered: 2012-04-24
  • Posts: 5,904

Re: Direct Image URL with Identifer

The image used for the Splash Page can be set via the splashImageUrl configuration option.
If a splashImageUrl is not explicity set, then Juicebox will use the first image in the gallery.
This is by design. The # identifier and firstImageIndex option have no effect on the Splash Page image.

If you like, please feel free to post suggestions for future versions in the Feature Requests forum thread.
This keeps all the ideas together and ensures that they are not overlooked. Thank you.

You could use JavaScript to fetch the image corresponding to a # identifier or query string variable from the gallery's XML file and set the splashImageUrl dynamically.
Here's an example using the # identifier. (You could use a query string variable instead if you like.)

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>

    var hash = 1;

    if (window.location.hash) {
        hash = window.location.hash.substring(1);
    }

    var splash = '';

    $.get('config.xml', function(data) {

        splash = $.trim($(data).find('juiceboxgallery').find('image').eq(hash - 1).attr('imageURL'));

    }).done(function() {

        new juicebox({
            containerId: 'juicebox-container',
            splashImageURL : splash
        });

    }).fail(function() {

        alert('Cannot fetch image for Splash Page.');

    });

</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->