loaded class is then used to show the div.product-sprite once the image sprite has been loaded. The element is visible only at the beginning, while the image sprite is still loading, and is used to give the proper dimensions to the figure.product-viewer element.Īs for the div.product-sprite, it has an absolute position, a height of 100% and width of 1600% (our image sprite is composed of 16 frames) and is hidden by default. The data-frame attribute of the div.cd-product-viewer-wrapper specifies the number of frames the image sprite is composed of, while the data-friction specifies the friction while dragging on the image (it has to be greater than zero). The HTML structure is composed of two main elements: a figure.product-viewer for the image sprite and the product preview image, and a div.cd-product-viewer-handle for the viewer handle. ![]() You can use it to show the exterior of a technology gadget (or a car, like in our demo!), or, in general, to create fancy product animations. The idea behind the snippet is to use an image sprite and link the dragging to a specific frame of that image. Today’s resource is a simple, interactive resource that can be used to show a virtual tour of the product. Hence, the importance to integrate interactive tools, to provide the user a way to “virtually experience” the product. This is particularly relevant for high-priced goods. Use the following CSS to set the width and height of the parent container of circlr element.In e-commerce design, one of the main goals is to fill the gap between product and user. You can specify the element for the loader ( loader).Add all the images with tag and specify the URL in the data-src attribute.Ĭall circlr() method and specify element ID ( circlrDiv).HTML Code:ĭefine an HTML element where the 360-degree rotation feature will attach. You can build 360 degree panoramic image viewer that allows the user to rotate product images to show the all-sided view. ![]() This circlr plugin helps to create 360 degree image viewer with a panoramic view from a series of images. In the following code snippet, we will use circlr library to develop 360 degree image viewer with rotation via mouse scroll, swipe, and touch events. When the user swipes or scroll or move the mouse, the image is changed using JavaScript, and a particular image of a different view is displayed in HTML. ![]() In 360 degree image viewer, the images of all slides of the product images are specified. In this code example, we will provide an easy way to integrate the product image 360-degree rotation feature with the jQuery plugin in an HTML web page. There are various jQuery plugins are available to build 360 degree image rotation functionality. ![]() The image 360 degree viewer can be implemented easily using JavaScript in HTML. If you want to show the all-sided view of the product, 360 degree image rotation viewer is the best option. Try it online photography: Erik Verheggen Checking for more images to create a 360 view Unlimited presentations, your own hosting Use the images from your own server and use any number of presentations on a page. The 360 degree view feature is very useful for the e-commerce website where product image gallery view is displayed on an HTML web page. 360 J avascript V iewer This is a very clean 360° product image viewer with all options you need. 360 degree image viewer spins the object on swipe or drag, which helps to view the image in 360-degree rotation.
0 Comments
Leave a Reply. |