Mirror any Image with jQuery imgFlip Plugin

imgFlip let's user to easily & smoothly flip any image (both horizontally and vertically).

Written in: HTML5, CSS3, JS
Frameworks: jQuery 3.3.1 & Material-Design-Iconic-Font 2.0

Fork on GiHub Download

Example of imgFlip to View Flip / Mirror Image

Main Features

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">

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.

     //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