New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

ember-photoswipe

Package Overview
Dependencies
Maintainers
1
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ember-photoswipe

An Ember addon for using Photoswipe in Ember applications.

  • 0.9.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

Ember PhotoSwipe

npm version npm monthly downloads Ember Observer Score License: MIT

An ember-cli addon for using PhotoSwipe in Ember applications.

Demo

Compatibility

  • Ember.js v3.24 or above
  • Ember CLI v3.24 or above
  • Node.js v12 or above

Getting Started

Install in ember-cli application

ember install ember-photoswipe

Then include the following in your app.scss file:

@import 'ember-photoswipe';

Usage

// Controller
import Controller from '@ember/controller';

export default class ApplicationController extends Controller {
  items = [
    {
      src: 'https://picsum.photos/1024/768?random&id=0',
      w: 1024,
      h: 768,
    },
    {
      src: 'https://picsum.photos/1024/768?random&id=1',
      w: 1024,
      h: 768,
    },
    {
      src: 'https://picsum.photos/1024/768?random&id=2',
      w: 1024,
      h: 768,
    },
  ];
}
<!-- Template -->
<PhotoSwipe @items={{this.items}} as |photoSwipe|>
  {{#each this.items as |item index|}}
    <img src={{this.items.src}} {{on 'click' (fn photoSwipe.actions.open (hash index=index))}} >
  {{/each}}
</PhotoSwipe>

Photoswipe options

You can pass items and photoswipe options directly into photo-swipe component. All list of options is available here.

Event

Phowo-swipe sends actions based on the corresponding photoswipe events.

<PhotoSwipe @items={{this.items}} @history={{false}} @onInitialZoomInEnd={{this.onInitialZoomInEnd}} as |photoSwipe|>
  <img src={{this.items.firstObject.src}} {{on 'click' photoSwipe.actions.open}} >
</PhotoSwipe>

Configuration

Custom variables and theme

You can use custom PhotoSwipe variables.

//We use $pswp__assets-path because images of default-skin stored in assets/images folder
$pswp__assets-path: 'images/';
@import 'ember-photoswipe/main.scss';
@import 'ember-photoswipe/default-skin/default-skin.scss';

System-wide config

If you want to apply some options to all your photo-swipe components, you need create the photo-swipe component and apply options inside it:

import PhotoSwipeComponent from 'ember-photoswipe/components/photo-swipe';

export default class extends PhotoSwipeComponent {
  history = false;
  bgOpacity = 0.7;
};

Contributing

See the Contributing guide for details.

License

ember-photoswipe is released under the MIT License. See the bundled LICENSE file for details.

Keywords

FAQs

Package last updated on 06 Mar 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc