How does it work?
Its very simple, all you need to do is add data-expander to your tag. Like so:
<img src="someimg.jpg" data-expander/>
As soon as the page is loaded, this old boring tag is transformed into an Expander Object.
If an Expander image is clicked, it will visually animate to a full screen view. It will fit the screen proportions and calculate any aspect ratio needed.
The key feature of Expander is that it expands from the position of the image to the center of the screen. Then retracts back into the position of the element giving it the feeling of Expansion.
Expander uses latest JSON settings scheme to determine each individual Expander Object.
You can give each tag a different setting. These settings include,
- Animation type
- Speed of the transition
- Theme for overall appearance
- URL for High Quality img
- Create Image Gallery
- Slide images using Keyboard Shortcuts
Check out the Demo page and try out the Expander!
P.S: I would love to see how you have been using the Expander on your projects/ Websites. Leave a comment with your website!