• Registered: 2013-11-14
  • Posts: 4

Topic: No thumbs... Gallery Size of Image

I am beating my head against the wall... lol

I've searched through the forums and haven't found what I am looking for.

How do I make a slider gallery that is only the size of my image (no space on the bottom), and has NO thumbs?

Here is the webpage I am working on.  www.tightworksportfishing.com

The two photos I am using (haven't created the others yet) are 1600 x 540.  It doesn't fill the space and it has tons of space below it.

Also, I got rid of the thumbs... but it seems like its keeping the space there.

And, how do I get rid of the white blink between images?

Thanks in advance!

<script>
new juicebox({
baseUrl : 'index_gallery/',
containerId : "juicebox-container",
galleryWidth: "100%",
galleryHeight: "100%",
backgroundColor: "rgba(34,34,34,0)"
});
</script>

<?xml version="1.0" encoding="UTF-8"?>

<juiceboxgallery

    galleryWidth="1600"
    galleryHeight="540"
    backgroundColor="rgba(238,238,238,1)"
    imagePadding="0"
    captionPosition="NONE"
    galleryFontFace="Georgia,serif"
    textColor="rgba(51,51,51,1)"
    captionBackColor="rgba(0,0,0,0)"
    imageNavPosition="IMAGE"
    imageShadowBlur="0"
    galleryTitle="Gallery Title"
    galleryTitlePosition="NONE"
    buttonBarPosition="NONE"
    textShadowColor="rgba(0,0,0,0)"
    showAutoPlayButton="false"
    showThumbsButton="false"
    showOpenButton="false"
    flickrShowDescription="true"
    showExpandButton="false"
    useThumbDots="false"
    enableKeyboardControls="false"
    showPreloader="false"
    showImageOverlay="NEVER"
    thumbsPosition="BOTTOM"
    displayTime="2"
    showSplashPage="NEVER"
    topAreaHeight="0"
    imageNavPadding="0"
    navButtonIconSize="5"
    enableAutoPlay="true"
    useFullscreenExpand="true"
    imageTransitionType="CROSS_FADE"
    imageHAlign="LEFT"
    imageVAlign="TOP"
    screenMode="AUTO"
    enableLooping="true"
    maxThumbColumns="0"
    maxThumbRows="0"
    showThumbsOnLoad="false"
    showSmallThumbsOnLoad="false"
    showSmallThumbsButton="false"
    thumbPadding="0"
    thumbHoverFrameWidth="0"
    thumbSelectedFrameWidth="0"
    thumbShadowBlur="0"
    autoPlayOnLoad="true"
    showNavButtons="false"

>
  <image imageURL="images/FightEpicFishingBattles.jpg"
    thumbURL="thumbs/FightEpicFishingBattles.jpg"
    linkURL="images/FightEpicFishingBattles.jpg"
    linkTarget="_blank"
    sourcePath="C:\Users\Amber\Documents\Sea Leveler\Site Design\Tightwork\Slideshow\FightEpicFishingBattles.jpg">
    <title><![CDATA[FightEpicFishingBattles]]></title>
    <caption><![CDATA[]]></caption>
  </image>
</juiceboxgallery>

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

Re: No thumbs... Gallery Size of Image

Please see this FAQ to see if it helps:
My Juicebox gallery shows too much space above or below the main image, how do I fix this?

  • Registered: 2013-11-14
  • Posts: 4

Re: No thumbs... Gallery Size of Image

Thanks for the response!

I have the gallery set to the exact same size as the images (1600x540).  I have it set to 100% in the div.  If I set it to to 100% width and 60% height, it then gets rid of the space.  But, I'm not sure if it will be very responsive anymore.  For instance, when I shrink the window, it puts space at the bottom again.  I'm not sure what it will do at higher resolutions either.

  • Registered: 2013-11-14
  • Posts: 4

Re: No thumbs... Gallery Size of Image

Here's the other thing that is stumping me.  When I preview... it shows a gray area that says it can't be previewed in Chrome.  That gray area is exactly the right size.  When I make it live, it makes it too tall.

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

Re: No thumbs... Gallery Size of Image

Try setting your gallery's height to a fixed value.
Otherwise, as you currently set your gallery's height to a percentage (100%) you may have to implement the suggestion noted in the Using Percentage Heights support section.

Also, as your gallery's dimensions are percentages (percentages of the gallery's parent container), the size of the gallery will be partly determined by the size and shape of the user's browser window. As you have no control over this, you essentially have no control over the absolute size and shape of your gallery. By default, Juicebox will scale images within the available image area as large as possible but, depending on the shape of the image area, there may be space to the left and right (or to the top and bottom) of the main image.

You could fix your gallery's dimensions by setting your galleryWidth and galleryHeight to absolute pixel values in your gallery's embedding code.
Otherwise, you could also fill the image area by setting imageScaleMode="FILL" (although images will be cropped if they do not have the same aspect ratio as the image area within the gallery).

However, setting your gallery's height to a fixed value may be enough to provide a suitable solution to your problem.

  • Registered: 2013-11-14
  • Posts: 4

Re: No thumbs... Gallery Size of Image

Thanks!  I looked through some more posts and implemented something like in your responsive demo.  I hope it works across all browsers and resolutions okay.  I have limited resources for testing.  :)

I *think* it is working though!!!

Also... is there anything I can do to improve the load experience?  Right now it shows blank until it is loaded...  Is there a way to have it show the initial image until it is loaded?

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

Re: No thumbs... Gallery Size of Image

There are a couple of things you can do to speed up the initial loading of a gallery:
(1) reduce the file size of your images (by reducing either their resolution or quality), or...
(2) change the imagePreloading configuration option (in JuiceboxBuilder-Pro's 'Customize -> Main Image' section) from the default value of PAGE (which preloads all images on the current thumbnail page) to NEXT (which preloads only the next image in the gallery).
(There are other factors, such as the speed of your web server and internet connection, which you essentially have no control over.)