Home/ Questions/Q 7055959
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T03:48:39+00:00

I have a slideshow built using the jbgallery script that I am trying to

  • 0

I have a slideshow built using the jbgallery script that I am trying to incorporate into a page on my site. The images in the slideshow have a width and height of 100%. I have a navigation bar at the bottom of the page with a height of 90 pixels.

My code is:

<style type="text/css">

body{ height:100%;
  background-color:#444;
   margin: 0;}

 div.fullscreenslideshow{
    display:block;
    position:absolute;
    top:0;
    left:0;
    padding-bottom:90px;
    width:100%;
    height:100%;
    background-color:#000;
  }
</style>
</head>

<body>
<div class="fullscreenslideshow">
<iframe src="slideshow.html" style="border: 0; width: 100%; height: 100%">Your browser doesn't support iFrames.</iframe>
</div>

</body>

While this looked to have the desired effect it is producing a scroll bar on the page (as the 90 pixel padding is stretching the page beyond the 100% height it has been set to).

Basically, how to I adjust the css to ensure I get the slideshow in the page with a 90 pixel space beneath it, and without cropping the image (by setting the height to 90% for example on the fullscreenslideshow div css) or producing an overflow?

Been playing around with this for hours now and think I have hit the wall hence the request for help! Out of interest, when I adjusted the padding-bottom to margin-bottom there was no effect on the page.

Thanks for any help in advance,

JD

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Why don’t you just add a negative margin to the bottom of the container that needs to shrink, so there’s no need for javascript?

    margin-top: -90px;

    edit: I got something

    First, add this to your div.fullscreenslideshow

    margin-top: -90px

    Now, go the page slideshow.html and add this:

    margin-top: 90px

    To:

    • div.jbg-loading
    • .jbgallery .jbg-wrap
    • .jbgs-wrapper (you will have to add this one to the css yourself, it doesn’t exist yet

    I got it to work on my computer (compared it to the other link, and it shows exactly the same).

    • 0