Topic: Fullframe with overlay Navbar [SOLVED]

Hi there ;)

i am using Juicebox for about 2 years and it works well ...

Now, i´d like to update my page and having trouble to implement my ideas.

The page should contain the following:

- Picture in Fullframe
- in the upper 1/3 a transparent Navbar wich generel Titel and Navigate to 3 other Sides (Home / Architecture / Nature / ... / imprint)
- main page (as home) should play the automatic
- no Buttons
- no thumbnails
- just the full picture ;)

- special --- it is possible to link to the imprint so it come as overlay transparent layer at the side, so you can read it over the images?

Is it this possible to do this with Juicebox? How?

Many thanks and best regards,
sbird

btw. excuse my bad englich, i am from germany

Re: Fullframe with overlay Navbar [SOLVED]

Hopefully the following notes will help.

- Picture in Fullframe

If you want the images in your gallery to be displayed in full (without cropping), set imageScaleMode to either SCALE_DOWN or SCALE (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section).

- in the upper 1/3 a transparent Navbar wich generel Titel and Navigate to 3 other Sides (Home / Architecture / Nature / ... / imprint)

Please take a look at the Using a Resizable Gallery with a Header support section. The View Resizable Gallery with Top Menu Example has a header of fixed height and the gallery takes up the remainder of the user's browser window. You can view the source of the web page in a browser and copy/modify the code to suit your own needs (by swapping the sample header content for your own navigation menu).
It might not be exactly what you want but if you want to overlay a transparent navigation menu on top of a Juicebox gallery, then knowledge of HTML, CSS (and perhaps JavaScript) would be required. It would not be something that could be implemented within Juicebox itself.
You could, however, embed links into the Gallery Title or Back Button as noted in these FAQs:
How do I add HTML formatting to the Gallery Title or Back Button?

- main page (as home) should play the automatic

If you want a Juicebox gallery to start an automated slideshow as soon as it loads, set enableAutoPlay="TRUE" and autoPlayOnLoad="TRUE" ('Customize -> AutoPlay'). You may also want to set enableLooping="TRUE" ('Customize -> General').

- no Buttons

Use the following settings:

buttonBarPosition="NONE"
galleryTitlePosition="NONE"
backButtonPosition="NONE"
showImageNav="FALSE"
captionPosition="NONE"

- no thumbnails

Use the following settings:

showThumbsOnLoad="FALSE"
showSmallThumbsOnLoad="FALSE"
showThumbsButton="FALSE"
showSmallThumbsButton="FALSE"

- just the full picture ;)

Make sure that your gallery's dimensions match the aspect ratio of your images (so that there is no wasted space around your images within the gallery).

- special --- it is possible to link to the imprint so it come as overlay transparent layer at the side, so you can read it over the images?

I'm not entirely sure what you mean by this. You can set captionPosition="OVERAY_IMAGE" so that the image titles and captions appear on the image overlay (on top the the main image). However, the text will appear towards the bottom of the image, not the side.

3 (edited by sbird 2014-03-29 10:39:13)

Re: Fullframe with overlay Navbar [SOLVED]

Hi Steven,

thanks fpr your quick response.

fullscreen --> solved ;)
What can i do to scale just to fill the browsers size?

may i use the caption for navigation bar? and how?

Many thanks and best regards,
sbird

Re: Fullframe with overlay Navbar [SOLVED]

What can i do to scale just to fill the browsers size?

If you want a gallery to completely fill a users browser window, make sure that it is the only element on your web page and set its dimensions to 100% x 100%.

may i use the caption for navigation bar? and how?

You can insert links into image captions by using HTML formatting as documented in this FAQ:
How do I add HTML formatting to image captions and titles?

For example, you could enter a caption such as the following into JuiceboxBuilder-Pro.

<a href="http://www.example.com/index.html">Link text goes here</a>

It may not be ideal to use image captions as navigation for your site (it depends on your site).
You may have better luck following one of the resizable templates here (placing your navigation menu in the header).

Re: Fullframe with overlay Navbar [SOLVED]

Hi Steven,

many thanks ;)

your caption descriptions helps me to link the pages ;)

i saw that my juicebpox pro has version 1.02, so i want to update and getting an error while processing the new JuiceboxBuilder-Pro.air file ;(

The google translated message:
The application can not be installed because there were problems with the certificate. The certificate does not match the installed application certificate, does not support updates for applications or invalid. Please contact the application author.

Many thanks and best regards,
sbird

Re: Fullframe with overlay Navbar [SOLVED]

Hi,

so, juicebox pro is now installed.

and now i have additional questions ;)

- is it possible to let the url static (don´t chance if i click on a link in the caption)?
- i´d like to position the caption 10% of height below from top of picture, but how?
- is it possible to see continous the caption bar? load picture let the caption short vanish...

Many thanks and best regards,
sbird

Re: Fullframe with overlay Navbar [SOLVED]

