• dlin
  • Member
  • Offline
  • Registered: 2014-12-10
  • Posts: 1

Topic: Share function and publishing

I am having a hard time publishing my gallery. Use case: I would like to embed my Juicebox gallery in a tab on one of our landing pages. This is a bootstrap tab, and when I drop the embed code in there, the gallery returns very funky (screenshots attached).

I am also trying to set up the Sharing function with just Twitter sharing, and I want the tweet to have the name of the event, and also the URL to share the image. I'm not 100% which URL to use. To make things easier, this is the link to the landing page I want to embed the gallery in: https://twitter.twimg.com/FurtherFasterNL. There will be a 4th tab where the gallery is embedded. For the ShareURL I put "https://twitter.twimg.com/FurtherFasterNL", but I'm not sure if that is the correct link to insert, or if "https://twitter.twimg.com/FurtherFasterNL#tab_gallery" would be the right URL.

Please let me know what I should be doing to fix the issues. Thanks!

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

Re: Share function and publishing

First of all, please try re-uploading your gallery's 'jbcore' folder to your web server to ensure that all core Juicebox files are present and correct (in case something happened during the initial upload resulting in corrupt or missing files).

Also, the problem may be due to a conflict between the CSS code for the gallery and some custom CSS code on your web page.
If you have any generalized custom CSS code on your web page (which, for example, might apply certain CSS rules to all <div> or <img> tags on the web page), try applying your CSS code to only those elements on your web page which require these rules through use of CSS selectors (ids or classes).
Unfortunately, it is not possible to isolate a Juicebox gallery (or any other element) on a web page to prevent it from inheriting global CSS rules.

You may also need to delay the loading of the gallery until the tab containing the gallery is clicked (when the gallery's parent container will be visible on screen).
If you load the gallery as soon as the page loads, then the container that the gallery is embedded into will not yet be visible on screen (it will be visible only after the tab has been clicked) and it will essentially have no dimensions associated with it. This will affect the sizing of the gallery.
The solution would be to wrap your gallery's embedding code in a JavaScript function and run the function when the tab is clicked (using a click handler on the tab/link).

The shareUrl is used only by JuiceboxBuilder-Pro to set the absolute paths for the Open Graph meta tags in the gallery's 'index.html' page.
The shareUrl should be set to the directory which contains the page with the gallery's embedding code.
If you are embedding a gallery in a web page of your own (and not using the 'index.html' page generated by JuiceboxBuilder-Pro), then the shareUrl will not be used.
Just be sure to use absolute paths if you manually include any Open Graph tags in your web page.
With regard to Twitter sharing, the text and URL sent to Twitter are automatically determined by Juicebox-Pro (without using the actual shareUrl within JuiceboxBuilder-Pro).