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.