Novicell Frontend

Image: Zoom 

<img data-src="https://cdn-images-1.medium.com/max/2600/0*HICLyAdNSIyT0ODU.jpg" alt="Zoom Image" class="image lazyload  image-zoom ">
 
{{> @image modifier="image-zoom" }}
 
{
  "url": "https://cdn-images-1.medium.com/max/2600/0*HICLyAdNSIyT0ODU.jpg",
  "alt": "Zoom Image"
}
  • Content: 
    /*
 * Element: Image Zoom
 */

.image-zoom {
    width: 100%;
    max-height: 100%;
}

.image-zoom-overlay {
    z-index: 233;
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: 'alpha(opacity=0)';
    opacity: 0;
    -webkit-transition: opacity 300ms;
    -o-transition: opacity 300ms;
    transition: opacity 300ms;
}
.image-zoom-overlay.show {
    opacity: 0.97;
}
  • URL: /components/raw/image/image-zoom.css
  • Filesystem Path: patterns/01-atoms/image/image-zoom.css
  • Size: 426 Bytes
  • Content: 
    'use strict';
var novicell = novicell || {};
var Imagezoom = Imagezoom || {};

novicell.imageZoom =
    novicell.imageZoom ||
    new function () {
        this.init = () => {
            var image = document.querySelector('.image-zoom');

            if (image) {
                var zoom = new Imagezoom(image).overlay();
                image.addEventListener('click', function (e) {
                    // stop propagation if we want to retain our HTML api
                    // in other parts of the site.
                    e.stopPropagation();
                    zoom.show();
                });
            }
        };
    }();
  • URL: /components/raw/image/image-zoom.js
  • Filesystem Path: patterns/01-atoms/image/image-zoom.js
  • Size: 640 Bytes
  • Content: 
    /*
 * Element: Image
 */

.image {
    width: 100%;
}
  • URL: /components/raw/image/image.css
  • Filesystem Path: patterns/01-atoms/image/image.css
  • Size: 54 Bytes

There are no notes for this item.