• DCor
  • Member
  • Offline
  • Registered: 2014-03-28
  • Posts: 6

Topic: Images displayed in gallery bigger than original

Images, exported with 1000px height from Lightroom, are displayed in Juicebox gallery bigger than original size.

The gallery has the following settings (image resize not enabled):

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

<juiceboxgallery

    showOpenButton="false"
    useFullscreenExpand="true"
    enableLooping="true"
    maxThumbColumns="7"
    thumbSelectedFrameWidth="3"
    thumbCornerRadius="1"
    showAutoPlayButton="true"
    showNavButtons="true"
    maxCaptionHeight="40"
    enableAutoPlay="true"
    backButtonUseIcon="true"
    showSmallBackButton="true"
    thumbHoverFrameWidth="3"
    backButtonPosition="OVERLAY"
    backButtonUrl="http://www.asdaroth.com"
    showImageOverlay="ALWAYS"
    resizeOnImport="false"
    maxImageHeight="1000"
    thumbWidth="75"
    thumbHeight="75"
    thumbQuality="70"
    importTitle="NONE"
    showThumbsOnLoad="false"
    shareFacebook="true"
    shareGPlus="true"
    imageTransitionType="SLIDE"
    maxImageWidth="1503"
...

Is it possible to show them at the original size ?

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

Re: Images displayed in gallery bigger than original

Images in a Juicebox gallery are dynamically scaled according to the imageScaleMode configuration option (in the 'Main Image' section).
The default value for imageScaleMode (which is used when imageScaleMode is not explicitly defined in the gallery's 'config.xml' file) is SCALE_DOWN, whereby large images are scaled down (if necessary) to fit within the gallery's image area (whilst repsecting their aspect ratios and without cropping) but small images are not scaled up.
You can check out the list of all possible values for imageScaleMode (including short descriptions for each) in the Main Images section of the Config Options page.
Your gallery's 'config.xml' file does not seem to include a value for imageScaleMode (at least not in the portion you included in your post above) so the default value of SCALE_DOWN will be used.

Is it possible to show them at the original size ?

If you do not want Juicebox to scale your gallery images at all, then set imageScaleMode to NONE. (This will work best with a gallery of fixed size where the gallery's dimensions are known and large enough to accommodate your images without them needing to be scaled up or down to fit within the gallery's image area.)

  • DCor
  • Member
  • Offline
  • Registered: 2014-03-28
  • Posts: 6

Re: Images displayed in gallery bigger than original

I played (in JB editor) with differrent values for imageScaleMode, but couldn't see a different outcome. I'll give it another try when I'm back home.

Full xml:
http://asdaroth.com/Teodora/Teo20200125/config.xml

Index.html:
<!DOCTYPE html>
<html lang="en">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Teodora - Alexandra</title>
   
    <meta name="viewport" id="jb-viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=1, user-scalable=0" />
    <meta name="description" content="" />

    <!-- START OPEN GRAPH TAGS-->
    <meta property="og:title" content="Juicebox Gallery" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="" />
    <meta property="og:image" content="" />
    <meta property="og:description" content="" />
    <!-- END OPEN GRAPH TAGS-->

    <style type="text/css">
    body {
        margin: 0px;
    }
    </style>
</head>
<body>
    <!--START JUICEBOX EMBED-->
    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: 'rgba(34,34,34,1)'
    });
    </script>
    <div id="juicebox-container">
            <!-- Image gallery content for non-javascript devices -->
            <noscript>
                <h1></h1>
                <p></p>
                <p><img src="images/_DSC0881.jpg" title="" alt="" /><br> </p>

  • DCor
  • Member
  • Offline
  • Registered: 2014-03-28
  • Posts: 6

Re: Images displayed in gallery bigger than original

Created a new galley having imageScaleMode set to NONE. Still exhibits the same behavior.

http://asdaroth.com/juicebox_gallery/config.xml

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

Re: Images displayed in gallery bigger than original

What I'm seeing when I view your gallery is expected behavior but maybe an explanation of what I'm seeing will help to clarify some things.

The first image in your gallery has dimensions of 665 x 999 and your gallery currently sets imageScaleMode="NONE".

When I view your gallery in small browser window (shorter than the image's actual height), the image is displayed at its actual size (without any dynamic scaling), but because the browser window (and, therefore, the gallery's image area) is not large enough to accommodate the image in its entirety, it is cropped (equally at the top and bottom), as noted on the Config Options page ("NONE: No scaling. Large images are cropped to fit Image Area.").

When using imageScaleMode="NONE", the image will be seen in its entirety (without cropping) only when the users browser window (or, more specifically, the gallery's image area) is large enough to accommodate the entire image.

With a responsive gallery whose dimensions change depending on the shape and size of the user's browser viewport (such as your full page gallery), you really have no way of knowing the shape and size of your gallery (it is dependent on the user's device and browser window) so the only way to be sure that your gallery images will be seen in their entirety is to set imageScaleMode to either SCALE_DOWN (the default value) or SCALE.

SCALE_DOWN is the default value as this scales down large images to fit within the gallery's image area (if necessary) but does not scale up small images (as this will likely decrease their visual quality.

I hope this helps to explain what you are seeing.

  • DCor
  • Member
  • Offline
  • Registered: 2014-03-28
  • Posts: 6

Re: Images displayed in gallery bigger than original

Steven, thank you for the time spent explaining to me all these details.

I created a new gallery, using the same presets like on the previously analyzed one.

The same image was saved with atow sizes: 1000 px and then with 500 px, imageScaleMode being set to SCALE_DOWN in gallery. My screen size is 2560 x 1440.

Below are two screen captures that show the image's real size and how it is rendered in JB gallery.

http://asdaroth.com/juicebox_gallery/small_500px.JPG
http://asdaroth.com/juicebox_gallery/large_1000px.JPG

When imageScaleMode is set to SCALE, both images are displayed in JB at the same size, the small one being scaled up (resolution is worse). I got this.

It is not clear to me why the JB images in the gallery are about 20% bigger than original ones (opened in Irfan View/Original Size).

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

Re: Images displayed in gallery bigger than original

I have tried to replicate the problem you describe (using a small image, setting imageScaleMode to SCALE_DOWN and comparing the size of the displayed image in Irfanview and JuiceboxBuilder-Pro's live preview window) but I do not see the problem shown in your screenshots. Both images are displayed at the same size for me.

There are, however, some known issues with JuiceboxBuilder-Pro's live preview window being unable to display the gallery with 100% accuracy (due to the internal browser not fully supporting CSS 3).
Please see the Known Issues section of the JuiceboxBuilder-Pro User Guide.

I don't know if it will help but try viewing the gallery in a modern and up-to-date browser (Chrome, Edge, Firefox, Opera, Safari) rather than JuiceboxBuilder-Pro's live preview window to see if this makes a difference (and make sure that your browser's zoom functionality is set to 100%).

Incidentally, I've also just created a test gallery using your own gallery's 'config.xml' settings from your post above (in case there's some odd combination of settings which is causing the problem) but I still cannot replicate the problem myself so the issue could potentially lie somewhere within your own system.

Check that your Windows 'Settings -> Display -> Scale and layout' value is 100% (in case this is currently set to a higher values such as 125%).