976

(7 replies, posted in Juicebox-Pro Support)

Unfortunately, the link you provided results in an error 404 (file not found).
Please check the link and post back.

In the meantime, if your gallery is embedded in an existing web page alongside other content (rather than just being on a page of its own), then check to see if your web page contains any custom CSS which might be affecting the visibility of the gallery's Button Bar. This might help.

977

(7 replies, posted in Juicebox-Pro Support)

It sounds like your gallery's Button Bar is positioned on the overlay and is auto-hiding (the default behavior) after a certain amount of time of inactivity. You should be able to make the Button Bar reappear by moving the mouse and hovering over the gallery.
However, if you'd like to prevent the overlay (including the Button Bar) from auto-hiding, then set either inactivityTimeout="0" (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) or showImageOverlay="ALWAYS" (also in JuiceboxBuilder-Pro's 'Customize -> Main Image' section).

I hope this helps. However, if you continue to experience difficulties, please post back with the URL to your gallery's web page so that I can take a look at the problem for myself and hopefully help further.
Thank you.

978

(1 replies, posted in Juicebox-Pro Support)

To remove the drop-shadow around all gallery text (including the image title and caption in the caption area), set:

textShadowColor="rgba(0,0,0,0)"

To remove the gradient caption area background (and make the caption area background completely transparent), set:

captionBackColor="rgba(0,0,0,0)"
captionBackTopColor="rgba(0,0,0,0)"

As you are using WP-Juicebox (the Juicebox plugin for WordPress), the configuration options above should be entered in the gallery settings window's 'Pro Options' text area (one option per line). You can edit a gallery via the 'WP-Juicebox -> Manage Galleries' link on the WordPress Dashboard (and then 'Edit' the gallery in question).

This should hopefully resolve your problem.

979

(1 replies, posted in Juicebox-Lite Support)

It may not be possible for your web design software to preview a Juicebox gallery locally.
This is similar to how, due to security restrictions in certain browsers, it is not possible to view a Juicebox gallery locally in all browsers. Please see this FAQ for details.
Please upload your site to your web server and check out your Juicebox gallery there.

3. Also, in jbcore file created by JuiceBox gallery I do not see the juicebox.js file as indicated in embedding code path. Is JuiceBox-Lite missing on creation of this file?

There should be a 'juicebox.js' file directly inside the 'jbcore' folder. When you create a gallery with JuiceboxBuilder-Lite, the application copies a complete 'jbcore' folder (including a 'juicebox.js' file) across to the output gallery folder.
If there is no 'juicebox.js' file inside your gallery's 'jbcore' folder, then maybe some security software that you are using sees the JavaScript file as a potential threat (perhaps due to the file being packed) and is quarantining it. Please check to see if this is the case. (Please let me reassure you that there is no malware within any Juicebox files.)

PS. I have 4 pictures on my PC screen showing the above, but unfortunately JuiceBox server refuses to upload - too big files.

It would be much easier to troubleshoot your problem if I could see the dysfunctional gallery itself (instead of screenshots showing the problem) so please post back with the URL to your gallery's web page on your web server and I'll take a look at the problem for you and hopefully help further. Thank you.

980

(5 replies, posted in Juicebox-Lite Support)

I'm sorry to hear that Flickr Tags are not working on your Flick account.
Flickr Tags are working OK on my own Flickr account (just a regular free Flickr account, not a Flickr Pro account) so your problem seems to be account specific.
As it's a Flickr problem, you might have better luck posting in the Flickr forum or the Flickr API forum.
Maybe Flickr would be willing to look into your problem themselves if you contacted them via the 'Contact Us' button on this page.

One thing I notice is that your images are licensed as "Some rights reserved- Attribution-NonCommercial 2.0 Generic (CC BY-NC 2.0) ". My own images are licensed as "All rights reserved". This is the only difference I can see between your account (where Tags do not work) and my own account (where Tags do work). Maybe you could try changing the license type on some of your images from "Some rights reserved" to "All rights reserved" to see if they then appear in Flickr API searches.
It might be worth a shot (as long as you are willing to change the license type on your images), at least as a temporary measure to determine whether or not this is the root cause of your problem.

With Juicebox-Pro (but not Juicebox-Lite, the free version), you can choose to select a Flickr Set (Sets now seem to be labelled as Albums in Flickr pages) via the flickrSetId configuration option (please see here for a list of Juicebox-Pro's Flickr Pro Options).
If you are considering purchasing Juicebox-Pro for this feature, then please create a Flickr Set and check that the Set images show up in the Flickr API flickr.photosets.getPhotos search page first. If the images do not show up there, then they will not show up in a Juicebox-Pro gallery either.

981

(2 replies, posted in Juicebox-Pro Support)

I'm glad that you've been able to resolve your problem. Thank you for posting back to let me know.

For anyone else experiencing a similar problem, if, after uploading an updated XML file, you do not see the changes you have made, then please ensure that the old XML file on your web server has actually been overwritten with the new version and then clear your browser's cache before reloading your gallery's web page (to ensure that your browser is using the most recent versions of your gallery files from your web server), as noted in the following FAQ.
When I update my gallery I don't see my changes online. Why?

In the link option you describe I tried linkURL="javascript: custom_function('congreso2019');" Is this correct?

Yes.

Because it didn't work...

It looks like you have not yet implemented this solution in your live web page which is fine (I understand that you do not want to have a dysfunctional web page) but it makes troubleshooting the problem a little difficult as I am not able to see the problem for myself and do not know exactly what you have tried).

First of all, I do not know where your gallery's embedding code is stored or how it is inserted into your web page but you'll need to make sure that when you insert the gallery's embedding code, you insert the following code, too:

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

Also, I notice that you use a baseUrl (baseUrl: "index-slider",).
I noted in a post above that the solution I suggested does not work with a baseUrl so you'll need to use the regular embedding method and structure noted here instead. Essentially, copy the contents of your gallery folder (not the gallery folder itself) into the directory that contains the web page where the gallery's embedding code is to be inserted (in your case, your root directory) and adjust the path to your 'juicebox.js' file in the <script> tag (and remove the baseUrl).

I hope this points you in the right direction.

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.

984

(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.

989

(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).

990

(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.

991

(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.

992

(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.

993

(3 replies, posted in Juicebox-Pro Support)

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

994

(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.

995

(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.

996

(3 replies, posted in Juicebox-Pro Support)

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

997

(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.

998

(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!

999

(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.

1,000

(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!)