• fab
  • Member
  • Offline
  • Registered: 2014-04-25
  • Posts: 1

Topic: Align images at bottom

Dear Support-Team,

obviously the only way to align images at the bottom is in fullscreen-mode.
1. I would like to align my images at the bottom
2. I would like to resize the images/gallery dynamically when the user hovers like: its 500px height and 100% width, and when the user hovers i would like to resize to 750px height and 100% width.

Any suggestions on this?

Thanks in advance and warm regards,
Fab

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

Re: Align images at bottom

1. I would like to align my images at the bottom

Move the thumbnails to somewhere other than the default position of BOTTOM  (e.g. thumbsPosition="TOP") and set imageVAlign="BOTTOM". You may also want to set imagePadding="0" and stagePadding="0".

2. I would like to resize the images/gallery dynamically when the user hovers like: its 500px height and 100% width, and when the user hovers i would like to resize to 750px height and 100% width.

There is no Juicebox-Pro API event which you could hook into when the user hovers over the gallery.
You could perhaps use the jQuery mouseover and mouseout events (on the gallery's container) in conjunction with the API method setGallerySize().
Try something like the following. Create a sample gallery with JuiceboxBuilder-Pro and replace the gallery's 'index.html' page with the code below:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="minimal-ui" />
        <style type="text/css">
            body {
                margin: 0px;
            }
        </style>
        <script src="jbcore/juicebox.js"></script>
        <script>
            function getWindowWidth() {
                return window.innerWidth ? window.innerWidth : $(window).width();
            }
            var jb = new juicebox({
                containerId: 'juicebox-container',
                galleryHeight: '500',
                galleryWidth: getWindowWidth()
            });
            $(document).ready(function() {
                $('#juicebox-container')
                    .mouseover(function() {
                        jb.setGallerySize(getWindowWidth(), '750');
                    })
                    .mouseout(function() {
                        jb.setGallerySize(getWindowWidth(), '500');
                    });
                $(window).on('resize', function() {
                    jb.setGallerySize(getWindowWidth(), '500');
                });
            });
        </script>
    </head>
    <title>Test</title>
    <body>
        <div id="juicebox-container"></div>
    </body>
</html>