Skip to content

Example repository for responsive images with FSI Layers, used in conjunction with FSI Server for layered product presentation, banners, hero images or product configurators. ⭐️ Star to support our work!

License

Notifications You must be signed in to change notification settings

neptunelabs/fsi-layers-samples

Repository files navigation

FSI Layers Samples

Pixel-perfect High-DPI-ready Fast 🚀 Hackable Consistent

License


FSI Layers renders any number of images as layers in a canvas. The real-time scaling capabilities of the image server are used to achieve pixel-perfect results. All layers can be animated and blended. FSI Layers can be created and controlled as a simple HTML tag and/or via JavaScript API.

This repository contains examples on how to use and build your own applications.

Project Image

Getting Started

Without starting this project in your IDE, you can discover all the demos on the GitHub Pages or develop and customise in StackBlitz.

Start and develop

To run and modify this samples:

NPM

npm install
npm start

or

Yarn

yarn
yarn start

Now you can customize the demo according to your own preferences or develop something new.

You can find a very simple example to start with in the samples/starter folder.

How it works

These examples rely on a framework that uses Grunt, Browsersync, Bootstrap and Sass to launch a local server, replace template variables and pass changes directly to the browser window.

However, these dependencies are generally not required for the use of FSI Layers!

Requirements with own images

The images are loaded from an image server (FSI server) in dynamic resolution. In addition, depending on the sample, static assets such as JavaScript, CSS or static images may also be required. In this demo, images and static assets are loaded from an example server. For your own images with these examples in this repository, a separate image server instance is required.

To do this quickly, you can use an evaluation copy for an unlimited period of time.

The recommended way to quickly start your own instance via Docker is described in this repository.

If you have your own server, copy env.yml.dist to env.yml and change the settings according to your FSI server URL.

Documentation

For further information on the FSI Viewer and FSI Server, please refer to the official documentation.

About

Example repository for responsive images with FSI Layers, used in conjunction with FSI Server for layered product presentation, banners, hero images or product configurators. ⭐️ Star to support our work!

Topics

Resources

License

Stars

Watchers

Forks