Angular 模态图库 - 位置图库图像

Question

我正在尝试实现图像模态，但是我遇到了几个问题。

我希望第一张图片填满整个大框（class 下降），其余图片位于同一框下方，如图所示。

我什么都试过了，但是在图像数组中，我不能只显示一个，例如，只显示第一个:(

有什么办法可以实现吗？

谢谢！

我的 StackBlitz

Stackblitz Link

HTML

<div class="drop">
    <div class="abc">
    <!-- 1 Image here  -->
        <section>
            <ks-modal-gallery [id]="3" [modalImages]="imagesMixedSizes"></ks-modal-gallery>
        </section>
    </div>
</div>
<div class="row">
    <div class="Upcard">
    <!-- 2,3,4,5 Images here !!!  -->
    </div>
</div>

Component.ts

 imagesMixedSizes: Image[] = [
    new Image(0, {
      // modal
      img: 'https://raw.githubusercontent.com/Ks89/angular-modal-gallery/master/examples/systemjs/assets/images/gallery/pexels-photo-135230.png',

    }),
    new Image(1, {
      // modal
      img: 'https://raw.githubusercontent.com/Ks89/angular-modal-gallery/master/examples/systemjs/assets/images/gallery/pexels-photo-547115.jpeg'
    })]

图片Problem/Explanation

Answer 1

也许你可以将变量分成两个。如果这是一个选项。

点赞：https://stackblitz.com/edit/angular-anexan

或者，如果您不想不必要地创建一个新变量，则对同一个数组进行切片：

示例：

<ks-modal-gallery [id]="3" [modalImages]="imagesMixedSizes.slice(0,1)"></ks-modal-gallery>

<ks-modal-gallery [id]="4" [modalImages]="imagesMixedSizes.slice(1)"></ks-modal-gallery>

Angular 模态图库 - 位置图库图像

Angular Modal Gallery - Position gallery images

modal-dialog

typescript

angular