GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → charlestati → Amplify

charlestati / Amplify

Licence: apache-2.0
A tiny script allowing inline image zoom

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

imagezoomlightboxinline

Projects that are alternatives of or similar to Amplify

Mediumlightbox
Nice and elegant way to add zooming functionality for images, inspired by medium.com
Stars: ✭ 671 (+46.51%)
Mutual labels:  image, zoom, lightbox
Zoomy
Adds seamless scrollView and instagram like zooming to UIImageViews in any view hierarchy.
Stars: ✭ 130 (-71.62%)
Mutual labels:  image, zoom
Stfalconimageviewer
A simple and customizable Android full-screen image viewer with shared image transition support, "pinch to zoom" and "swipe to dismiss" gestures
Stars: ✭ 1,734 (+278.6%)
Mutual labels:  image, zoom
Atgmediabrowser
Image slide-show viewer with multiple predefined transition styles, with ability to create new transitions with ease.
Stars: ✭ 186 (-59.39%)
Mutual labels:  image, zoom
Zooming
🔍 Image zoom that makes sense.
Stars: ✭ 1,538 (+235.81%)
Mutual labels:  image, zoom
React Magnifier
🔍 React image zoom component
Stars: ✭ 116 (-74.67%)
Mutual labels:  image, zoom
Ngx Gallery
Angular Gallery, Carousel and Lightbox
Stars: ✭ 417 (-8.95%)
Mutual labels:  image, lightbox
Extended image
A powerful official extension library of image, which support placeholder(loading)/ failed state, cache network, zoom pan image, photo view, slide out page, editor(crop,rotate,flip), paint custom etc.
Stars: ✭ 1,021 (+122.93%)
Mutual labels:  image, zoom
Silentbox
A lightbox inspired Vue.js component.
Stars: ✭ 196 (-57.21%)
Mutual labels:  image, lightbox
Medium Zoom
🔎🖼 A JavaScript library for zooming images like Medium
Stars: ✭ 2,799 (+511.14%)
Mutual labels:  image, zoom
Vue Product Zoomer
Zoom Prodct Image, useful for e-shop website
Stars: ✭ 248 (-45.85%)
Mutual labels:  image, zoom
React Image Zoom
React component for desktop browsers for image zoom on mouse hover
Stars: ✭ 97 (-78.82%)
Mutual labels:  image, zoom
React Modal Image
A tiny React component providing modal image Lightbox.
Stars: ✭ 97 (-78.82%)
Mutual labels:  image, lightbox
Xzoom
jQuery Zoom Gallery plugin
Stars: ✭ 120 (-73.8%)
Mutual labels:  image, zoom
Lightbox
🌌 A convenient and easy to use image viewer for your iOS app
Stars: ✭ 1,334 (+191.27%)
Mutual labels:  image, lightbox
Imageviewer
A simple and customizable Android full-screen image viewer 一个简单且可自定义的Android全屏图像浏览器
Stars: ✭ 1,889 (+312.45%)
Mutual labels:  image, zoom
Basiclightbox
The lightest lightbox ever made.
Stars: ✭ 299 (-34.72%)
Mutual labels:  image, lightbox
React Zmage
一个基于 React 的可缩放图片控件 | A scalable image wrapper power by react
Stars: ✭ 713 (+55.68%)
Mutual labels:  image, zoom
React Image Lightbox
React lightbox component
Stars: ✭ 956 (+108.73%)
Mutual labels:  image, lightbox
Vue Cool Lightbox
Vue.js lightbox inspired by fancybox.
Stars: ✭ 196 (-57.21%)
Mutual labels:  image, lightbox
View All Similar Projects ➔

Amplify

Demo gif

Overview

Amplify allows users to increase the size of images.

Best used in narrow containers, between paragraphs.

It is lightweight: 29 sloc of JS and 23 sloc of SCSS resulting in 1.22kB combined.

Demo

Quickstart

<img class="js-amplify" src="photo.jpg" alt="Photo">

Browser Support

  • Chrome
  • Firefox
  • Safari

Probably Edge, Internet Explorer 10+ and Opera too.

Known bugs

  • Sometimes the first transition is not smooth
  • Adding a wrapper for image centering prevents margin collapsing with the paragraphs

Todo

  • Use transform: scale() or JavaScript for smoother transitions
  • Find a better naming system as .js-* in CSS is not ideal

License

Apache 2.0

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].