juliancwirko:s-image-box

Simple image popup/lightbox for Meteor

• Website: http://s-image-box.meteor.com/
• Demo: http://s-image-box-demo.meteor.com/

Usage

Add package:

meteor add juliancwirko:s-image-box

Then you can use two functions:

1. sImageBox.open()

1sImageBox.open('/path/to/full/image', {
2    originalHeight: false, // image will be responsive you can enable original height
3    originalWidth: false, // image will be responsive you can enable original width
4    animation: '' //image entry animation (scale, fadeIn, zoomIn, slideInDown)
5});

2. sImageBox.close()

1sImageBox.close()

Usage example in your app

Html:

1<template name="categoryPageItemImage">
2    <div class="image-preview">
3        <div class="js-activate-s-image-box" data-full-image-src="{{fullUrl}}" style="background-image: url({{previewUrl}})"></div>
4    </div>
5</template>

JavaScript:

1Template.categoryPageItem.events({
2    'click .js-activate-s-image-box': function (e) {
3        var imgPath = $(e.currentTarget).data('full-image-src');
4        if (imgPath) {
5            sImageBox.open(imgPath);
6        }
7    }
8});

or you can pass more custom settings for this one:

1Template.categoryPageItem.events({
2    'click .js-activate-s-image-box': function (e) {
3        var imgPath = $(e.currentTarget).data('full-image-src');
4        if (imgPath) {
5            sImageBox.open(imgPath, {
6                originalHeight: true,
7                originalWidth: true,
8                animation: 'slideInDown'
9            });
10        }
11    }
12});

sImageBox global config

You can set up your global config and also you will be able to overwrite it with custom sImageBox.open() calls. If you need your global config place the code below in the client side of your app:

1Meteor.startup(function () {
2
3    sImageBox.config({
4        originalHeight: false, // image will be responsive you can enable original height
5        originalWidth: false, // image will be responsive you can enable original width
6        animation: '' //image entry animation (scale, fadeIn, zoomIn, slideInDown)
7    });
8
9});

Styling and custom animations

You can of course overwrite the styles of sImageBox. Go to GitHub repo and check s-image-box.css file. You will find all styles there.

If you want to write your own animation for the image you should add it in you css files. Remember to name it like: .s-image-box-anim-yourAnimationName then pass yourAnimationName in the config. See s-image-box.css for examples.

Change log

• v0.2.0 better UX with loader and imagesloaded check
• v0.1.1 Settings extend fix
• v0.1.0 Init. Standard simple image popup.

Ideas and PRs are welcomed.