Based on the jQuery Circlr plug-in, the product image is rotated at 360 degrees. jquerycirclr

Based on the jQuery Circlr plug-in, the product image is rotated at 360 degrees. jquerycirclr

Circlr is a jQuery plug-in that allows you to rotate and display product images in an all-round way at 360 degrees. Circlr uses a product image taken at a certain angle to produce a frame-by-frame rotation effect that allows you to drag the image, scroll wheel, and touch the image. The animation is much smoother and easier to control than the previous Rollerblade. This plug-in is very suitable for product display.

It has the following features:

Supports horizontal or vertical rotation.

Supports mobile touch events.

Supports rolling events.

Image pre-loading.

Images can be rotated in reverse or loop mode.

JQ cool example Tutorial: jQuery product image 360 degree rotation Circlr

Introduce core files

<script src='js/jquery.js'></script>  <script src='js/circlr.js'></script>

To Create html, you only need to create a DIV container for storing images. Of course, you can add a loaded DIV to improve the experience.

<div id="circlr">                 <div id="loader"></div></div>

Write JS and initialize the plug-in

Var crl = circlr (element, options); // call method // element: ID of the container element where the image is placed. // Options: parameter object. // Instance var crl = circlr ('circlr ', {scroll: true, loader: 'loader '});

Parameters

Mouse: Specifies whether to rotate an image with the mouse. The default value is true.

Scroll: whether to rotate images through scroll. The default value is false.

Vertical: determines whether to rotate an image when you move the mouse vertically. The default value is false.

Reverse: whether to reverse the direction. The default value is false.

Cycle: whether to rotate images cyclically. The default value is true.

Start: start animation frame. The default value is 0.

Speed: Specifies the speed at which an animation frame is switched over circlr. turn (I). The default value is 50 milliseconds.

Autoplay: whether to automatically rotate the image for 360 degrees. The default value is false.

PlaySpeed: Specifies the playback speed of an animation sequence. The default value is 100 milliseconds.

Loader: the ID of the pre-loaded DOM element.

Ready: the callback function after the image is loaded.

Change: The callback function after the animation frame is adapted (with the current frame and the total frame number as the parameter ).

Method

Crl. el: return the DOM Element Node of the object.

Crl. length: Total number of animation frames of the returned object.

Crl. turn (I): The animation rotates to the I frame.

Crl. go (I): The animation jumps to frame I.

Crl. play (): starts playing the animation sequence.

Crl. stop (): stop the animation.

Crl. hide (): hides the DOM element node of an object.

Crl. show (): displays the DOM element nodes of an object.

Crl. set (options): After the plug-in is initialized, the object parameters are changed:

Vertical

Reverse

Cycle

Speed

PlaySpeed

The above content is the 360-degree rotation of product images based on the jQuery Circlr plug-in introduced in this article.