Using my example, you'd still need to use the custom_function() JavaScript function but setting imageClickMode="OPEN_URL" would essentially take the place of your jQuery click handler (at least for clicks on the gallery images... you'd still need your own custom click handler for your regular non-gallery links).
Instead of:

<script>
    function custom_function(text) {
        alert(text);
    }
</script>

... use:

<script>
    function custom_function(parameter) {
        callDinamicPage('mainContent', parameter, 'page', '');
    }
</script>

You'd also need to pass the value of what would be the data-toggle attribute (in a regular non-gallery link) as a parameter in the call to the function (in the linkURL), e.g.:

linkURL="javascript: custom_function('xyz');"

(This assumes that 'xyz' is a valid data-toggle attribute for your scenario. Just change this for each linkURL as necessary.)

As I mentioned above, you'd still need to include your own custom click handler:

<script>
    $('.link').click(function() {
        callDinamicPage('mainContent', $(this).attr('data-toggle'), 'page', '');
    });
</script>

... on your web page to handle your regular non-gallery links.

952

(5 replies, posted in Juicebox-Lite Support)

If you have recently tagged your images, it may take some time for the tags to fully propagate through Flickr's system and show up in Flickr API searches (such as that performed by Juicebox to fetch the images from Flickr's servers).
I notice that Flickr have changed their help pages since I was last over there but they used to claim that "it shouldn't take more than a few days until your photos appear in searches".

