Topic: problem with "show thumbs button" and "title gallery"

hello
to my gallery I have these settings:
show thumbs button: checked
gallery title position: ABOVE THUMBS
gallery title halign: Left

when I click the thumbs button, the thumbails disappear but the title of the gallery moves to the main picture. how to make the title disappear. On the old version I did not have this problem, it disappeared.

thank you and sorry for my english, I'm french

phil

Re: problem with "show thumbs button" and "title gallery"

Thank you for reporting this problem.
I have logged a bug report with the developers and it should hopefully be fixed in the next version.
In the meantime, a possible workaround would be to use the Juicebox-Pro API (specifically the onShowThumbs(showing) event) to manually hide the Gallery Title using JavaScript and CSS when the thumbnails are visible. Here is an example of how this could be achieved:

<!--START JUICEBOX EMBED-->
<script src="jbcore/juicebox.js"></script>
<script>
var jb = new juicebox({
    containerId: 'juicebox-container',
    galleryTitlePosition: 'ABOVE_THUMBS'
});
jb.onShowThumbs = function(showing) {
    showing ? $('.jb-area-large-mode-title').show() : $('.jb-area-large-mode-title').hide();
};
</script>
<div id="juicebox-container"></div>
<!--END JUICEBOX EMBED-->

3 (edited by squbel 2014-08-24 00:11:01)

Re: problem with "show thumbs button" and "title gallery"

I have the same problem as philcarcassonne.
I have just bought juicebox software yesterday - I presume I have the latest version.

Show Thumbs Button: yes
Gallery Title Position: ABOVE_THUMBS
Gallery Title HAlign: LEFT

Layout looks nice and neat when Thumbs are visible. However Gallery Title moves (overlayed) over main image once you click on the "Hide Thumbnails" button. Luckily it disappears when you move to the next picture but I still think it  looks broken and random when it moves to the middle of the main image.

I believe it would look much better if the Title would disappear as soon as as the Hide Thumbnails button is pressed or would stay in the same place.

I'm not sure how the temporary solution (proposed by Steven) would help. I like my Gallery Title to be displayed when Thumbs are on. I have to admit - I haven't tried it yet and I'm not clever enough to predict fully how this script actually behaves by just looking at it. I understand that this would just simply hide the Gallery Title when thumbs are visible - not really what I want.

Cheers,

Re: problem with "show thumbs button" and "title gallery"

Luckily it disappears when you move to the next picture but I still think it  looks broken and random when it moves to the middle of the main image.

This should not happen and is, indeed, a bug. As I mentioned above, I have logged a bug report with the developers and it should hopefully be fixed in the next version.

I believe it would look much better if the Title would disappear as soon as as the Hide Thumbnails button is pressed

This is what should happen (and what does happen when using my code above).

I'm not sure how the temporary solution (proposed by Steven) would help.

I understand that this would just simply hide the Gallery Title when thumbs are visible - not really what I want.

This is not what happens. The Gallery Title is displayed when the thumbnails are visible (and hidden when the thumbnails are hidden).
The Juicebox-Pro API event onShowThumbs is fired each and every time the thumbnails are toggled (on or off) so the code within the onShowThumbs function is run each time the user clicks the Thumbs Button on the Button Bar.
When the thumbnails are showing, the Gallery Title is shown (using CSS via the jQuery function show()) and when the thumbnails are not showing, the Gallery Title is hidden (using CSS via the jQuery function hide()).
Juicebox comes with its own version of jQuery (bundled within the 'juicebox.js' file) so once this has been loaded on a web page, basic jQuery functionality is available. However, if your web page requires jQuery, then I would strongly recommend that you include your own version of the jQuery library (rather than relying on the built-in version that comes with Juicebox). I could have written the function using standard JavaScript as follows (which has exactly the same functionality but is a lot less compact than the one-liner above)

jb.onShowThumbs = function(showing) {
    var elements = document.getElementsByClassName('jb-area-large-mode-title');
    var element = elements[0];
    if (showing) {
        element.style.display = 'block';
    }
    if (!showing) {
        element.style.display = 'none';
    }
};

If you want to incorporate my solution into your own gallery, just give your 'juicebox' object a variable name (change new juicebox({ to var jb = new juicebox({) and add the onShowThumbs function below your own gallery's embedding code (still within the <script></script> tags).

I hope this helps.

Re: problem with "show thumbs button" and "title gallery"

thank you for your reply
When is the new update will be ready?
Because it is a major problem for my website (I am a photographer) and I do not have enough skill to make the changes you propose. I tried but I can not do. sorry
again thank you
Phil

6 (edited by squbel 2014-08-25 08:58:06)

Re: problem with "show thumbs button" and "title gallery"

Thank you Steve!

Your solution actually works like a charm.

Excellent support!!


Philcarcassone:

This is the part that you need to find in your index.html file:

<!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: '#222222'
    });
    </script>

You need to change it to this one:

<!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    var jb = new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: '#222222'
    });
jb.onShowThumbs = function(showing) {
    showing ? $('.jb-area-large-mode-title').show() : $('.jb-area-large-mode-title').hide();
};
    </script>

This worked for me.

Cheers,

Re: problem with "show thumbs button" and "title gallery"

That's great!!! This worked for me too.
Thanks a lot Squbel!
Excellent support... and excellent members!
Phil

Re: problem with "show thumbs button" and "title gallery"

I am glad that you have both been able to implement my solution and that it works OK.

@philcarcassonne

In answer to your other question:

When is the new update will be ready?

I do not know when the next version of Juicebox will be released.
If you would like to be notified when new versions are released, then please join our mailing list at the foot of our homepage, follow us on Twitter @JuiceboxGallery or subscribe to our blog RSS feed.