1 Topic by georg_m (edited by georg_m 2013-07-07 18:18:05)

  • Registered: 2013-07-07
  • Posts: 13

Topic: resizing when juicebox in div

www.georgmolterer.com

1.
juicebox runs in a div, because of the layout. when i resize the browser window, juicebox gets more narrow or wide, but doesnt get higher or less high. when i load another page (=new juicebox gallery) it resizes once as it should, but then again remembers the height.

<body> is set to height+width 100%
inside that <div right> is set to an absolute position right of the menu
inside that <div juicebox> container is again set to height+width 100%

if i run juicebox outside <div right>, it resizes normally.


2.
the splash pages on smartphones dont resize very well (only checked on iphone). they are bigger than the display of the phone. not super huge, but some scrolling and searching is required to see the gallery title.

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

Re: resizing when juicebox in div

(1) Please see the note regarding Using Percentage Heights and try changing:

<div id="right">

... to:

<div id="right" style="height: 100%;">

(2) Try scaling the content of your web page for mobile devices by using the <meta> viewport tag.
Try using the following line of code in your web page's <head> section.

<meta name="viewport" content="width=device-width, initial-scale=1">

3 Reply by georg_m (edited by georg_m 2013-07-10 08:50:42)

  • Registered: 2013-07-07
  • Posts: 13

Re: resizing when juicebox in div

problem 1 is solved. thank you.

problem 2 still exists: http://www.georgmolterer.com/data/jb/iphone.JPG

the photo is of an actual iphone, the image in the background is the entire image, as should be resized and shown.

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

Re: resizing when juicebox in div

There are no configuration options to control the cropping of the Splash Page image.
Rather than have Juicebox use the first image from your gallery (as it does by default), you could perhaps create a new image specifically for your Splash Page (with smaller dimensions than the first image in your gallery, which is 833px x 1200px) and use the splashImageUrl configuration option to display it.
For reference, the Splash Page configuration options can be found here.

5 Reply by georg_m (edited by georg_m 2013-07-11 09:06:55)

  • Registered: 2013-07-07
  • Posts: 13

Re: resizing when juicebox in div

ok. sort of works - still cropped, but way better.

- if i make an image of say 250x250px as the splash image and there is more space on the phone left than that, will the image be interpolated to be bigger and fill up the remainig space, or always stay the original size?

- if i want to change the font of the splash page, i change ".jb-splash-info h3" and "a.jb-splash-view-glry" in theme.css, right?
does that affect any other typography as the first class is also called h3? or does it really only concern the splash page?

the color property of "a.jb-splash-view-glry", didnt seem to change the color of the "view gallery" text. does something else influence that? i only tried on one phone though.

and what do ".jb-splash-info", ".jb-splash-info p" and "p.jb-splash-desc" do?

- if i define the splash images in the juicebox-interface for each gallery, can i still use one external jbcore folder or is the splash page address defined in this folder and each gallery needs its own jbcore folder to find its own splashimage?



------------ new question - should i move it to new topic?

the splash page on an iphone 5 is positioned as this image shows http://www.georgmolterer.com/data/jb/iphone2.JPG.

on loading, the writing at the bottom is cut off (step1). i can then scroll inside the splash image to show all of the writing (step2).

but then the splash page is still cut off at the bottom. the amount thats missing at the bottom is exactly the amount, that the adress bar of the browser uses, when i choose to have it displayed (step3).

the juicebox-container is inside a div, so i dont know, if the problem is safaris rendering of the div or the splash itsself.
the divs properties are:

    #right {
    position: absolute;
        top: 0;
        left: 10rem;
        right: 0;
        bottom: 0;
        overflow: auto;
    }

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

Re: resizing when juicebox in div

- if i make an image of say 250x250px as the splash image and there is more space on the phone left than that, will the image be interpolated to be bigger and fill up the remainig space, or always stay the original size?

The image will be scaled up to fill the Splash Page area.

- if i want to change the font of the splash page, i change ".jb-splash-info h3" and "a.jb-splash-view-glry" in theme.css, right?
does that affect any other typography as the first class is also called h3? or does it really only concern the splash page?

