Giter Club home page Giter Club logo

neptunelabs / fsi-quickzoom-samples Goto Github PK

View Code? Open in Web Editor NEW
1.0 0.0 0.0 3.79 MB

Example repository for responsive images with FSI QuickZoom, used in conjunction with FSI Server for product presentation with zoom, hover views, image replacement or details images. ⭐️ Star to support our work!

Home Page: https://www.neptunelabs.com/fsi-quickzoom/

License: Apache License 2.0

hover image zoom hover-image dynamic-resolution responsive-images zoomable-images bootstrap react vanilla-html

fsi-quickzoom-samples's Introduction

FSI QuickZoom Samples

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

License


FSI QuickZoom is a tool for adding image zoom to desktop and mobile browser. When hovering over a single source image provided by FSI Server, the part of the image the cursor is currently pointing at will be displayed enlarged in a zoom window next to the original image. The real-time scaling capabilities of the image server are used to achieve pixel-perfect results. FSI QuickZoom 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 using images with FSI Server!

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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.