CodeCanyon
CodeCanyon
Code
Code
Code
Code
Code
Code

Expander

Expander

Expander is a JavaScript library that converts any old tag into a smart clickable expanding object. It uses the latest of CSS3 animations to provide the best visual results. Expander is fully responsive and reactive. It will fit any screen or device as its mobile ready. It also support Chrome, IE, Firefox, Safari & Opera.

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.

Options

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!

by
by
by
by
by
by