Example of imgFlip to View Flip / Mirror Image
Main Features
- Fully responsive, customizable and configurable.
- Options for both vertical and horizontal flip transformation of the image.
- Show current status about flipped images.
- Smoothly transformation while flipping.
- Material Design Iconic Buttons.
- Individually and also can be used in Gallery, Lightbox and Photo Projects.
- Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and windows phone supported.
- User Friendly and Easy to implement.
What's imgFlip Offer
It will creates and handle all UI elements, however, provide classes to fully customize with CSS .
You can highly customize this plugin according to your needs.
It let's you to fully & easily implement image flip feature in your projects.
How to Implement
1. Create an image container that has one or more images.
<div class="img-container"> <img src="/image-adress.jpg"> ------------- some other stuff---- -------- ------------ <img src="/image-adress.jpg"> </div>
Note: No need to set class or id for individual image. It will automatically detect all available images within the container.
2. After this, attach the imgFlip() with that container's class or id in document ready function.
$(document).ready(function(){
$(".img-container").imgFlip({
//options goes here
});
});
All the available options are as follows:
flipVertical: true, //false to turn it off flipHorizontal : true, //false to turn it off showStatus: true, //false to turn it off hStatus: "You are Viewing Horizontally Mirror Image", //text that will show in status bar when flipped horizontally vStatus: "You are Viewing Vertically Flipped Scene", // status when flipped vertically