You can change the font face for all gallery text by setting the galleryFontFace configuration option (in JuiceboxBuilder-Pro's 'Customize -> General' section).
If you want to change just the Splash Page's font face, add something like the following to your CSS.

.jb-splash-info {
    font-family: Courier;
}

All elements of the Splash Page (the Splash Button Text, the Splash Title, the Gallery Description and the Splash Image Count) will inherit this font face.

the color property of "a.jb-splash-view-glry", didnt seem to change the color of the "view gallery" text. does something else influence that? i only tried on one phone though.

To change the color of the 'View Gallery' text, try changing the color on line 894 in this CSS section:

.jcbx-glry-classic a{
    color:#FFF;
}

and what do ".jb-splash-info", ".jb-splash-info p" and "p.jb-splash-desc" do?

.jb-splash-info - main class for Splash Page text
.jb-splash-info p - will affect splashShowImageCount text
p.jb-splash-desc - will affect galleryDescription text

- if i define the splash images in the juicebox-interface for each gallery, can i still use one external jbcore folder

Yes. You can set a unique splashImageUrl for each gallery. The value for the splashImageUrl is stored in each gallery's XML file.

on loading, the writing at the bottom is cut off (step1). i can then scroll inside the splash image to show all of the writing (step2).

but then the splash page is still cut off at the bottom. the amount thats missing at the bottom is exactly the amount, that the adress bar of the browser uses, when i choose to have it displayed (step3).

the juicebox-container is inside a div, so i dont know, if the problem is safaris rendering of the div or the splash itsself.

It looks like the layout of your page in conjunction with Mobile Safari may be causing this problem.
If I replicate your scenario in a test page and replace the Splash Page with the gallery itself (by setting screenMode="LARGE"), the gallery is truncated, just like the Splash Page (so it is not just a problem with the Splash Page).
As you have just two main elements on your web page (your side menu and the Juicebox gallery), try implementing the 'View Resizable Gallery with Side Menu Example' from the Using a Resizable Gallery with a Header guide.
You can view the source of the page in your browser and modify it to suit your own needs (swapping the gallery for your own and replacing the side menu content with your own navigation menu).

  • Registered: 2013-07-07
  • Posts: 13

Re: resizing when juicebox in div

thank you. will try to adapt the template.

regarding the splash page: on some phones the "description"- and "view gallery"-texts are truncated, because they are located at the bottom-left of the splash page, which is bigger than the phones screen. i would like to move it to the top-left corner, so i would have one problem less to worry about - no matter how the phone-browser crops or scrolls, the text should always be visible when the splash page is loaded.

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

Re: resizing when juicebox in div

Once you adapt the template for your own web site, you should no longer have the problem.
Try viewing the sample gallery here on a mobile device and you should see the Splash Page in its entirety.

i would like to move it to the top-left corner

Open the 'jbcore/classic/theme.css' file in a plain text editor and change line 538 from:

bottom: 0;

... to:

top: 0;

The line number above refers to the current version of Juicebox (v1.3.2).

  • Registered: 2013-07-07
  • Posts: 13

Re: resizing when juicebox in div

with the adapted theme i had the problem on some phones, on some not - but it looks different on each phone anyway.
the other problem i had with the template, which was more of a problem to me, was that, when the menu on the left got longer than the screen it wasnt scrollable. so it was just truncated and some menu items werent visible anymore.
but as you can guess from my questions im not a programmer so my understanding of how things work is limited.

regarding the positioning of the splash text on top, i believe that it doesnt look less well, but is much more secure.

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

Re: resizing when juicebox in div

when the menu on the left got longer than the screen it wasnt scrollable

The point of the template is that the web page is scaled to fit the user's browser (no matter what its size) without any scroll bars. If you want to have scrollable sections in your web page, then you will need to try a different page layout (or perhaps modify the existing template to suit your needs).
Your web page's side menu does not seem to have so much content that scroll bars should be essential.
Perhaps just tweaking the size of your logo and the font size of your text will help make it all fit on a smaller screen.

As your web site is a portfolio web site showcasing multiple galleries, you might be interested in another one of our products: Showkase.
Showkase is a PHP web application which allows you to create a complete portfolio web site (integrating multiple galleries) online.
Showkase has full support for Juicebox-Pro (and SimpleViewer-Pro) galleries and the galleries are created within the application itself in a web browser interface.
You can create Gallery Index pages and have as many galleries listed on each Gallery Index page as you wish.
Each gallery is represented by a thumbnail image (with the gallery title displayed below) and the gallery is opened when the user clicks on the image.
You can also create non-gallery pages (such as an 'About' page or a 'Contact' page).
Demo sites can be found here and a sample Gallery Index page can be found here.