getting an error while processing the new JuiceboxBuilder-Pro.air file ;(

For other users reading this thread, in order to install a new version of JuiceboxBuilder-Pro, it is necessary to first uninstall any existing version.
Uninstall your existing JuiceboxBuilder-Pro version as follows:
Windows: Use the uninstaller in the 'Control Panel -> Programs -> Uninstall a program' list.
Mac: Delete the 'JuiceboxBuilder-Pro' file from the Applications folder and then empty your Trash afterwards.

If you have any version of JuiceboxBuilder-Pro on an external hard drive attached to your computer, please detach the drive before running the 'JuiceboxBuilder-Pro.air' installation file.

Also, please make sure that your version of Adobe AIR is also up-to-date.
The current version can be downloaded from here.

If this does not work, then in between uninstalling and reinstalling JuiceboxBuilder-Pro, try deleting the following folder manually:
Mac: /Users/your_username/Library/Application Support/Adobe/AIR/ELS/JuiceboxBuilder-Pro
Windows (XP): C:\Documents and Settings\your_username\Application Data\Adobe\AIR\ELS\JuiceboxBuilder-Pro
Windows (Vista, Win 7, Win 8): C:\Users\your_username\AppData\Roaming\Adobe\AIR\ELS\JuiceboxBuilder-Pro

- is it possible to let the url static (don´t chance if i click on a link in the caption)?

I'm not sure what you mean by this. Could you please explain further?
Do you want the link to open in a new tab or window rather than in the same page?
If so, use the target="blank" attribute in your link, for example:

<a href="http://www.example.com/index.html" target="_blank">Link text goes here</a>

- i´d like to position the caption 10% of height below from top of picture, but how?

It is not possible to position a caption relative to the top of the main image.
However, you can set the height for a caption (depending on the value of captionPosition) with the maxCaptionHeight configuration options (in JuiceboxBuilder-Pro's 'Customize -> Caption' section).

- is it possible to see continous the caption bar? load picture let the caption short vanish...

If the caption is positioned on the overlay (captionPosition is set to either OVERLAY or OVERLAY_IMAGE), then you can control when the overlay is displayed with the showImageOverlay option (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) which can be set to AUTO (on hover), ALWAYS or NEVER.

Re: Fullframe with overlay Navbar [SOLVED]

Hi Steven,

thanks for your reply.

it works now with deinstallation and installation the never version.

i mean the url showing in the browers adress like "http://juicebox.net/forum/viewtopic.php?pid=5575#p5575".
i would like to follow a link and the url stays at "http://juicebox.net/forum/viewtopic.php?pid=5575#p5575"...

with the caption i thought i can do a nav bar but i think it´s limitating, so i make it with css / html.

Many thanks and best regards,
sbird

Re: Fullframe with overlay Navbar [SOLVED]

so, here i come again ^^

i used the juicebox pro generated index.html to add a transparent nav bar with css like

header:

        #navigation {
            position: fixed;
            top: 7%;
            width: 100%;
            color: #BEBEBE;
            height: 7%;
            text-align: center;
            padding-top: 15px;
        /* Adds the transparent background */
            background-color: rgba(128,128,128, 0.6);
            color: rgba(50, 50, 50, 1);
        }
        #navigation a {
            font-family: "bauhaus 93", Verdana, Arial, Helvetica, sans-serif;
            font-size: 24px;
            padding-left: 2px;
            padding-right: 15px;
            color: black;
            text-decoration: none;
        }

        #navigation a:hover {
            color: white;
        } 
        
        #content {
            width: 600px;
            padding-top: 70px;
            padding-bottom: 30px;
            margin-left: auto;
            margin-right: auto;
        }


and i use it in the body like:
in body after the juicebox div:

        <div id="navigation">
            <a href="../home/index.html">|   home</a>
            <a href="../wedding/index.html">|   wedding</a>
        </div>

but there are no hover effekt and no links on the nav bar... any ideas?

Many thanks and kind regards,
sbird

Re: Fullframe with overlay Navbar [SOLVED]

i mean the url showing in the browers adress like "http://juicebox.net/forum/viewtopic.php?pid=5575#p5575".
i would like to follow a link and the url stays at "http://juicebox.net/forum/viewtopic.php?pid=5575#p5575"...

A browser will usually display the URL of the page currently being displayed.
It is not possible within Juicebox to prevent a browser from displaying the URL of page which has been linked to.
For more information on the topic, please try a web search with terms such as 'URL masking' and 'link cloaking'.

but there are no hover effekt and no links on the nav bar... any ideas?

If you want your navigation menu to appear and disappear when the user hovers over the container, then you will need to implement either a CSS solution (such as on this web page) or a JavaScript/jQuery solution (such as on this web page).

In order for your links to be active, your navigation menu needs to be stacked on top of the gallery by assigning it a large z-index value.

For a solution to both problems, try using the following CSS on your web page (in addition to your own CSS from your post above):

#wrap {
    position: fixed;
    top: 7%;
    width: 100%;
    height: 7%;
}
#wrap, #navigation, #navigation a {
    z-index: 9999;
}
#navigation {
    display: none;
}
#wrap:hover #navigation {
    display: block;
}

... and then use HTML code such as the following for your navigation menu:

<div id="wrap">
    <div id="navigation" >
        <a href="../home/index.html" >|   home</a>
        <a href="../wedding/index.html" >|   wedding</a>
    </div>
</div>

Re: Fullframe with overlay Navbar [SOLVED]

Hi Steven,

thanks for solving my problem. Thats it!
Now i can build and build...

Many thanks and kind regards,
sbird