ember-cli-relax-images

Image and image grid components.

Install

ember install @ampatspell/ember-cli-relax-images

Style

@import "node_modules/@ampatspell/ember-cli-relax-images/app/styles/defaults.less";

// http://ionicons.com/
.relax-prev-next {
  .icon {
    position: relative;
    color: #fff;
    &:after {
      .ion;
      font-size: 48px;
      position: absolute;
      top: 10px;
      text-shadow: 0px 0px 1px rgba(0,0,0,0.8);
    }
    &.left {
      &:after {
        content: @ionicon-var-ios-arrow-back;
        left: 27px;
      }
    }
    &.right {
      &:after {
        content: @ionicon-var-ios-arrow-forward;
        right: 27px;
      }
    }
  }
}

.relax-image,
.relax-prev-next,
.relax-image-grid {
  .noselect;
}

.relax-prev-next {
  .left,
  .right {
    transition: opacity 0.5s ease-in-out;
  }
}

relax-image-grid

{{#relax-image-grid model=array key="thumbnail" action=(action 'showImage') placeholder=(l 'No images for this week yet') as |image|}}
  {{!-- below each image --}}
{{/relax-image-grid}}

relax-image

{{relax-image model=model.large action=(action 'nextImage')}}

relax-prev-next

{{#relax-prev-next prev=prev next=next action=(action 'showImage')}}
  {{relax-image model=model.large action=(action 'nextImage')}}
{{/relax-prev-next}}

relax-image-background

{{relax-image-background model=model.large class="image"}}

.image {
  background: url('') no-repeat center center;
  background-size: cover;  
}