Question

我目前在网页上使用Galleria用于多个图片库。每个画廊都是这样创建的：

    <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>

...最后我有一些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();
            }));
        });
    }  
});

所以我已经采用了一些代码片段，允许点击图像来显示缩放版本，但这个问题的导入部分是高度。请注意，我将高度设置为当前Web浏览器视口的80％。

我发现其他问题/教程显示类似这样的内容，用于在浏览器调整大小时调整视口大小：

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

但我似乎无法使用此功能（或其变体）。一个问题是我有多个画廊，他们是由班级指定的。我觉得我需要遍历每个画廊（不仅仅是获取（0））并调整所有画廊的大小。但我正在检查Javascript对象，我不知道该怎么做。

所以基本上，画廊在页面加载时的尺寸正确;我只想在浏览器调整大小时调整它们以匹配浏览器视口。

在浏览器上调整Galleria大小，调整多个库

0 个答案: