Resize Galleria on browser resize with multiple galleries

259 views Asked by At

I'm currently using Galleria for multiple image galleries on a page. Each gallery is created like so:

    <div class="gallery">
     <a href="/path/to/medium_image.jpg"><img src="/path/to/thumb.jpg" data-big="/path/to/full.jpg"></a>
     <a href="/path/to/medium_image.jpg"><img src="/path/to/thumb.jpg" data-big="/path/to/full.jpg"></a>
    </div>

...and at the end I have some Javascript:

  <script type="text/javascript">
  Galleria.loadTheme('/galleria/themes/twelve/galleria.twelve.min.js');
  Galleria.run('.gallery',{
  responsive: true,
  height: $(window).height() * 0.80,
  imageCrop: false,
  wait: true,
    extend: function(options) {

        Galleria.log(this) // the gallery instance
        Galleria.log(options) // the gallery options

        // listen to when an image is shown
        this.bind('image', function(e) {

            Galleria.log(e) // the event object may contain custom objects, in this case the main image
            Galleria.log(e.imageTarget) // the current image

            // lets make galleria open a lightbox when clicking the main image:
            jQuery(e.imageTarget).click(this.proxy(function() {
               this.openLightbox();
            }));
        });
    }  
});

So I've taken some code snippets that allow for clicking on the image to show the zoomed version, but the import part this question is about is the height. Notice I set the height to 80% of the current web browser viewport.

I've found other questions/tutorials that show something like this for resizing that viewport on browser resizes:

$(window).resize(function(){
  Galleria.get(0).resize();
});

but I can't seem to get this (or variations of it) to work. One issue is that I have multiple galleries and they're specified by class. I feel like I'd need to iterate through each gallery (not just to a get(0)) and resize all of them. But I'm inspecting the Javascript objects and I'm not sure how to do that.

So basically, the gallery does size properly on page load; I'd just like to resize them on browser resize to match the browser viewport.

0

There are 0 answers