When creating a Juicebox gallery with the Lightroom plugin, you can set the Resolution and quality for the resulting images in the 'Web -> Output Settings' control panel. It is not possible to set a target filesize but with a little trial and error, you should be able to find suitable settings.

Thanks Steven.
When opening a gallery that has already been created and exported from Lightroom, and thus already has the image sizes assigned, if you change the image quality in the Juicebox application, while it changes the index.html, and the config.xml, it doesn't actually change the file size of the images, even if you save it to a new folder.
Does this somehow translate in a browser making it load faster, or is this a pointless thing to do unless assigning the 'Quality' while actually exporting the images from Lightroom?
Thanks

Thanks again, Steven. I worked with this yesterday and was able to figure it out. Thank you very much for your help!
I do have what is probably an easy question for you pertaining to my menu page that precedes my Juicebox Gallerys, if that's okay...
My menu page is comprised of 3 tables of different heights and cells, but the same width.
1. A short one on top to hold my logo.
2. The main one to hold all my thumbnails which link to the Gallery's.
3. A very short one on the bottom for © info and name.
In the Juicebox Gallery, the main Image gets smaller and larger depending on how large or small you make the browser window.
What command code makes this possible?
Can you link 3 diff tables to fill the screen and have this action happen also?

Thanks again for all of your help, I really appreciate it. Cheers

PS When exporting a photo from Lightroom you have the option of limiting the KB's of the photos, however I have not seen this when exporting a Gallery.
Is there a way to limit KB's for photos when exporting a Gallery besides adjusting the JPG Quality?

Thanks a lot Steven! I have one more question...
I'm using the Juicebox Gallery, not embedding, as I like my Gallery's as clean as possible.
So, if I set the Position of the gallery to 'relative', will it still be in the center of the browser on any size computer?
Thanks again, Michael

Steven wrote:

If you want to include a Facebook Like Button on your page, then, ordinarily, you would need to either make room for the button on your page (alongside the gallery) or overlay the container which contains the button on top of the gallery using CSS.
Details of the code to include on your web page can be obtained from this Facebook page.

For example, if you selected the HTML 5 implementation and wanted the Like Button to overlap the top-left corner of your gallery, then your web page's code would look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="minimal-ui" />
    <meta name="description" content="" />
    <style type="text/css">
    body {
        margin: 0px;
    }
    #overlay {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 9999;
    }
    </style>
</head>
<body>

    <div id="fb-root"></div>
    <script>(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    <script src="jbcore/juicebox.js"></script>
    <script>
    new juicebox({
        containerId: 'juicebox-container',
        galleryWidth: '100%',
        galleryHeight: '100%',
        backgroundColor: '#222222',
        galleryTitlePosition: 'NONE'
    });
    </script>
    <div id="juicebox-container"></div>

    <div id="overlay">
        <div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div>
    </div>

</body>
</html>

Perhaps an easier method would be to select the IFRAME implementation of the Like Button and paste the entire iframe code into the Gallery Title text field in JuiceboxBuilder-Pro (in the 'Customize -> Lite' section). If trying this, I would also recommend setting galleryTitlePosition="TOP" (in the 'Customize -> General' section) so that the Like button is always visible in your gallery.

Please note that the Like Button will not be displayed until you upload your gallery to your web server.

I hope this helps.

Thank you!
I figured it out and also fixed the z index from 9999 to 999.
1. But is there a way to overlay it at the bottom of the gallery, or will the placement always be absolute because it's an overlay?
2. Can I change the color or transparency of the Like button?

Thanks again! Michael

laurentsch wrote:

Please, could you give the URL of your gallery, or if it isn't published, give its code + the code given by FB for the "like" button and so, I suppose that I will be able to give you a code which combines well both.

Thank you very much for responding!

Perhaps you could highlight where you put the FB code inside my index.html code, so that I can be clear on where to insert it on my other Gallery's.
FYI I am working in Dreamweaver, but I'm NO Pro and not very familiar with code at all, I just figure it out as I go!

Thanks, Michael


The FB code is 2 part.

FB say's that Part 1 is supposed to be placed after the opening body tag

PART 1
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>


FB say's that Part 2 should be placed wherever you want it to appear on your page.
Although I believe this part is different with Juicebox

PART 2
<div class="fb-like" data-href="https://developers.facebook.com/docs/plugins/" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

Here is the code for my index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Asher Edelman Cover Story</title>
    <meta charset="utf-8" />
    <meta name="viewport" id="jb-viewport" content="minimal-ui" />
    <meta name="description" content="" />

    <!-- START OPEN GRAPH TAGS-->
    <meta property="og:title" content="Asher Edelman Cover Story" />
    <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(255,255,255,1)'
    });
    </script>
    <div id="juicebox-container">
            <!-- Image gallery content for non-javascript devices -->
            <noscript>
                <h1>Asher Edelman Cover Story</h1>
                <p></p>
                <p><img src="images/52d3f9f0cdc87.jpg" title="" alt="" /><br> </p>
                <p><img src="images/IMG_3619.jpg" title="" alt="" /><br> </p>
                <p><img src="images/IMG_3564.jpg" title="" alt="" /><br> </p>
                <p><img src="images/IMG_3642.jpg" title="" alt="" /><br> </p>
                <p><img src="images/Asher_1.jpg" title="" alt="" /><br> </p>
                <p><img src="images/Asher_2.jpg" title="" alt="" /><br> </p>
                <p><img src="images/Asher_3.jpg" title="" alt="" /><br> </p>
            </noscript>
        </div>

Hello all, I need help ASAP.
I want to add an FB Like button to my Gallery's.
The option to add the 'Share' button is in Juicebox Pro, but no option to add just the 'Like' button is.
I've tried various methods by getting code and placing it in the index.html, but I am no pro at code and was not sure where to place the different lines of code generated by FB.
Can you please help me with this ASAP???
Will you please be very clear where to place the code as well as what code to use.
Thank you!