npm i --save github:pixelunion/bc-zoom
1. Copy image assets from /node_modules/photoswipe/dist/default-skin
into your theme's /assets/img
directory.
The $pswp__assets-path
variable is the relative path to where you copied the image assets.
$pswp__assets-path: "../img/";
@import "../../node_modules/photoswipe/src/css/main";
@import "../../node_modules/photoswipe/src/css/default-skin/default-skin";
3. Inject language strings either in a global injects file or on the template where you'll be using bc-zoom.
Note that the keys for the injects should be written as below, but the value can be whatever you want.
{{inject 'zoomClose' (lang 'core.product.zoom.close')}}
{{inject 'zoomShare' (lang 'core.product.zoom.share')}}
{{inject 'zoomFullscreen' (lang 'core.product.zoom.fullscreen')}}
{{inject 'zoomAction' (lang 'core.product.zoom.zoom_action')}}
{{inject 'zoomPrevious' (lang 'core.product.zoom.previous')}}
{{inject 'zoomNext' (lang 'core.product.zoom.next')}}
Each thumbnail should be wrapped in an a
that links to the full size image. The alt
is used as the caption.
{{#each images}}
<a class="product-image" href="{{getImage this 'zoom'}}" data-product-image>
<img src="{{getImage this 'product'}}" alt="{{alt}}">
</a>
{{/each}}
The Zoom class has 3 parameters:
imageSelector
(required) - [string]: the selector for an individual imagecontext
(recommended) - [object]: the template context containing the translation strings aboveoptions
(optional) - [object]: PhotoSwipe options
import Zoom from 'bc-zoom';
this.imageLightbox = new Zoom('[data-product-image]', context);
$('.image-container').on('click', '[data-product-image]', (event) => {
event.preventDefault();
this.imageLightbox.show($(event.currentTarget).index());
});
Install:
npm i
Bundle module for release:
gulp bundle
Demo:
npm run serve
webpack --watch