开发者

Update galleria width/height when browser is changing dimensions

开发者 https://www.devze.com 2023-03-10 00:05 出处:网络
I have a question. Can I update the size of this plugin when I change dimensions of my browser, or maybe I could just bind it\'s size to some container and then it would change the size by default? Ma

I have a question. Can I update the size of this plugin when I change dimensions of my browser, or maybe I could just bind it's size to some container and then it would change the size by default? Maybe it is possible to scale it somehow because I really don't want to make my site "fixed" because of this.

                <script>
                Galleria.loadTheme('media/js/galleria/themes/classic/galleria.classic.min.js');
                $("#gallery").galleria(
                {
                    width: (this is what I want to be dynamic),
                    height: (this is what I want to be d开发者_StackOverflow社区ynamic),
                    clicknext: true,
                    transition: 'fade',
                    showCounter: false
                });
                </script>


There is an undocumented method called rescale(), call this to update the gallery measurements anytime, f.ex when you change the size of the container.


In case anyone stumbles on this and can't work out what's the solution from the accepted answer, this has worked for me in the end:

$('#galleria').data('galleria').resize();

This is actually documented too, so less likely to break.


Never used Galleria, but just peeked at their docs and it sounds like by default, both those values are auto and will take the width and height of the containing element, so if your containing element is liquid, you can just leave width and height out of your init options and it should conform to the container. Have you tried just depending on the parent element's dimensions?


You can do this binding a function that updates the width and height of the element to $(window).resize()

You should find out where is the galleria function applying 'width' and 'height', and use your new function to do the calculations you need with the window dimensions, and apply them to that element.

Something like:

$(window).resize(function(){ 
$('#elementtobemodified').width(/*calculate the new width you want to apply here*/).height(/*and do the same for the height here*/);
});.

I think that should do it.

0

精彩评论

暂无评论...
验证码 换一张
取 消