• Registered: 2014-12-03
  • Posts: 4

Topic: How to get the design "Juicebox Lite Embedded"

Hi there
I am new with Juicebox since today. I think I got how it works. But there's one important thing that I don't get. I downloaded Juicebox Lite because of the design "Juicebox Lite Embedded" which is showed as an example (http://www.juicebox.net/demos/lite/embedded/). However I can not find out how to get this design. I only can get the design "Lite Full Browser Version" (http://www.juicebox.net/demos/lite/full/) which I embedded in my test page. It works all and I configurated it to have the ideal size within my page - but I just don't wanted this design. Of course I see that I can change the background colour to white in the Juicebox Builder, but the design never gets the same as on the mentioned link.
Can anybody help me?
Thanks!!

  • Registered: 2012-04-24
  • Posts: 5,904

Re: How to get the design "Juicebox Lite Embedded"

The Juicebox Lite Embedded Example uses all default settings (except for changing the gallery's dimensions, background color and setting a Gallery Title and Splash Page Description).

If you let me know exactly what you are looking to achieve (and what you currently have), then perhaps I can help further.
Please post a URL to your gallery's web page so that I can see what your gallery currently looks like. Thank you.

  • Registered: 2014-12-03
  • Posts: 4

Re: How to get the design "Juicebox Lite Embedded"

Hi Steven

I didn't publish the page before and just tested it local. Then I published it and now it covers parts of my navigation. What I look to achieve is exactly "Juicebox Lite Embedded Example". To embed in my page without covering the navigation.

I am not a webmaster at all. So maybe you can give me a simple advice when looking at my code.

http://ruthhahn.ch/fotografieren/fotogr … _test.html

Thanks a lot in advance!

  • Registered: 2012-04-24
  • Posts: 5,904

Re: How to get the design "Juicebox Lite Embedded"

Then I published it and now it covers parts of my navigation.

It looks like your gallery's embedding code should be within your <div id="content" class="vier"> ... </div> container. If you move the entire embedding code to within this container, then the gallery should be positioned to the right of your side menu. However, you may need to change the dimensions and/or the position of your <div id="content" class="vier"> ... </div> container in your 'ruthhahn.css' file. At the moment, the div may be too low down on your web page and have a limited width. Check (and change, if necessary) the following code in your 'ruthhahn.css' file.

div#content {
    position: absolute;
    top: 156px;
    left: 270px;
    height: 400px;
}

div#content.vier {
    width: 528px;
}

There is also an example of using a side menu in the Using a Resizable Gallery with a Header support section. You could perhaps copy the sample web page's code (view the source of the page in your browser) and swap the content of the side menu for your own navigation menu.

What I look to achieve is exactly "Juicebox Lite Embedded Example".

It you really want to exactly replicate the layout of the Juicebox Lite Embedded Example, you can copy the HTML code of the page (view the source of the page in your browser) and swap the sample gallery's embedding code for that of your own gallery.

  • Registered: 2014-12-03
  • Posts: 4

Re: How to get the design "Juicebox Lite Embedded"

Thank you for your reply. It helped a lot.

There is still the main issue: I found out the design of the gallery "Juicebox Lite Embedded Example", has to do with the size of the pictures (the example is with landscape format to be flush with the gallerybox, which is what I am looking for) - that's why I didn't get the same look.
I started to test: If the gallery has a certain size e.g. 400px and I put the picture width on 400px as well, they are not flush with each other. I changed the picture width to 900px - which optically already gets closer to what I want. Therefore see the following link, look at picture 4:
http://ruthhahn.ch/fotografieren/fotogr … test2.html

I have now a black gap left on the top - I am sure with a little bit of testing I also can avoid this. BUT what I don't unterstand is the relation of the gallery and the picture measures to each other. What's the logic behind it and how can I calculate the perfect gallery size according to my already converted pictures?

Thanks a lot for your advice!

  • Registered: 2012-04-24
  • Posts: 5,904

Re: How to get the design "Juicebox Lite Embedded"

BUT what I don't unterstand is the relation of the gallery and the picture measures to each other. What's the logic behind it and how can I calculate the perfect gallery size according to my already converted pictures?

Within a gallery, Juicebox reserves space for the thumbnails and the remainder is used for the image area. This is true no matter what the dimensions of the gallery are.
By default, Juicebox then scales the main image to fit within the image area as large as possible without cropping but whilst respecting the image's aspect ratio.

In your test gallery, image #4 is a different shape to image #3.

If the image has a different aspect ratio to the image area, then the only way for Juicebox to fill the image area with the image would be to set imageScaleMode="FILL" (although, for image #4 in your gallery, this would result in the left and right edges of the image being cropped).

Another possible solution to reduce the space above and below image #4 in your gallery would be to reduce the gallery's height so that the aspect ratio of the image area within the gallery matches the aspect ratio of your images.

Please see this FAQ for further information.
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

  • Registered: 2014-12-03
  • Posts: 4

Re: How to get the design "Juicebox Lite Embedded"

Thanks again. According to the FAQ the imageScaleMode seems to be a PRO Option.

  • Registered: 2012-04-24
  • Posts: 5,904

Re: How to get the design "Juicebox Lite Embedded"

That is correct. imageScaleMode is a Pro configuration option. I should have made that clear in my post above. Sorry for any confusion.
For reference, all Lite configuration options can be found here. (All configuration options on the Config Options page are supported by Juicebox-Pro.)