Jquery-photowall NPM

jquery-photowall

jquery-photowall jQuery photo wall gallery plugin (like in google)

Description

Base on https://github.com/creotiv/jquery-photowall update jQuery photo wall gallery plugin to node module

Preview

alt tag

Installation

Install via npm

Step 1:

npm install --save jquery-photowall

Step 2:

include node_module/jquery-photowall/dist/css/jquery-photowall.css

Usage

const $ = require('jquery');
const PhotoWall = new (require('../../../../node_modules/jquery-photowall/resources/js/jquery-photowall.js'));

const PHOTOS = {
  photo_1: {
     id: 'photo-1',
     img: 'dist/images/2x/photo-1.jpg',
     meta: '',
     th: {
        src: 'dist/images/1x/photo-1.jpg',
        width: 256,
        height: 192
     }
  },
  photo_2: {
     id: 'photo-2',
     img: 'dist/images/2x/photo-2.jpg',
     meta: '',
     th: {
        src: 'dist/images/1x/photo-2.jpg',
        width: 257,
        height: 192
     }
  }
};

function _initPhotoWall() {
  PhotoWall.pw.init({
    el: '#gallery',
    zoom: false,
    showBox: true,
    showBoxSocial: false,
    padding: 3,
    lineMaxHeight: 400,
    lineMaxHeightDynamic: true,
    baseScreenHeight: 600
  });

  PhotoWall.pw.load(PHOTOS);
}

function loaded() {
  _initPhotoWall();
}

if (window.attachEvent) {
  window.attachEvent('onload', loaded);
} else if (window.addEventListener) {
  window.addEventListener('load', loaded, false);
} else {
  document.addEventListener('load', loaded, false);
}

<body>
    <div id="gallery">
      <div class="body"></div>
    </div>
</body>

License

MIT

Photo Wall Gallery JQuery image

grunt-cli jquery

@infinitebrahmanuniverse/nolb-jquery-p @everything-registry/sub-chunk-1971

7 years ago

7 years ago

7 years ago

7 years ago

7 years ago