1 Topic by MJK (edited by MJK 2015-12-29 16:08:11)

  • MJK
  • Member
  • Offline
  • Registered: 2012-09-20
  • Posts: 8

Topic: Responsive height? [SOLVED]

Hi!

Page here:
http://www.kareinen.fi/tuotteet.php?pag … npaa-korut

I have problems when trying to make the height responsive. So when I resize the browser window smaller the gallery should go less tall. This doesn't happen without problems.

I have this in PHP-page:

<!--START JUICEBOX EMBED-->
<script src="galleriat/jbcore/juicebox.js" type="text/javascript"></script>
<script>
new juicebox({
configUrl  : "galleriat/uudet_tyot.php",
containerId : "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: 'rgba(248,248,248,1)'
});
</script>
<div id="juicebox-parent">
    <div id="juicebox-container"></div>
</div>
<!--END JUICEBOX EMBED-->

In CSS are following lines:

#juicebox-parent{
    height:400px;}

#juicebox-content{
    width:100%;}

In gallery's settings file:

galleryWidth="100%"
galleryHeight="100%"

When I change #juicebox-parent{height:400px} to max-height:400px gallery goes to as tall as the window is.

Any quick help? :)

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

Re: Responsive height? [SOLVED]

Please see this note regarding Using Percentage Heights.

Also, you might like to take a look at this forum thread which has an example of how to keep a gallery's aspect ration constant.

I hope this helps.

3 Reply by MJK (edited by MJK 2015-12-29 22:26:00)

  • MJK
  • Member
  • Offline
  • Registered: 2012-09-20
  • Posts: 8

Re: Responsive height? [SOLVED]

Thanks!

Managed to make it work as I wanted with the modified small javascript found in the second link :)

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

Re: Responsive height? [SOLVED]

You're welcome!
I'm glad you've got it working as you like. Thank you for posting back to let me know.

  • Registered: 2016-02-05
  • Posts: 2

Re: Responsive height? [SOLVED]

Hi,

I apply height in percentage. also i use this config:
imageScaleMode="FILL"
showSmallThumbsOnLoad="TRUE"
containerId="juicebox-container"
thumbWidth="150"
showSplashPage="NEVER"
screenMode="LARGE"
thumbsVAlign="TOP"
galleryHeight="80%"


but now it look stretch in height and thats not good when user open open page in zoom out.

and if i use FILL in imageScaleMode then there is huge gap show between slider and thumb images.

Please suggest. also in MAC's Safari the caption is not working properly.

here is the image:
http://i68.tinypic.com/148u85.jpg

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

Re: Responsive height? [SOLVED]

@tejas.rana

Please see my reply to your query in this forum thread.