https://github.com/davidecalignano/MediumLightbox

Nice and elegant way to add zooming functionality for images, inspired by medium.com
https://github.com/davidecalignano/MediumLightbox

image javascript lightbox modal plugin zoom

Last synced: 3 months ago
JSON representation

Nice and elegant way to add zooming functionality for images, inspired by medium.com

• Host: GitHub
• URL: https://github.com/davidecalignano/MediumLightbox
• Owner: davidecalignano
• License: mit
• Created: 2015-03-07T15:47:38.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2019-06-05T12:40:21.000Z (over 5 years ago)
• Last Synced: 2024-10-07T19:15:46.473Z (4 months ago)
• Topics: image, javascript, lightbox, modal, plugin, zoom
• Language: HTML
• Size: 1.9 MB
• Stars: 658
• Watchers: 19
• Forks: 67
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
MediumLightbox

=============

#### Nice and elegant way to add zooming functionality for images, inspired by medium.com

This plugin reproduce exactly the same code that use Medium to add the smooth transition effect clicking over the images, with some improvement.

* **It works on mobile**, unlike [Medium](https:/medium.com).

* **It's simple**, unlike [Fluidbox](http://terrymun.github.io/Fluidbox/).

##### Key features

Written in pure javascript for better performance, lightweight and simple. [View demo](http://davidecalignano.it/project/files/medium-lightbox/demo/demo.html).

##### Use

**Include**

    

    

**Style.css** has some extra style for demo purposes. Pick just what you need.

**html**

    

        


            


            

        

    

    

To do some calculations some attributes are necessary:

* **data-width**: the real width of the image.

* **data-height**: the real height of the image.

* To the div with **aspect-ratio-fill** class is applied a padding-bottom that is the aspect ratio of the image. 

The aspect ratio percentage is found with [(height/width)*100] formula.


**Initialize plugin**

	MediumLightbox('figure.zoom-effect');

#### Option

    MediumLightbox('figure.zoom-effect', {

        margin:40

    });

* **Margin** - default: 20 - Margin in px applied to the image in zoomed view.

#### Preview | [Live demo](http://davidecalignano.it/project/files/medium-lightbox/demo/demo.html)

![alt text](http://davidecalignano.it/project/files/medium-lightbox/medium-lightbox-demo.gif "Demo")