Topic: auto-hide thumbs

Hi,

is there any way that this sort of auto-hide of thumbs can be made to work in JBoxPro?

NB : this is a Flash site I'm replacing with JBoxPro :

http://www.grantsymon.com/e/ritz.html

2 (edited by captureme 2013-02-21 21:19:30)

Re: auto-hide thumbs

It would be easy to hide the thumbs after you changed an image for example, all you need to do is change the css of the jb-idx-thb-container to visibility: hidden on image change (with the API) and remove it again to show the thumbs when you hover over the thumb area.

But that would not work on touch devices unless you click on the thumb area.


You could also auto hide them with a timing function window.setTimeout("javascript function",milliseconds);

or a combination of both.

Re: auto-hide thumbs

No way to make them auto-hide 3 or 4 secs after initial page load and then only appear on hover?

I'm not bothered about touch for the time being, as a couple of limitations with JBx mean that I'm having to make separate galleries for mobile.

Re: auto-hide thumbs

As iI said in the previous post

use window.setTimeout("javascript function",milliseconds);


javascript function = code to change the css


milliseconds = the time after you want the thumbs to hide

and then a hover function that shows the thumbs again

Re: auto-hide thumbs

OK.  Thanks.  I didn't understand that the window.setTimeout function could work continuously.  I shall try that.

Re: auto-hide thumbs

window.setTimeout function could work continuously


it does not.

just hide it again when you stop hovering over the thumb area.

Re: auto-hide thumbs

The simplest solution is to set the 'showLargeThumbs' option to false. This way the thumbs are hidden on page load, and the user can show them by pressing the thumbs button.

If you want to hide the thumbnails manually you are best off using the toggleThumbs() API method rather than hiding gallery elements via CSS: http://www.juicebox.net/support/api/

Re: auto-hide thumbs

@ Felix

I thought the point of his question was to replicate the auto hide behavior of his flash galleryhttp://www.grantsymon.com/e/ritz.html

if this is not the case forget what I suggested, otherwise I just created a gallery and  it only takes 7 lines of code to replicate the auto hide behavior.

I did reduce the opacity instead of my previous suggestion of visibility hidden.

Re: auto-hide thumbs

captureme wrote:

I thought the point of his question was to replicate the auto hide behavior of his flash gallery

snip ...

I just created a gallery and  it only takes 7 lines of code to replicate the auto hide behavior.


Yes indeed, I would like to replicate the behaviour of the Flash gallery (BananAlbum).  I love the auto-hide with show on hover.  The reason is because it leaves the image as the star without other clutter on the page.

If you feel like sharing your 7 lines, I'd be very happy. :) :)

Grant

10 (edited by captureme 2013-03-01 20:13:48)

Re: auto-hide thumbs

It actually also works nicely on an iPad ,just wait 3-4 seconds and the thumbs will auto hide and stay hidden, unless you hover over or touch the thumb area.

http://www.marcopietschmann.com/auto/hide

11

Re: auto-hide thumbs

Marco, I tried to take a look at your link but it didn't work.  Maybe you took it down already?

Re: auto-hide thumbs

I was deleting all my Juicebox files last night, since I can no longer use the Juicebox Pro gallery on my website.

But I recreated the gallery with my old lite edition for you and it should be working again.

This is also my last post, and therefor I can no longer help you on this forum.

13

Re: auto-hide thumbs

In case you drop in Marco, thanks so much for this code.  Really makes a BIG difference to how I can present my work.

(May I make a request that JuiceBox enable this functionality in a future version ... or ... that there is the possibility to add code at the gallery creation stage instead of hacking afterwards?)

14 (edited by gfs 2013-03-11 10:24:09)

Re: auto-hide thumbs

Marco has now left the pro forum and I can't work out where exactly I need to insert his code to get it to work on my site (which is using an iFrame).  Can anyone else help with this ?

This is the code that Marco used (can still be seen on via his link 4 posts up).

/**
 * Juicebox-Extensions-Auto-hide-thumbs
 *
 * Copyright (c) 2013 MARCO PIETSCHMANN. All rights reserved.
 * http://www.marcopietschmann.com
 *
 * Feel free to use and build on this script - but do not remove this copyright notice.
 *
 * get more out of your juicebox  http://www.marcopietschmann.com/tutorials
 */
$(document).ready(function () {

$(thumbs).css("opacity","1");
var hide = function() {
$(thumbs).css("opacity","");
$(thumbs).addClass("jb");}
setTimeout(hide,thb);
});

Re: auto-hide thumbs

It looks like the code should go in the gallery's own 'index.html' page (the page you are loading into the <iframe>).
You may also need to include jQuery in that page by adding the following code to the <head> section of the page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>