Also, try entering your Flickr User Id (31127325@N06) and Tags into their online Explorer to see what images are returned.
The result should be consistent with the images displayed by Juicebox.
(At the moment, no images are returned so it certainly looks like the tags are just not active yet within Flickr's API.)

It, after a couple of days, the tagged images are still not showing up in Flickr API searches, try removing the current tags and then re-add them to see if this makes a difference.

Thank you for the clarification.
So you want to run a custom JavaScript function when a main image is clicked...
Juicebox-Pro was not designed with this in mind but you could try the following:

(1) Set imageClickMode="OPEN_URL".
(2) Set all your linkURL entries (in the gallery's XML file) to linkURL="javascript: custom_function();" (to run a custom JavaScript function named custom_function() in the gallery's embedding page when the image is clicked).
(3) Set all your linkTarget entries (also in the gallery's XML file) to linkTarget="_self".

In  order for your function to know which image has been clicked (and, therefore, how to proceed), you could either:

(1) Pass a parameter (or parameters) to the custom function, e.g.:

linkURL="javascript: custom_function('abcdef');"
linkTarget="_self"
<!--START JUICEBOX EMBED-->
<script>
    function custom_function(text) {
        alert(text);
    }
</script>
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        imageClickMode: "OPEN_URL"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

... or:

(2) Use the Juicebox-Pro API (in this example, the getImageIndex() function) within the custom JavaScript function to determine which image has been clicked.

linkURL="javascript: custom_function();"
linkTarget="_self"
<!--START JUICEBOX EMBED-->
<script>
    function custom_function() {
        var index = jb.getImageIndex();
        alert('Image #' + index + ' has been clicked.');
    }
</script>
<script src="jbcore/juicebox.js"></script>
<script>
    var jb = new juicebox({
        containerId: "juicebox-container",
        imageClickMode: "OPEN_URL"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

Please note that this will not work if you use a baseUrl or when the gallery has been expanded.

I hope that this points you in the right direction. (Just replace the contents of the custom JavaScript function with your own code.)

I'n not really sure exactly what it is you are looking to do.
Perhaps you could provide a link to your website and explain further what you are looking to do (and what you would like to happen).

In the meantime, from your topic subject ("How to configure Image click to open url in a part of the page?"), it sounds like you might want the content of the linkURL to appear on your gallery's web page, alongside your gallery. If so, then you could maybe create an <iframe> on your gallery's web page, with a specific id and name, and then use this id/name as the linkTarget to load the linkURL into the <iframe>.

For example:

    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        containerId: 'juicebox-container',
        imageClickMode: 'OPEN_URL',
        galleryWidth: '600',
        galleryHeight: '400'
    });
    </script>
    <div id="juicebox-container"></div>
    <iframe id="xyz" name="xyz" width="600" height="400"></iframe>
    <!--END JUICEBOX EMBED-->

A sample <image entry in your gallery's 'config.xml' file might look something like this:

  <image imageURL="images/image_0001.jpg"
    thumbURL="thumbs/image_0001.jpg"
    linkURL="http://www.example.com"
    linkTarget="xyz">
    <title><![CDATA[Image title goes here.]]></title>
    <caption><![CDATA[Image caption goes here.]]></caption>
  </image>

I hope this helps.
If not, then please try to explain in greater detail what you are looking to do and I'll try to help further.
Thank you.

You're welcome!
I'm glad it solved your problem.
Thanks for posting back to let me know.

The problem with your 'netherlands' gallery is with the gallery's 'config.xml' file.
There is a blank line (whitespace) before the XML declaration (<?xml version="1.0" encoding="UTF-8"?>) which breaks the XML file.
The XML declaration should be at the very top of the document with nothing (not even whitespace) before it.
If you view your http://collpicto.com/xml/netherlands.xml file directly in a browser (bypassing Juicebox), you will see that the browser detects and reports the following error:

XML Parsing Error: XML or text declaration not at start of entity
Location: http://collpicto.com/xml/netherlands.xml
Line Number 2, Column 1:<?xml version="1.0" encoding="UTF-8"?>
^

Just remove the whitespace before the XML declaration in your gallery's 'config.xml' file and all should be well.

957

(1 replies, posted in Juicebox-Pro Support)

I'm sorry to hear that you are having trouble with Juicebox-Pro.
Hopefully my notes below will help.

Thank you for providing the URL to your gallery's web page via email.
I'm not sure what is causing your problem but here are a few things to check and try:

(1) First of all, try clearing your browser's cache before reloading your gallery's web page to see if this helps.

(2) I notice that your gallery's 'jbcore' JavaScript and CSS files ('juicebox.js' and 'theme.css') have been modified (comments removed and minimized). Try reinstating all 'jbcore' files and leave them exactly as they are (without modification) to see if this makes a difference. (If the files are being modified my a third-party module, then try temporarily disabling it.)

(3) As the comments have been removed from the 'jbcore' files, I cannot tell at a glance which version of Juicebox-Pro you are using. Please make sure that you are using the latest version (v1.5.1). If necessary, instructions for upgrading can be found here.

(4) Try setting expandInNewPage="TRUE" (to expand the gallery from the Splash Page on a new web page of its own rather than on top of the embedding page).

(5) Try fixing the HTML errors on your web page. You can validate the code on your web page with the W3C Markup Validation Service and then fix the errors reported. I realise that this might be quite difficult in a Drupal environment where the code is generated automatically (by themes and modules) but there are many errors on your web page (including duplicate ids and stray end tags) and this may be causing your problem. (Some browsers may be more tolerant towards HTML errors than others.) Once the code on your web page validates correctly, your web page should be rendered with greater consistency and predictability across different browsers. (Suggestion #4 above might avoid the problem by expanding the gallery on a new web page of its own away from the embedding page containing the HTML errors.)

(6) I notice that you use the Drupal module which is an unofficial plugin (not written by ourselves). As such, if you find that none of the suggestions above help, you might like to post in the Drupal forum where the author of the module might have heard of your problem before and be able to offer help.

Incidentally, please note that the UC Web Browser is an unsupported browser (Juicebox-Pro is not tested on the UC Web Browser) but Chrome is supported and Juicebox-Pro should (under normal circumstances) work fine in Chrome.

I hope that these notes help (or at least point you in the right direction).

958

(1 replies, posted in Juicebox-Pro Support)

The first images in each of your galleries have different sizes. The first image in your Azores gallery is 2048 x 1364 and the first image in your CruisePanamaCanal2011 gallery is 1024 x 684.
However, they do have very similar (though not identical) aspect ratios and are, therefore, displayed very similarly in your Juicebox-Pro galleries when I view them in my own browsers.
I don't see the problem that you seem to be describing. Perhaps you could provide a couple of screenshots to let me see what you are seeing.
In the meantime, maybe my notes below will be able to clarify a few things.

When displaying a gallery, Juicebox-Pro reserves space for the thumbnails and the TOP area (if used) and the main images are then dynamically scaled (according to the imageScaleMode value) in the remaining space.
The default value for imageScaleMode is SCALE_DOWN (you can check out all the possible values for this configuration option in the Main Image section here) where Juicebox-Pro will dynamically scale down the images (if necessary) to fit within the gallery's image area as large as possible whilst respecting each image's aspect ratio and without cropping. Images smaller than the gallery's image area will not be scaled up. If you are viewing your galleries on a very large monitor, then this might account for the difference you reported. The first Azores image, being 2048 x 1364 might be dynamically scaled down slightly but the first CruisePanamaCanal2011 image, being 1024 x 684, might be displayed at actual size (not scaled up). I cannot be sure of this as I don't know the browser viewport size you are using to view your galleries. If you want small images to be dynamically scaled up, then set imageScaleMode to SCALE. (However, this may reduce the visual quality of the image and a better solution would be to use larger gallery images.)

If you are concerned that the images are not filling as much of the width of your gallery as expected, then this is more than likely to be an aspect ratio issue.
If the aspect ratio of the image is not identical to the aspect ratio of the gallery's image area, then the image will be displayed as large as possible within the gallery's image area without cropping and this might mean that there is space to the left and right (or top and bottom) of the image.
If you want the image to completely fill the gallery's image area, then you can set imageScaleMode to FILL (cropping may occur) or STRETCH (stretching may occur).
However, if you increase your gallery's height (without changing its width), then you will increase the size of the gallery's image area (and change its aspect ratio) and the image will be able to be displayed larger, reducing the space surrounding the image.

Please see this FAQ which describes what I have noted above:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

Incidentally, I notice that you give your gallery a height of 100%. This means that your gallery will completely fill the height of it's parent container so please ensure that you have assigned your gallery's parent container a height via CSS, otherwise, Juicebox-Pro will not know what the gallery's height should be 100% of. (When using a percentage height, you might also need to implement the suggestion noted here.) You might like to try setting your gallery's height to a fixed pixel value (for example, '800px') instead.
Otherwise, if you want to have a web page with a fixed header (and/or footer) and have the gallery take up the remainder of the web page (without any vertical scrolling), then please take a look at the Using a Resizable Gallery with a Header support section (specifically the View Resizable Gallery with Top Menu Example). You can view the source of the sample web page in your browser and copy or modify the code to suit your own needs.

959

(8 replies, posted in Juicebox-Pro Support)

No problem!
If you ever have a problem with a Juicebox gallery not displaying again, just post back and I'll do my best to help you out.

960

(8 replies, posted in Juicebox-Pro Support)

Skip straight to the edit below if you like.
I include my original post for the sake of completeness.

Original post:
Thank you for providing the additional information and files.
Bottom line is that it looks like it might be a syntax highlighting problem with Dreamweaver.

The apostrophe and double quote are both used to open and close quotations, e.g. 'hello or "hello".
In an XML file they are both XML entities and, if they are not enclosed within CDATA tags, they should be escaped (as &apos; and &quot; respectively). Please see here for details.

If you use a single ' or ", then a syntax highlighting program might think that it is the start of a quotation and look for a matching closing ' or " (and highlight everything in between).

However, your ' and " characters are enclosed within CDATA tags (which JuiceboxBuilder-Pro automatically generates) so they do not need to be escaped.
Moreover, the entry that you refer to (turning all text green) includes two " characters (which open and close the quotation) so the program should not be looking for a third " character before turning the green highlighting off.

Check the lower-right corner of your Dreamweaver window and you should find a language selector (as seen in the second screenshot in this Adobe forum post). Make sure that it is set to XML (and not something else such as HTML). This might help. Otherwise, it looks like it might be a syntax highlighting problem with Dreamweaver.

Edit:
I've just found this Adobe forum thread (entitled "XML code coloring incorrectly parses in CDATA areas") which seems to confirm that it is a Dreamweaver problem ("Dreamweaver's code coloring doesn't recognize CDATA sections.") dating back to 2009 so I'd recommend using a different program to validate your XML code.

961

(3 replies, posted in Juicebox-Pro Support)

That's great! Thank you for letting me know.

962

(8 replies, posted in Juicebox-Pro Support)

I am still intrigued by the fact that the config.xml font color changes to green as soon as an apostrophe - or quotation mark - is found anywhere in the caption text.

I don't know what program you are using to inspect your gallery's 'config.xml' file (maybe a browser or a text editor) but it could be that the syntax highlighting looks incorrect because the language (in whatever program you are using) is not set to 'XML'.
Please let me know what program you see the green text in (and double-check that its language/syntax highlighting is set to 'XML').
If the browser reports no errors when you open the 'config.xml' file directly and the gallery displays fine, then it is unlikely that there is a problem with the file and the issue is likely to be an incorrect language/syntax highlighting setting in whatever program you see the green text in.
By all means attach your 'config.xml' file to a post (or provide a link to it) and I'll take a look at it for you.

963

(8 replies, posted in Juicebox-Pro Support)

Using an apostrophe in an image title or caption should not cause any problems (on a Linux or Windows server) so there might be a problem elsewhere in your 'config.xml' file (like something begin enclosed in single quotes which your apostrophe is closing off).
Try opening your 'config.xml' file directly in your browser and, if there is a problem with the syntax of the XML file,  then your browser should hopefully tell you what the problem is and at which line in the file the problem occurs.

It is always a good idea to enclose image title and caption text inside <![CDATA[ ... ]]> tags (essential when using HTML code within an image title or caption) but this should not be necessary for just an apostrophe.

For example:

<title>The cathedral's four rectilinear stained glass windows.</title>

... should cause no problems (either with the syntax of the XML file or with the display of the gallery). With <![CDATA[ ... ]]> tags, it would look like this:

<title><![CDATA[The cathedral's four rectilinear stained glass windows.]]></title>

(If you enter the image title or caption within JuiceboxBuilder-Pro's interface, then <![CDATA[ ... ]]> tags will automatically be used.)

I hope this helps.
However, if you continue to experience difficulties, please provide your gallery's 'config.xml' file (attach it to a post or post a link to it) and I'll take a look and hopefully figure out exactly what the problem is. Thank you.

964

(3 replies, posted in Juicebox-Pro Support)

You're welcome!
I'm glad that solved your problem. Thank you for letting me know.

965

(3 replies, posted in Juicebox-Pro Support)

Set imageClickMode="OPEN_URL" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) and set a linkURL for your main image. In JuiceboxBuilder-Pro, just click the corresponding thumbnail on the 'Images' tab and you'll see the place to enter your LinK URL at the bottom of the window.

When imageClickMode="OPEN_URL", normally Juicebox-Pro will open the imageURL (the image itself) in a new tab but if the image has a linkURL assigned to it, then the linkURL will be opened instead.

If you manually edit your gallery's 'config.xml' file, then the <image> entry might look something like this:

<image imageURL="images/image_0001.jpg"
    thumbURL="thumbs/image_0001.jpg"
    linkURL="images/image_0001.jpg"
    linkTarget="https://www.google.com/maps?q=37.819722,-122.478611">
    <title><![CDATA[Image title text goes here.]]></title>
    <caption><![CDATA[Image title text goes here.]]></caption>
</image>

Otherwise, you can add a link to an image title or caption using HTML formatting (or more specifically an HTML <a> tag) as noted in this FAQ:
How do I add HTML formatting to image captions and titles? - https://www.juicebox.net/support/faq/#custom-3

You could enter HTML such as the following into JuiceboxBuilder-Pro's interface:

<a href="https://www.google.com/maps?q=37.819722,-122.478611">Click here to view in Google Maps.</a>

If you manually edit your gallery's 'config.xml' file, then you'll need to wrap the HTML inside <![CDATA[ ... ]]> tags and the <title> (or <caption>) entry might look something like this:

<title><![CDATA[<a href="https://www.google.com/maps?q=37.819722,-122.478611">Click here to view in Google Maps.</a>]]></title>

I hope this helps.

966

(2 replies, posted in Juicebox-Pro Support)

I'm not sure what the problem might have been but I'm glad that you have been able to resolve it.
Thank you for letting me know.

There is really no reason why a gallery created with JuiceboxBuilder-Pro should result in a "Config file not found." message (unless you are viewing your gallery locally in Safari 11, in which case please see this forum post for details).

If you encounter the problem again, just post a link to your gallery (like you did above) so that I can see the problem for myself and investigate further. Thanks!

967

(3 replies, posted in Juicebox-Pro Support)

You can set your gallery's background to be transparent by setting the Background Color Opacity (in JuiceboxBuilder-Pro's 'Customize -> Lite' section) to '0' (zero).

When setting the Background Color in JuiceboxBuilder-Pro, the application sets the backgroundColor configuration option in the gallery's embedding code (presented on the 'Publish' tab and in the gallery's 'index.html' file) instead of in the gallery's 'config.xml' file.

You can easily add a backgroundColor entry to your own gallery's embedding code.
Use backgroundColor: "rgba(0,0,0,0)" to make your gallery's background transparent. (It's the 4th '0' (the alpha channel in the rgba notation) that actually makes the background transparent.)
(Be sure to separate all options within the embedding code with commas.)

For example:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
    new juicebox({
        containerId: "juicebox-container",
        galleryWidth: "100%",
        galleryHeight: "100%",
        backgroundColor: "rgba(0,0,0,0)"
    });
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

I hope this helps.

968

(3 replies, posted in Juicebox-Pro Support)

The problem was related to case sensitivity.

I glad that you've been able to find and resolve your problem.
Thank you for letting me know. It's most appreciated.

P.S. Let me say furthermore that - also as per previous experience - the Juicebox support is top-notch ! Thank you.

You're welcome! (And thanks for saying so!)

969

(3 replies, posted in Juicebox-Pro Support)

According to your gallery's 'config.xml' file, the first image in your gallery should be located here: http://vande.ch/photos/ItalyCroatia/Pic … a_0001.jpg
However, going directly to that location in a browser (bypassing Juicebox) results in an error 404 (file not found).

Here are a few suggestions which should help to resolve your problem.

(1) Please double check that your gallery's 'images' and 'thumbs' folders (and the image files inside them) have been uploaded to the correct location on your web server. The 'images' and 'thumbs' folders should be directly inside your '/Pics/' folder.

(2) If the image files are in the correct location on your web server, then please check their permissions (and the permissions of the 'images' and 'thumbs' folders themselves) to ensure that they are not too restrictive. Default file permissions of 644 for files and 755 for folder should be fine. You should be able to check and change permissions using either a dedicated FTP program such as Filezilla or via your web hosting account's online file manager. If you have trouble checking and changing file and folder permissions on your web server, then your web host should be able to help you out with this.

(3) Please also see this FAQ which deals with the problem you describe and has an additional suggestion (to check that the imageURL and thumbURL filenames listed in the 'config.xml' file exactly match the actual image filenames, taking care with case-sensitivity, i.e. lowercase vs uppercase, as .jpg is not the same as .JPEG).
My images show locally, but not when I upload them to my website. Why?

I hope that these suggestions help to resolve your problem.
Please let me know how you get on.

970

(1 replies, posted in Juicebox-Pro Support)

We do not provide any hosting services or web space at all.

When you purchase Juicebox-Pro, we provide the installation file for JuiceboxBuilder-Pro (a desktop application to create and edit Juicebox-Pro galleries on your computer), the Juicebox-Pro plugin for Lightroom (a web engine to create Juicebox-Pro galleries within Adobe Lightroom) and the Juicebox-Pro files (to create Juicebox-Pro galleries manually if you like).

Once you have created a gallery on your computer, you would need to upload it to a web server somewhere so that the gallery is publicly visible on the internet.
We do not provide any hosting services but there are many web hosts that offer free web space which would be suitable for hosting Juicebox galleries. (Juicebox galleries do not require any special web server requirements, with the exception of Password Protection and the Download Button which require PHP 5.2.0 or later. Please see here for details.)
Try a web search with terms such as 'free web hosting' but please bear in mind that with a free hosting account, you may get little or no support, less reliability (more server down-time) and fewer features.

I hope these notes help to clarify things for you.
Please let me know if you have any further queries and I'll do my best to help you out.

971

(20 replies, posted in Juicebox-Lite Support)

OK, I will post a request nonetheless.

Thank you for posting your suggestion in the Feature Requests thread.

Thanks for all your help, man.

You're welcome!

... if that's OK?

I'll certainly help you out if I can but if your queries are not directly related to Juicebox, then I might be limited in the support that I'm able to give you. I hope you understand.

I find the MDN web docs a very useful reference  to web technologies (e.g. HTML, CSS and JavaScript). Take a look around the site and your find guides, tutorials and examples which should hopefully help you out.
You might also like to take a look at the W3Schools site. It's not quite as comprehensive as the MDN site but it's sometimes easier to find a quick example there.

972

(20 replies, posted in Juicebox-Lite Support)

I really do not know how feasible it would be to implement trouble-free pinch-zooming alongside the existing swipe gesture that is already used on mobile devices for navigation.
The best I can suggest at the moment is that you post your suggestion in the Feature Requests forum thread where is will be seen (and considered) by the developers. Thank you.

973

(20 replies, posted in Juicebox-Lite Support)

There are many difference between HTML 4.01 and HTML 5. Please see here for details.
However, if you do not need any of the new HTML 5 elements and your web page contains valid HTML 4.01 code (under the HTML 4.01 Doctype Declaration), then there should be no problems (although, going forward, I would recommend using HTML 5 where possible, especially if you are creating a new web page from scratch).

Unfortunately, I do not know of any other web gallery software that would allow you to pinch-zoom images.
I'm not saying that no such software exists, just that I do not know of any.
(Also, I'm not just saying this to avoid promoting any competitors: I really do not know of any.)
I guess a web search would be your best course of action.

974

(20 replies, posted in Juicebox-Lite Support)

I'm glad to hear that using thumbFrameColor has resolved your problem.
Thank you for letting me know.

Unfortunately, there is no easy solution for pinch-zooming within a gallery. (If there was, I would gladly have shared the solution with you.)

With regard to the HTML errors on your web page, the two that refer to Juicebox ('required attribute "TYPE" not specified') are because the embedding code is HTML 5 and your web page currently uses the HTML 4.01 Transitional Doctype Declaration. (The 'type' attribute is required for <script> tags in HTML 4.01 Transitional but not in HTML 5.)
To fix those errors, you could either:

(1) Change your web page to use the HTML 5 Doctype Declaration (instead of HTML 4.01 Transitional) by changing the following code at the very top of your web page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">

... to:

<!DOCTYPE HTML>

... or:

(2) Add the 'type' attribute to the <script> tags by changing:

<script src="jbcore/juicebox.js"></script> 
<script>

... to:

<script src="jbcore/juicebox.js" type="text/javascript"></script> 
<script type="text/javascript">

If you choose Option #1 above, then be sure to revalidate your web page with the new Doctype Declaration in place (in case there is code on your web page which is valid under HTML 4.0.1 Transitional but not valid under HTML 5).

To solve the character encoding warnings, just add the following line of code immediately after your web page's opening <head> tag.

<meta http-equiv="content-type" content="text/html; charset=utf-8">

Many of the other errors are due to the use of <ul> (unordered list) tags without any corresponding <li> tags.
As an example, change:

<ul>
    <a href="../../../../info/index.html"><span>INFO</span></a>
</ul>

... to:

<ul>
    <li>
        <a href="../../../../info/index.html"><span>INFO</span></a>
    </li>
</ul>

Your custom data-* attributes (such as 'data-height') are not likely to cause any problems but it should be noted that data-* attributes are new to HTML 5 (please see here for details) and, therefore, are not listed as errors under the HTML 5 Doctype Declaration.

Adding 'alt' attributes to <img> tags is trivial but worth doing if only to avoid seeing validation errors.

I hope this helps.

975

(20 replies, posted in Juicebox-Lite Support)

Hi, first of all I'm really sorry for not responding to your last post...

No problem!

Is there any way I can test with Safari, do you know, please?

Try a web search with terms such as "browser compatibility testing tools" or take a look at this Stack Overflow forum thread for some suggestions. The general consensus of opinion seems to suggest that the best solutions would be to either use BrowserStack (not free) or run MacOS X Server in a Virtual Machine environment (such as VirtualBox).
However, I would recommend that you check the code on your web page with the W3C Markup Validation Service and fix any errors reported.
Once the code on your web page validates correctly, your web page should be rendered with greater predictability and consistency across different browsers and if your web page looks good and behaves well in all browsers that you have access to, then there is a high likelihood (although not 100%) that it will look and behave similarly in other browsers (such as Safari), too.

... is it possible to change the colour of the thumbSelectedFrame

You can change the thumbnail frame color via thumbFrameColor (in JuiceboxBuilder-Pro's 'Customize -> Lite' section) but there is no distinction between a regular thumbnail frame and a selected thumbnail frame. There are no configuration options to set different colors for selected vs regular thumbnail frames.
You might be able to set a selected thumbnail frame color (independent of the regular frame color) via CSS, though.
Try adding the following (either within <style> ... </style> tags in your web page's <head> section or at the end of your gallery's 'jbcore/classic/theme.css' file) and change the color as required (this example uses fully opaque red):

.jb-thm-thumb-selected .jb-idx-thb-frame {
    border-color: rgba(255,0,0,1) !important;
}

I cannot be sure that this is a completely robust solution (as Juicebox-Pro was not designed with this in mind) but it seems to work OK in my own tests.

... how to enable pinch and zoom for touchscreens when in fullscreen mode

Unfortunately, it can be very difficult to pinch-zoom within a Juicebox gallery as a pinch-zoom gesture can often be misinterpreted as the start of a navigation swipe within the gallery so, for a full-page or expanded gallery, Juicebox locks the viewport of the web page to avoid such issues.
If you'd like to zoom into an image, I would recommend that the image be opened on a page of its own first. You can allow users to open an image on a page of its own either via the gallery's 'Open Image' button (by setting showOpenButton="TRUE" in JuiceboxBuilder-Pro's 'Customize -> Lite' section) or by tapping/clicking the main image (when setting imageClickMode="OPEN_URL" in the 'Customize -> Main Image' section). (Please note that showOpenButton is supported by both Juicebox-Lite and Juicebox-Pro but imageClickMode is a Pro-only option.)
Once the image is displayed on a page of its own, it can be pinch-zoomed with ease (and without adversely affecting the gallery itself).

I hope these notes help.