Marzipano is a 360° media viewer for the modern web.
Supports all major desktop browsers and mobile devices. Embraces standard web technologies and provides a powerful Javascript API.
View on GitHub
Get started with the Marzipano Tool
The tool generates a virtual tour from a set of panoramas and allows you to export it as web application that can be deployed as-is or used as a boilerplate for more advanced projects. Requires Firefox or Chrome.
Starting from scratch
See the documentation for instructions.
Embraces the web
Designed to work with web standards. Control the viewer with a powerful Javascript API and create interfaces using standard HTML and CSS.
Browser support
Built with WebGL technology supported on all modern desktop and mobile browsers and devices.
Great performance
Marzipano is optimized to display 360° images of any size with the best performance possible. It is also lightweight: 55KB when gzipped.
Marzipano provides a simple API for the most common use cases, but it is designed to give the user a lot of control over how it works.
The demos showcase some of the possibilities that Marzipano allows and how to implement them. Their source code is available on GitHub .
Simple Tour Demo
Simple responsive tour generated with the Marzipano Tool. Includes features such as hotspots and autorotate.
Getting Started
The easiest way to get started with marzipano is using the:.
The tool processes your panoramas on the browser. Both sphere (equirectangular) and cubeface formats are supported. After processing you can export a virtual tour application that can be deployed to any web hosting platform. This application may also be used as a boilerplate for further customization using standard Javascript , HTML and CSS . The Marzipano tool requires the latest version of Firefox or Chrome.
If you would like to start an application from scratch, check the documentation .
Please post bug reports on the GitHub issue tracker. Use the discussion group for suggestions, questions or comments.
Marzipano is not an official Google product.
VirtualTourPlugin Styles
Create virtual tours by linking multiple panoramas.
This plugin is available in the @photo-sphere-viewer/virtual-tour-plugin package.
The plugin allows to define nodes which contains a panorama and one or more links to other nodes.
There are two different ways to define the position of the links : the manual mode and the GPS mode.
The nodes can be provided all at once or asynchronously as the user navigates.
The Gallery plugin , Map plugin , Plan plugin and Compass plugin plugins can be easily integrated with the virtual tour.
Definition
Id (required) .
- type: string
Unique identifier of the node
panorama (required)
Refer to the main config page .
caption / description / panoData / sphereCorrection
Links (required in client mode) .
- type: array
Definition of the links of this node. See below .
gps (required in GPS mode)
- type: number[]
GPS coordinates of this node as an array of two or three values ( [longitude, latitude, altitude?] ).
Projection system
Only the ESPG:4326 projection is supported.
Short name of this node, used in links tooltips and the GalleryPlugin.
thumbnail
Thumbnail for the nodes list in the GalleryPlugin.
- type: MarkerConfig[]
Additional markers displayed on this node, requires the Markers plugin .
The markers can be positioned with the classic position option (yaw + pitch) or, if positionMode=gps , with the gps option (longitude + latitude + altitude).
map (client mode only)
Configuration of the hotspot when using the Map plugin . See global configuration for details.
plan (client+GPS mode only)
Configuration of the hotspot when using the Plan plugin . The node will be automatically placed on the map but you can customize the style of the hotspot .
Any custom data you want to attach to the node.
nodeId (required)
Identifier of the target node.
position (required in manual mode)
- type: { yaw, pitch } | { textureX, textureY }
Position of the link in spherical coordinates (radians/degrees) or texture coordinates (pixels).
gps (required in GPS+server mode)
Define the GPS coordinates of the target node. It must be provided in order to position the link without having to load the target node.
linkOffset
- type: { yaw?, pitch?, depth? }
Offset added to the final link position, to move the marker/arrow without affecting where the viewer is rotated before going to the next node.
depth is only used in 3D render mode to manage overlapping arrows. Note that overlapping arrows are automatically made transparent (depending on arrowsPosition.linkOverlapAngle ).
arrowStyle
Overrides the global style of the arrow used to display the link. See global configuration for details.
Any custom data you want to attach to the link.
Configuration
- type: 'client' | 'server'
- default: 'client'
- updatable: no
Configure how the nodes configuration is provided.
positionMode
- type: 'manual' | 'gps'
- default: 'manual'
Configure how the links between nodes are positionned.
renderMode
- type: '2d' | '3d'
- default: '3d'
How the links are displayed.
nodes (client mode only)
Initial list of nodes. You can also call setNodes method later.
getNode(nodeId) (required in server mode)
- type: function(nodeId: string) => Promise<Node>
Callback to load the configuration of a node.
startNodeId
Id of the initially loaded node. If empty the first node will be displayed. You can also call setCurrentNode method later.
- type: boolean | function(node: Node, link: NodeLink) => boolean
- default: false
Enable the preloading of linked nodes, can be a function that returns true or false for each link.
transitionOptions
- type: object | function
- default: { showLoader: true, speed: '20rpm', fadeIn: true, rotation: true }
Configuration of the transition between nodes. Can be a callback.
linksOnCompass
- type: boolean
- default: true
If the Compass plugin is enabled, displays the links on the compass.
Configuration when using the Map plugin .
getLinkTooltip(content, link, node)
- type: function(string, link, node) => string
- default: null
Callback used to replace/modify the tooltip for a link. The first parameter is the default tooltip content which contains the node name + thumbnail + caption .
- type: object
Style of the arrow used to display links.
Default value is:
You can also use image (path to an image file) and add custom CSS with style and className .
arrowsPosition (3d mode only)
Setnodes(nodes, [startnodeid]) (client mode only) .
Changes the nodes and display the first one (or the one designated by startNodeId ).
setCurrentNode(nodeId, [options])
Changes the current node. options allows to override the default transitionOptions .
getCurrentNode()
Returns the current node.
node-changed(node, data)
Triggered when the current node is changed.
enter-arrow(link, node) | leave-arrow(link, node)
Triggered when the user puts the cursor hover or away an arrow.
A Javascript Panorama Viewer
Getting Started
Panolens.js is based on Three.JS (a 3D framework) with specific interest area in panorama, virtual reality, and potentially augmented reality. To start using panolens.js, download minified three.js and minified panolens.js and include these two files in your project <script src="js/three.min.js"></script> <script src="js/panolens.min.js"></script>
More panorama constructors, methods and events detail can be found in API documentation
Basic Usage
To create an image panorama, an equirectangular image (2 to 1 ratio e.g. width and height is 1024 x 512) is required. The following code creates a viewer and an image panorama with given url. To be able to see the panorama, the panorama has to be added to the viewer <script> const panorama = new PANOLENS.ImagePanorama( 'asset/textures/equirectangular/field.jpg' ); const viewer = new PANOLENS.Viewer(); viewer.add( panorama ); </script>
Embedded Iframe
Image panorama.
Panorama by equirectangular image
Cube Panorama
Panorama with a six-face cubemap
Basic Panorama
Virtual environment with grid texture
Google Street View Panorama
Google street view panorama by panoId
Video Panorama
360 video texture with built-in controls (mobile friendly)
Demo of infospots with can be either hovering text or custom DOM element
Infospot Focus
Tween camera with different curves and easing
Panorama Linking
Linking two panoramas with built-in infospot for navigation back and forth
Panorama Loading Progress
Event-driven listeners for loading progress tracking
Simple Panorama Gallery
A simple gallery with dynamic creation and disposal
Little Planet Image
Stereographic projection to create little planet effect
Dispatching hoverenter and hoverleave event for mouseless interaction
Interactive Panorama
A room with interactive 3D model
Storytelling
Telling story through panorama
Memory Leak Testing
Test dynamic creation and disposal
Camera Background
Live camera view as background
Stereo Image
Stereo Image Panorama
Stereo Video
Stereo Video Panorama
Pano Theater
A panoramic way of browsing movie information
Codepen Live Editor
Control viewer state via API
Custom Widget
Create custom widget on control bar
Custom Linking
Set panorama by click event on infospot
Custom Set Panorama
Set panorama with button event
Custom Container
Render panolens on a container
Custom Hover Element
Show 3D object when hovering infospot
Initial LookAt
Set initial lookat position
Spatial Audio
Play spatial audio inside panorama
Update Texture
Set texture of a panorama
Auto Rotation
Enable auto rotation
Custom Orbit Control
Specify control angle for OrbitControl
Panolens.js continues to be free and open-sourced library. If you think it's useful please give support :)
jQuery Script - Free jQuery Plugins and Tutorials
Virtual tour - simple panorama viewer plugin.
More in this category...
View Recommended Plugins
TOP jQuery Plugins For 2024
Virtual Tour is a simple jQuery Panorama Viewer Plugin that allows you to add interactivity without to transform some panoramic views into a virtual tour.
Quick Usage:
1. Insert jQuery and js calls into your head section
2. Include the necessary stylesheets in the document.
3. The HTML Markup.
4. All default configuration options.
This awesome jQuery plugin is developed by openstudio.fr . For more Advanced Usages, please check the demo page or visit the official website.
- Prev: Cyclotron - 360°Panorama Image Display Plugin
- Next: Swift Content Navigation Plugin - Windy
Related jQuery Plugins
Cyclotron - 360°Panorama Image Display Plugin
You Might Also Like
Google Image Inspired Gallery View For jQuery - searchGalleryView
Fast Responsive Video Gallery Plugin For jQuery - speedvault.js
Cool jQuery Striped Image Gallery Plugin - stripe
Responsive Photo Gallery & Lightbox Plugin For jQuery - ZOOM
Basic jQuery Photo Gallery With Thumb Navigation - thumbChanger
Responsive Image Viewer / Carousel Plugin For jQuery - Tekitizy
Add Your Review
@photo-sphere-viewer/virtual-tour-plugin
- 0 Dependencies
- 2 Dependents
- 43 Versions
Photo Sphere Viewer / Virtual Tour Plugin
Photo Sphere Viewer plugin to create virtual tours by linking multiple panoramas.
Documentation
https://photo-sphere-viewer.js.org/plugins/virtual-tour.html
This library is available under the MIT license.
- photosphere
Package Sidebar
npm i @photo-sphere-viewer/virtual-tour-plugin
Git github.com/mistic100/Photo-Sphere-Viewer
photo-sphere-viewer.js.org/plugins/virtual-tour.html
Downloads Weekly Downloads
Unpacked size, total files, last publish.
12 days ago
Collaborators
iPanorama 360
The jquery virtual tour plugin with a builder
iPanorama 360° Virtual Tour is a lightweight and rich-feature panorama viewer for the web. This plugin is built with modern libraries jQuery and Three.js to be used for part of backend solutions. Additionally, it has an awesome feature called virtual tour which allowed the user to navigate from one scene to another. Also, it supports hotspots for providing information about any part of the scene or for creating interactive tours. It uses their own tooltip system, you can enrich it with text, images, video and other online media. Use this plugin to create interactive tours, maps and presentations. The plugin can be deployed easily. It runs on all modern browsers and mobile devices like iOS, Android and Windows.
- 3 Scene Types - cube, sphere and cylinder
- HotSpots - allows you to mark different areas that you want to point out
- Virtual Tour – travel from one to another scene by clicking on special hotspots
- Tooltip System – the plugin has a build-in powerful tooltip system
- Compass – you can be sure to look forward
- Preview Image – you can set an image that will show as a preview
- Fullscreen – you can toggle from the normal state to fullscreen and back
- Mouse Wheel – zoom with mouse wheel scrolling
- Keyboard – arrows can be used for navigation through the scene
- Touch – touch was used for navigation tasks
- Autoplay - the scene autorotate around a vertical axis
- Awesome Looks - 2 predefined themes
- View customization - create your own theme
- Powerful API - over 45 options
- Easy Integration
- Help via Email
- and so more..
Which panorama image you can use?
Horizontal and vertical 360° images with 1:2 ratio
Images with 1:6 ratio, easy for ceiling, floor, tripod retouch.
A circle panorama without top and floor
Setup your config
If you want to create a config quickly and easily, without having to worry about manual changes, use our builder . The builder is a web-based designing app and it's included in the package. It enables users to create a virtual tour in a short period. This saves you so much in terms of time and resources. The following video tutorial will show you how to build a simple config using the builder and publish a virtual tour on your site. This video is a quick overview of using the builder. Please use our contact form if you have any further questions.
Create a simple HTML file
1. Load jQuery.js , Three.js and jquery.ipanorama.min.js in the head section for your html document
2. Load the CSS theme file that styles the plugin
3. Create a DIV with unique ID:
4. Finally just call the plugin with your ID as parameter
4.1 Simple example
4.2 Advanced example with two different type of scenes and virtual tour support
- Advertise with us
- Explore by categories
- Free Online Developer Tools
- Privacy Policy
- Comment Policy
Top 10: Best Tour (website guide) Javascript and jQuery plugins
Carlos Delgado
- January 02, 2019
- 196.6K views
See our compilation from 10 of the best Tour Javascript and jQuery plugins to create a web guide for your user
Have you ever visited a website or a web application, where you don't have the most remote idea of how to start to using it because it's your first time there and you just feel like Jhon Travolta?
If you're a web developer, you may want to avoid this experience from your user creating some type of guide video, or a well explained documentation. However, some users won't read the documentation or see a video because there is no time for that, they just want to use your app! For this kind of users (that's the 90% of the people) you can use a dynamic in web tour while they learn to use your app. You can implement this feature by using a Guided Tour plugin in your app.
In this top, we are going to share with you 10 of the best guided tour plugins made in VanillaJS and jQuery.
Anno is a step-by-step guides plugin for powerful web apps. Anno.js is built to be extensible , the source is about 500 lines of literate coffeescript; you can read the annotated source in just a few minutes.
9. jQuery guide
jQuery Guide is a jQuery plugin made to create a "How to use guide" for your web app. It uses jQuery animations to provide a smooth and nice experience for the user while they learn how to use your app.
8. aSimpleTour
aSimpleTour is a jQuery plugin that will help you to make website tours easily.
7. Pageguide
Pageguide is a plugin to create interactive guide for web page elements using jQuery and CSS3. Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions. Pageguide comes with an example implementation (the files are in /example) which you can run locally with Grunt.
6. Bootstro.js
Bootstro show your users a guided tour of what is what on a page. Especially, for first-time users. Bootstro requires bootstrap & bootstrap popover , just add the class .bootstro to any element that you'd like to be highlighted, then include bootstro.js & bootstro.css and start using Javascript bootstro.start() .
Any element anywhere on the page can be intro'ed: popovers are automatically scrolled to so they always get focused. This plugins is easily customizable, Bootstro provides various public methods so you can control as you like bootstro.start() , bootstro.next() , bootstro.prev() .
5. Hopscotch
Hopscotch is a framework to make it easy for developers to add product tours to their pages. Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress. Hopscotch supports internationalization via i18n object in tour config. The default language is English. If you need a tour in a language other than English, pass in translated text in your tour config. Text used for previous, next, skip, done and close buttons, as well as, tour step numbers can be translated.
A Hopscotch tour consists of a tour id, an array of tour steps defined as JSON objects, and a number of tour-specific options. The tour id is simply a unique identifier string. The simplest tour consists of just an id string and an array of one or more steps. This plugin has been created by the guys at LinkedIn .
4. Enjoyhint
A free web-tool that is created to guide users through a site or app in the simplest way. It gives an excellent way to create interactive tutorials with hints and tips, and embed them into your web apps, thus, enhancing their usability and value/effectiveness. EnjoyHint adds simple hints that prompt users to navigate a website or an app intuitively and easily. It comes along with instant auto-focus highlighting, as the user moves into a new field.
We demonstrated the use of the EnjoyHint web-tool in an issue tracker demo, created with Webix JavaScript UI library. The tool itself is based on Javascript, HTML5 and CSS. The tool works on the client-side and can be used with any server-side platform. The key features of EnjoyHint:
- Fast web-tool setup
- Simple initialization and configuration
- Interactive hints - instant tips that provide a description to the user about the field they are in
- Scenario of coherent actions - allows adding a sequence of hints for all necessary steps
- Auto-focus highlighting - involves automatic focus on the area related to the hint and its instant hightlighting when the hint loads
- Defining shape - defining the shape and margin of the highlighted area
- Timeout settings - allows setting the delay before the moment, when the element is highlighted
- Hint resume that restarts the display of hints from the step where it was stopped
- Auto scrolling to the highlighted element at different animation speed.
- Cross-browser support (Chrome, FireFox, IE10+, Safari)
- Support for Android, iOS and Windows touch sceens (laptops and tablets)
3. Intro.js
Intro.js is a Step-by-step guide and feature introduction plugin for your website. When new users visit your website or product you should demonstrate your product features using a step-by-step guide. Even when you develop and add a new feature to your product, you should be able to represent them to your users using a user-friendly solution. Intro.js is developed to enable web and mobile developers to create a step-by-step introduction easily.
Intro.js has no dependencies, fast and small 10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped), besides it works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer.
2. Shepherd
Shepherd is a javascript library for guiding users through your app. It uses Tether, another open source library, to position all of its steps. Tether makes sure your steps never end up off screen or cropped by an overflow. Try resizing your browser to see what we mean.
Shepherd works in IE9+ and all modern browsers.
1. Bootstrap Tour
Bootstrap Tour is a plugin to make an animated, dynamic guided tour through your website using the famous Bootstrap Framework, however, if you don't use Boostrap you can use the standalone version without problem. This plugins is the easiest way to show people how to use your website with Bootstrap Popovers.
Honorable mentions
Driver.js is a light-weight, no-dependency, vanilla JavaScript engine to drive the user's focus across the page. Driver is compatible with all the major browsers and can be used for any of your overlay needs. Feature introductions, focus shifters, call-to-action are just a few examples.
If you know another awesome Tour plugin to show a website to your user or you're developing your own tour plugin, don't be shy and share it with the community in the comment box.
Senior Software Engineer at Software Medico . Interested in programming since he was 14 years old, Carlos is a self-taught programmer and founder and author of most of the articles at Our Code World.
Related Articles
Top 10 : Best autocomplete jQuery and javascript plugins
- July 05, 2016
- 156.6K views
Top 10 : Best notification libraries and plugins for Javascript and jQuery
- February 20, 2016
- 200.2K views
Top 10 : Gallery and photo viewer plugins for javascript and jQuery
- February 21, 2016
- 68.1K views
Top 5 : Best javascript and jQuery tooltip plugins
- March 19, 2016
- 24.5K views
Top 5: Best javascript video background plugins
- August 10, 2016
Top 10: Best slide sidebar menu (drawer) javascript and jQuery plugins
- December 15, 2016
- 153.6K views
Advertising
All Rights Reserved © 2015 - 2024
Avansel Viewer
Free Easy to use Opensource JavaScript Three.js based panorama / virtual tours viewer.
We want to have a JavaScript Panorama/Virtual Tour viewer that:
- Easy to use
With features of
- Multiresolution
- Plugins and Modules
- Support hotspots, polygons
12 Fresh and Best jQuery Website Tour Plugins
Have you ever wished there was an easy way to guide your visitors through different features of your website? Well, you can still achieve this by using jQuery website tour plugins which enable users to display overall functionality of a website in elegant and promising style. In this article we have compiled a list of Fresh and Best jQuery Website Tour plugins by which you can create dynamic and beautiful website tours, step by step walkthroughs, and instructional guides.
1. Simple Virtual Tour
2. jquery website tour for wordpress, 3. ipanorama 360°, 5. pagetour.js, 6. 360 virtual tour, 7. 3d – tour hero, 9. website tour builder for wordpress, 10. iguider, 11. tourist guide, 12. joyride 2.
I am technology enthusiast, developer and love jQuery plugins.
Save my name, email, and website in this browser for the next time I comment.
Learning jQuery
- Intermediate
- Begin with jQuery
- Setting up jQuery UI
- Start with jQuery Mobile
- jQuery with ASP.NET
- AngularJS Interview Questions
- Free ebooks to learn AngularJS
- Bootstrapping AngularJS
- All AngularJS articles
- jQuery Interview Questions
- 200+ jQuery Plugin Collection
- Popup window plugin
- LightBox Plugins
- Text Effect Plugins
- Best jQuery Plugins-2013
- Best jQuery Plugins-2012
- All Plugins
- Learn jQuery Mobile
- jQuery Mobile Plugins
10 jQuery Plugins to Create Website Tours
In this post, find a complied list of 10 awesome, easy, customizable and eye catching jQuery plugins to create website tours, step by step walkthroughs, interactive help, and instructional guides. These plugins can be used to guide users through a website or to demo any product to provide an awesome experience to your users.
Trip.js is a jQuery plugin that can help you customize a tutorial trip easily with a lot of flexibility. Right now Trip.js supports lots of useful stuffs like keyboard binding, animations, changing themes ... etc. If you want to highly customize your own tutorial trip, then Trip.js is definitely worth to give it a try!
2. DKNotus Tour
DKNotus Tour is a tiny jQuery site tour plugin which guides your users through a tour of your webpage or web app using Bootstrap. It also has useful features like auto scroll, "spotlight" and supports 27 languages.
Joyride is extremely flexible and lets you take control of how people interact with your tour. It is programmed to be cross-browser compatible with modern browsers and even used some fancy CSS to avoid images.
TourBus is a jQuery tour/walkthrough plugin. It takes more of a toolkit approach than some of the alternatives that try to have focusing elements, auto-progress with timers and indicators and etc.
5. Hemi Intro
Hemi Intro is a simple and fast jQuery plugin that creates an interactive step-by-step guide for your website or web application to let your visitors learn about new features and functions.
6. Intro.js
Intro.js is a lightweight plugin to create step By step website tour guide. It uses data attributes for navigation and also has support navigation using Keyboard keys.
Mytour is a jQuery plugin that provides an easy and lightweight way to create an enjoyable virtual tour for your site. It's so fast and so easy to setup that you can do it in a few minutes without too much effort!
Guide is a jQuery plugin used to create an interactive visual tour for the visitors to learn about new features & functions of your web page.
Crumble allows you to quickly and easily build feature tours for your website or app using small bubbles! The bubbles are visually interesting, and will draw attention. Due to the small size, make sure that you write using concise language that visitors can read quickly.
10. Introtour-ui
Introtour-ui is a JS plugin which can be used with jQuery. And it allows you to quickly add a step by step walkthrough of features on your page.
Popular Posts
- Using jQuery's Data APIs
- Merging jQuery Deferreds and .animate()
- A jQuery UI Combobox Under the Hood
- Quick Tip: Prevent Animation Queue Buildup
- Working with Events, part 1
- Improved Animated Scrolling Script for Same-Page Links
Recommended Book
What Is This?
Learning jQuery is a multi-author weblog providing jQuery tutorials, demos, and announcements. We have tutorials for all skill levels, and each entry is categorized by level of difficulty.
Support the jQuery Project
If you or your organization have benefitted from the use of jQuery, please consider donating to John Resig and the jQuery project.
- Cookies and privacy policy
- Entries (RSS)
- Comments (RSS)
© Copyright 2006–2024 Learning jQuery and participating authors. Written content on this site is under a Creative Commons License. Code examples are under your choice of MIT or GPL license.
Development & Design by Landocs with WordPress
Development by Karl Swedberg . Design by Rex Rainey . Published with WordPress .
Navigation Menu
Search code, repositories, users, issues, pull requests..., provide feedback.
We read every piece of feedback, and take your input very seriously.
Saved searches
Use saved searches to filter your results more quickly.
To see all available qualifiers, see our documentation .
virtual-tour
Here are 43 public repositories matching this topic..., gadlol / 360-virtual-tour-creator-softwares.
A collective list of 360° Virtual Tour Software for building Virtual Tours online & offline.
- Updated Oct 21, 2018
rudrajikadra / Virtual-Reality-Tour-Unity-3D-World-Tour
This project is build in Unity 3D, it's a world tour theme showing different photospheres of various places in the world, it also uses 3D models that are placed in the environment.
- Updated May 30, 2020
ariestaazalia / Virtual-Tour-using-Pannellum
Virtual Tour using Pannellum and Laravel 8.x
- Updated Apr 4, 2024
sokhuong-uon / VTour
Virtual Tour using Three.js 😊
- Updated Nov 4, 2020
practice-uffs / tour-virtual
Um tour virtual nos ambientes físicos dos campi da UFFS.
- Updated Jan 10, 2024
lunarks / 360-koc-university
A web application that allows Koç University students to experience a virtual orientation tour.
- Updated Jun 13, 2021
Elius94 / psv-lens-flare-plugin
Plugin to add lens flares to a Photo Sphere Viewer (Library: PhotoSphereViewer) by mistic100
- Updated Jan 22, 2024
visionn / crespi
Visit an UNESCO world heritage from your sofa
- Updated Jul 20, 2020
patrickhuijten / virtual-tour-expodeco
Virtual Tradeshow Expodeco Lima, Peru 2020
- Updated Jan 1, 2023
Tars4815 / riccio3di
A web app for exploring in 3D an art exhibition
- Updated Mar 1, 2024
filippoerbisti / Roccolo-s-project
Ecommerce wineshop Roccolo del Lago
- Updated Mar 9, 2023
rsk5492 / Night-at-a-Museum-VR
A Virtual Museum showcasing the amazing applications of VR in military.
- Updated Oct 8, 2017
fdd4s / floorfy-dl-virtual-tour-web-viewer
Download floorfy virtual tours and self host in a web server with Pannellum
- Updated Jan 29, 2024
PriyanshuDangi / Virtual-NITT
The web rendered 3D model of NIT-Trichy.
- Updated Oct 31, 2023
kris-boyd / cafe-publish
A virtual tour interactive interface to view filmed theatrical scenes.
- Updated Feb 1, 2023
polishedstudios / react-marzipano-firebase
This web application is an interactive, gamified virtual tour made with Node.js, React and Marzipano. It features different types of interactive spots.
- Updated Aug 26, 2022
fdd4s / floorfy-dl
Download floorfy virtual tours to equirectangular and skybox
Orforio / MetEX
The Paris Métro Experience
Orforio / MetEX-Rails
MétEX, the Paris Métro Experience
- Updated Sep 27, 2020
LaErre9 / poppeaproject360
Lascio questa piccolo spazio per un progetto nato nel 2016, pubblicato e terminato nel 2018. Un progetto finito. Mai utilizzato. A voi la visita.
- Updated Mar 1, 2023
Improve this page
Add a description, image, and links to the virtual-tour topic page so that developers can more easily learn about it.
Curate this topic
Add this topic to your repo
To associate your repository with the virtual-tour topic, visit your repo's landing page and select "manage topics."
7 Awesome JavaScript Product Tour Libraries
Top javascript tour libraries that will help you guide users through using your app..
Shanika Wickramasinghe
Bits and Pieces
Tour and guide libraries are there to help you guide your users through using your app. They do so by adding extra information to your UI, by providing tips or text (usually obtained from the server in JSON format), and by adding step-by-step instructions regarding the UI and/or functionalities of your web app. This post will cover my seven personal favorite libraries.
Build a Clear UI (Before Using Guide Libraries)
“A user interface is like a joke. If you have to explain it, it’s not that good”. — Martin Leblanc
As you well know, nothing beats a self-explanatory UI. Instructions of any type should only be used after you’ve done your best in delivering a clear UI and a great UX. One key step in achieving that is building a design system .
Design systems or UI libraries are a way to reuse and standardize UI components (among other things). They’re a great way to maintain consistency in style and function, making your app more predictable and much easier to learn (less variance in UI means fewer things need to be learned).
Design systems are no longer a luxury enjoyed exclusively by large enterprises. Thanks to new cloud solutions like Bit.dev , design systems or UI libraries can grow and expand as you build your app. You can simply push individual UI components from any codebase/repository to a shared component hub where you and your team may discover, test, use and collaborate on them. Bit supports React, React with TS, Angular, VueJS and many others.
Building a UI Component Library for Your Startup
How to build a component library that suits your startup’s needs..
blog.bitsrc.io
1. Intro.js
Intro.js is widely used due to its user-friendly solutions and has 19k GitHub stars. Its most important features are:
- No dependencies: It does not require any other dependencies
- Small and fast: The library’s smaller size makes the guiding process smooth and intuitive. The overall size of JavaScript files is 10KB, and CSS is 2.5KB.
- User-Friendly: Navigation is user-friendly and provides various themes that can be selected as per your preference.
- Browser Compatibility: Works on all major browsers like Google Chrome, Mozilla Firefox, Opera, Safari, and Internet Explorer.
- Documentation: The documentation is excellent with samples and examples of each element to be introduced.
Intro.js is a free and open-source library, however, if you are using the library for your business you can subscribe…
introjs.com
How to Install
To use Intro.js, you need to have npm and Node.js installed. Alternately, you can get Intro.js from:
- Its GitHub repository: use, git clone https://github.com/usablica/intro.js.git
- using bower:
- CDNs ( jsdeliver.com , cdnjs.com )
Once you have installed intro.js, there are three simple steps to add it to your project:
- Add the JS and CSS files (intro.js and introjs.css) into your project. If you require right to left language support, you can also add introjs-rtl.min.css.
- Add the attributes data-intro and data-step to the relevant HTML elements. This will enable intro.js for the particular elements.
- Call the following JavaScript function:
Use the following additional parameter to call Intro.js on a particular element or class.
Here is an example page where the user-friendly Intro.js is seen working.
See the Users
Intro.js is used by many organizations like SAP, Amazon, Nestle, and Kobo.
2. Shepherd
Shepherd has 8.1k GitHub stars , and its website demonstrates how it works. Here are its main features:
- Accessibility: Provides keyboard navigation support, follows a11y compliance, and also uses JavaScript to enable focus trapping inside DOM elements.
- Highly Customizable: Allows changing the look and feel without affecting performance.
- Framework Ready: Readily ingrates into your project’s front-end framework.
- Documentation: Documentation covers installations and customizations including theming, and styling for your projects.
Shepherd - Guide your users through a tour of your app.
Guide your users through a tour of your app..
Guide your users through a tour of your app.shepherdjs.dev
Shepherd is integrated with many major front-end frameworks and provides the following wrapper facilitates out of the box:
- Angular: angular-shepherd is an Angular wrapper, compatible with Angular 8+.
- Ember: ember-shepherd is an ember wrapper, tested with Ember.js >= v3.8, and is compatible with Ember CLI v12.3.
- React: react-shepherd is a React wrapper.
- Vue: vue-shepherd is a Vue wrapper.
You can directly install these wrappers using npm or yarn:
It can also be pulled directly via JsDeliver from the CDN:
Once you have installed Shepherd, you can include the CSS and JS files as follows:
Here is an example of creating a Shepherd tour and adding steps with DOM elements attached to it.
Shephard is used by companies like SimplePlanner and Brokermate to guide their users through the initial steps of their applications.
3. Bootstrap Tour
Twitter Bootstrap provides its own free tour implementation with Bootstrap Tour. It has 4,315 GitHub stars.
Bootstrap popovers are quick and easy to build. This is a jQuery-based plugin for bootstrap and uses the power of DOM and JavaScript configuration to build the tour. It’s as simple as including the JS and CSS files and provides in-depth documentation.
Bootstrap Tour
If you are using bootstrap, include bootstrap-tour.min.css and bootstrap-tour.min.js: otherwise, just include….
bootstraptour.com
You can simply use the CSS and JS files of bootstrap:
Or use standalone CSS or JavaScript files:
You can even pull the JS and CSS files from CDN.
After the initial setup, you can create an instance of the tour and add steps with the element details as follows:
4. Chardin.js
Inspired by Gmail’s new composer tour, Chardin.js is a simple overlay of instructions on existing elements. It uses a JQuery plugin to display instructions. The GitHub page contains the instructions and documentation and has 4.9k GitHub stars.
Chardin.js - Simple and beautiful overlay instructions for your apps.
heelhook.github.io
You can fork the GitHub repo or download the required CSS and JS files chardinjs.css and chardinjs.min.js and add them to the HTML page.
After setting up, you can add instructions to the document. Below is an example of adding an instruction to an image element. The data-intro sets the text to be displayed and data-positions decide the position of the text.
To run Chardin in the sequential mode you need to use different instructions like data-chardin-sequenced=”true”, data-chardin-auto=”true” and data-chardin-delay=”100” to display the instructions with an automatic movement through elements.
Once the elements are ready with the instructions, you can initialize the library through a button click or make it run automatically. The library can also be limited to a particular container.
Chardin.js allows you to refresh the overlay and also provides construction options to specify URL containing text as JSON objects that can be displayed as instructions.
5. PageGuide
PageGuide is a smart guide for interactive, dynamic, and single-page apps based on jQuery and CSS3.
Pageguide by SolarWinds
An interactive guide for web page elements using jquery and css3. view the project on github tracelytics/pageguide….
tracelytics.github.io
You can install PageGuide in any one of the following four ways:
- Download the latest release from GitHub
- Clone the repo: git clone https://github.com/tracelytics/pageguide.git
- Install with Bower
Install using npm
The installation is loaded with examples and can be run using Grunt at http://localhost:3000/example/ .
For the initial setup, add pageguide.js and the CSS file as follows:
Add the following code to your HTML file to initialize PageGuide:
Specify the selector in <ul>, this will be matched by PageGuide to display the text. Below is an example of adding pageguide.js to the bottom of the page.
PageGuide is used to display static messages on the page, resulting in it being less cluttered.
6. Hopscotch
Hopscotch was built by Gordon Koo and Hans van de Bruggen as an open-source tool during LinkedIn’s Incubator program . Its main purpose was to solve problems of usability, intuitiveness, and performance.
With 4.3k GitHub stars, it is only 8kb in its minified and gzipped state. Though it does not require dependencies, it may use jQuery if available on the page. Hopscotch offers:
- Event callbacks: supports callbacks for onStart, onNext, and onClose events.
- Multipage resistance: Uses HTML5 session storage to persist the state of the tour across pages.
- i18n: Supports internationalization.
- Lightweight callouts: Manages callouts with a convenient method to create them.
- Browser compatibility: It is compatible with all browsers.
- Customizable: It allows CSS tweaks, bubble markup, and page interactivity.
LinkedInAttic/hopscotch
This project is no longer used by linkedin and is currently unmaintained. if you would like to maintain this project….
Use Grunt.js to build Hopscotch. This will run the test suite with new artifacts. Then include the two files hopscotch.js and hopscotch.css into the HTML page.
Once the initial setup is complete, you can initialize the tour using JSON.
Hopscotch can be tested using the Jasmine testing framework and allows continuous integration with Travis CI.
7. Tourist.js
Tourist.js is a simple library best suited for a single page application than a multipage website. It can control the interface at each step. Using Tourist, you can create a guide for the steps that require opening a window or menu. A series of steps can be specified with instructions for particular elements.
Despite the absence of a website, the GitHub page with 12k stars consists of extensive documentation.
easelinc/tourist
Tourist.js is a simple library for creating guided tours through your app. it's better suited to complex, single-page….
You can install Tourist.js using the following bower command:
Tourist requires jQuery and Backbone, and has the ability to use Bootstrap 3 popovers (default) or QTip2 tips along with Bootstrap 3 CSS.
The “tourist.js” JavaScript file and an optional CSS file can be used to customize styles.
After the initial setup, you can create the steps and add them to the tour instance as follows:
It also allows you to have your custom implementation for tips using Tourist.tip.
Implementing JavaScript tours and guides is an easy way to introduce users to an application. Most of these tools use CSS and JavaScript files with simple initialization. These tools are used by many top-notch companies. How your tours and guides look, and function will depend on the library you select. The right tour can make your application a lot more intuitive and attractive to users.
How to Easily Share Vue Components Between Applications
Learn how to easily share vue components between different projects, sync changes, and build faster using bit., 10 top javascript libraries and tools for an awesome ui/ux, recommended tools and libraries that will help you build a stunning web app in 2020, 11 chrome apis that will give your web app a native feel, 11 chrome apis that will give your web app a native-like user experience..
Written by Shanika Wickramasinghe
Senior Software Engineer and Freelance Technical Writer. I write about any Computer Science related topic. https://www.linkedin.com/in/shanikawickramasinghe
More from Shanika Wickramasinghe and Bits and Pieces
Frontend Weekly
Playwright vs Puppeteer: Choosing the Right Browser Automation Tool in 2024
What are the origins of playwright and puppeteer.
Jonathan Saring
Micro Frontend Architecture: A Guide
Micro frontends are fundamentally changing how we build and scale frontend. by breaking down monolithic frontends into smaller, more….
Ashan Fernando
Mastering Micro Frontends: 9 Patterns Every Developer Should Know
This article explores nine prominent micro frontend integration patterns, highlighting their benefits, limitations, and practical….
Building a React Desktop App with Electron
How to build a desktop app using react, electron and electron-react-boilerplate, recommended from medium.
Aakash Thakur
JavaScript in Plain English
Webpack to Rspack: Boosting Your Build Performance
10 Common Mistakes React Developers Make (And How to Avoid Them)
Interesting Design Topics
Stories to Help You Grow as a Designer
Stories to Help You Grow as a Software Developer
Programming Domain
Can You Answer This Senior Level JavaScript Promise Interview Question?
Most interviewees failed on it..
Alexander Nguyen
Level Up Coding
The resume that got a software engineer a $300,000 job at Google.
1-page. well-formatted..
Today I Interviewed for a Lead Front-End Role
And they asked me a couple of tough questions.
Text to speech
- jQuery Webdesign
- Website Themes
- Free Templates
- CSS CodeLab
- Submit Your Tutorial
Best jQuery Website Tour Plugins & Tutorials with Demo
Driver.js : javascript engine to drive user’s focus across the page.
A light-weight, no-dependency, vanilla JavaScript engine to drive the user’s focus across the page.
- Simple : is simple to use and has no external dependency at all
- Light-weight : ~4kb in size, vanilla JavaScript and no external dependency
- Highly customizable : has a powerful API and can be used however you want
- Highlight anything : highlight any (literally any) element on page
- Feature introductions : create powerful feature introductions for your web applications
- Focus shifters : add focus shifters for users
- User friendly : Everything is controllable by keyboard
- Consistent behavior : usable across all browsers (including in-famous IE)
- MIT Licensed : free for personal and commercial use
PageTour.js – jQuery Lightweight Site Tour Guide
PageTour.js – A lightweight tour composer to guide your visitors, onboard new users, highlight new features, make your product easier and build a stunning online user experience.
- Display your tour with many patterns
- Automatic best position calculation
- 80+ manual positions variation
- Nice overlay options and transitions
- Useful theme architecture
- Build custom navigation
- Easy data injection
jQuery Page Tour Plugin
JQuery-powered tour library that displays information about the page the user is on.
- Spotlights DOM objects
- Displays a title and description of each DOM object.
- Places animated targets around the DOM object to add emphasis on where to look.
- Programmatically can move to next/previous items in the tour.
- Items can be ordered.
- Recalculates positions after window resizes.
iTour : jQuery Easy Tour Plugin for the Complex Interface
The plugin itour gives you the opportunity to tell you about the functionality of any interface. In addition, the plugin «itour» can perform the function of teaching, display the task, prompt you what to do and follow up on implementation of tasks. This is the most flexible and fuktsionalnye plugin among all his analogs.
- 36 Positions’ Variants
- Auto Positioning of Message
- Detect Events
- Trigger Events
- Callback Functions
- Map of All Steps
- Control of Buttons Text
- Scroll to Element
3D-Tour Hero : Script of WebGL Based Virtual Tour
This scripts helps you to add Virtual 3D Tour to your site. Purchase include the source of Visual Virtual Tour Constructor! It helps to create the Virtual Tour in visual mode in your site admin panel!
- Maximal Support in Browsers due to WebGL & Canvas Renderers
- HTML5 3D-Tour Redactor for Admin Panel
- Convenient and Great API
- Control Settings (Speed & Direction of ‘Hand-Rotate’, ‘Zoom’, ‘Auto-Rotate’)
- Start Camera Direction
- Load Animation
- Links to 3D Tour creation
- Helper to easy Getting the Point on 3D-Scene to link snap
- Export & Import player data with all configs in JSON format
jQuery Impromptu : Prompt Box Plugin
jQuery Impromptu is an extension to help provide a more pleasant way to spontaneously prompt a user for input. More or less this is a great replacement for an alert, prompt, and confirm. Not only does it replace these but it also allows for creating forms within these controls. This is not intended to be a modal replacement, just a quick tool to prompt user input in a fashionable way.
ddTour : jQuery Site Tour Plugin
A simple uncomplicated lightweight site tour jQuery solution.
- Unlike other tour solutions you keep your code in one place. The tooltip pops up right where you have a description of it.
- Traverse to any element by designated class selector
- This is a simple grunt stupid solution as they say in the Marine Corps.
TourBus : jQuery Tour/Walkthrough plugin
A jQuery tour/walkthrough plugin for developers. It includes limited automatic behavior, more like a ‘toolkit’ than some of the others out there.
Product Tour with jQuery & CSS3
A responsive tour snippet, with a step-by-step guide to help users understand how to use your website.
Animated Alert with jQuery & CSS3
Animated alerts are the JQuery plugin based on css3 animation. Using it you can effectively communicate to users the right information. There are 68 animations, multiple color themes and types of messages and detailed documentation. Also you can develop your own themes, because of the efficient organization of the code. The plugin works in all modern browsers and on all devices.
- Accordion (46)
- Animation (1,127)
- Articles (56)
- Bootstrap (259)
- Calendar (61)
- Carousel (105)
- Chart & Graph (126)
- Core Java Script (1,091)
- CSS2 / CSS3.0 (1,359)
- Drag & Drop (190)
- Events (78)
- Forms (564)
- Gallery (571)
- HTML5 (486)
- Image Effects (211)
- jQuery Mobile (52)
- jQuery UI (77)
- Layout (45)
- Menus (546)
- Other API (270)
- Other Libraries (15)
- Plugins (3,921)
- Popup Window (372)
- Premium (791)
- Responsive (616)
- Slider (478)
- Snippets (162)
- SVG Tutorial (187)
- Tables (165)
- Text Effect (204)
- Video & Audio (197)
- Wordpress (59)
3500+ Free CSS Code Snippets
Jquery plugins tags.
© 2023 Best jQuery .
- Plans & Pricing
- WordPress Hosting
- Domain Names
- Website Builder
- Create a Blog
- Professional Email
- Website Design Services
- Course Maker
- WordPress Themes
- WordPress Plugins
- WordPress Patterns
- Google Apps
- WordPress.com Support
- Website Building Tips
- Business Name Generator
- Discover New Posts
- Popular Tags
- Blog Search
- Daily Webinars
- Learn WordPress
Plugins marketplace
Add new functionality and integrations to your site with thousands of plugins.
WordPress.com
- P2: WordPress for Teams
- WordPress Forums
- WordPress News
- Developer Resources
- Terms of Service
- Privacy Policy
Mobile Apps
- Get it on Google Play
- Download on the App Store
Social Media
- WordPress.com on Twitter
- WordPress.com on Facebook
- WordPress.com on Instagram
- WordPress.com on YouTube
Plugin Directory
iPanorama 360 – WordPress Virtual Tour Builder
Installation
- Development
Description
iPanorama 360 is the WordPress plugin out there that lets you create excellent virtual tours for clients from directly inside the WordPress admin in seconds. The plugin supports markers for providing information about any part of the scene or for navigation to other rooms/areas. With a well-builded tooltip system, you can enrich a scene with text, images, video, and other online media resources. Use this plugin to create interactive & virtual tours, maps, presentations.
Just upload 360 panoramic images, and this plugin will help you to transform them into a good realistic virtual tour.
iPanorama 360 supports the classic shortcode, plus it’s fully compatible with Gutenberg Block Editor and has iFrame embed feature that help to share your tour on a third-party web resources.
Why use iPanorama 360?
This plugin has all features that are needed for your deployed a good virtual tour without any problem.
Powerful Builder Interface To Create Virtual Tours Easily
iPanorama 360 has a modern web interface, created to help you build an interactive virtual tour quick and easy.
Just imagine, you can create your first virtual tour in seconds!!!
The plugin supports the preview mode, it will help you to see all your changes before the publish. Isn’t that a good feature?)
Create A Realistic Tour From Scene to Another
You can create several scenes from 360 degree images and connect them using markers. The user can click on a marker to go previous or next scene. The walking to another scene can be styled by using a special transition effects (fade, zoom, twist and etc). Plus you can set tooltips & popovers for markers on each scene to show additional information to a viewer.
Shortcode Support
Inside the classic editor you can simply embed a virtual tour using this [ipano id=”123″] shortcode. Just set your virtual tour ID and your tour is ready to publish.
Gutenberg Block Support
Inside the Gutenberg block editor you can find the iPanorama 360 block, see the common section. This block is used to embed your virtual tour quckly on a page or post. Select a virtual tour ID from the list, set width & height if it’s needed and the tour is ready to go.
IFrame Embed Feature Support
You can share your tour on other web sites using the html iframe. To do this you should go to the tour builder, select the “shortcode” section and copy/paste the embed iframe code.
Control Permissions for Authors and Editors
The plugin gives you a way to edit the access for wp roles to create virtual tours. Only selected roles can modify virtual tours. Each selected role can have one state from this list: ‘private’, ‘group’, ‘all’.
- private – you can create & edit only your items
- group – you can create & edit the group items
- all – you can create & edit all items (from any group, including admin items)
Who Should Use iPanorama 360?
- Travel Agency
- Art Galleries
- Real Estate Agency
and much more…
List of features
- Easy To Use Builder
- Gutenberg block support
- Create Multiple Scenes (5 types)
- Sphere & Cube Scene
- Little Planet Scene
- Google Street View Scene
- Create Markers & Tooltips & Popovers
- Two Popover Styles (inbox, lightbox)
- Marker Style Creator
- Customization with Custom CSS
- Tooltips Show & Hide Animations (50+)
- Popover Show & Hide Animations (50+)
- Connect Scenes via Special Markers
- Duplicate Tour on One Click
- Scene Transition Animation
- Live Preview Virtual Tour Before Publish
- Gyroscope & Keyboard Navigation
- Auto Rotation (play, stop, speed)
- Audio Background (play, stop, volume)
- Normal & Stereo View
- Thumbnails Preview
- Embed iframe Feature
- Responsive Default Design
- Export & Import Config
- Two Themes (light & dark)
- Permission System For WP User Roles
- Great Customization
- Powerful API
Screenshots
This plugin provides 1 block.
- Ipanorama Shortcode Block
- Upload the entire ipanorama folder to the /wp-content/plugins/ directory.
- Activate the plugin through the Plugins menu in WordPress admin.
- Create a new virtual tour, Use [ipano id=”123″] shortcode to publish your virtual tour into any page or post.
Why should I use iPanorama 360?
You can easily create a virtual tour for your web site using this plugin. Just provide a 360 degree panoramic photo and the plugin will do all job for you. To attract users more you can add markers with tooltips which include additional information, add more scenes to navigate too.
You can download the plugin from wordpress.org. Once you have downloaded it, you can go to your dashboard, select plugins item and upload the file. Then activate the plugin. Once activated, on the left side under your dashboard, you will find the option iPanorama 360 at the bottom.
I’d like access to more features and support. How can I get them?
You can get access to more features and support by visiting the CodeCanyon website and purchasing the pro version . Purchasing the plugin gets you to access to the full version of the iPanorama 360 Virtual Tour Builder WordPress plugin, automatic updates and support.
What is the difference between Lite and PRO
The lite version has only one limitation. You can create and use only one item. All other features are the same as PRO has.
veryyyyyyyyyyyyy good
Very powerful plugin
Right at the beginning, this is not fake!!!
This version only supports ONE 360 image
Great plugin!
Easy + Powerful = Awesome!!!
Contributors & developers.
“iPanorama 360 – WordPress Virtual Tour Builder” is open source software. The following people have contributed to this plugin.
“iPanorama 360 – WordPress Virtual Tour Builder” has been translated into 1 locale. Thank you to the translators for their contributions.
Translate “iPanorama 360 – WordPress Virtual Tour Builder” into your language.
Interested in development?
Browse the code , check out the SVN repository , or subscribe to the development log by RSS .
= 1.8.4 * Fix: unauthorized access to preview of deactivated panoramas for sub+ users
= 1.8.3 * Fix: constant FILTER_SANITIZE_STRIPPED is deprecated * Fix: unauthorized access to config.json of deactivated panoramas
= 1.8.2 * Fix: unauthorized access to view deactivated panoramas
- Fix: feedback form
- Fix: SQL injection via shortcode
- Fix: SQL injection vulnerability (list-table-items.php)
- Fix: constant FILTER_SANITIZE_STRING is deprecated
- Fix: incorrect rest_rout url for the plain permalink type
- Fix: MySQL current_timestamp update
- Mod: cancel the use of json files to store the item config
- Fix: $wpdb->prepare calls
- Fix: incorrect render order
- Fix: prevent cross-site scripting (XSS) from shortcode
- Mod: polish the code
- Fix: empty list in wp 6.1
- New: feedback form
- Fix: scene preload images
- Fix: warped images
- Fix: unexpected output during activation
- Mod: texture loading improvements
- Fix: hidden markers in RTL mode
- Fix: pinch zoom for the flat scene type
- Fix: prevent XSS attacks
- New: set the compass North from the preview window
- New: set the start point coord from the preview window
- Fix: popover close on click outside
- Fix: audio & video continues play after a popover close
- New: Gutenberg block support
- Fix: permissions list
- Fix: permissions for the role can be: ‘private’, ‘group’, ‘all’
- New: show the current scene pos & zoom
- New: permissions for the role can be private or general
- New: shortcode attribute “customdata”
- Fix: zoom for the flat type scene
- Fix: marker autofocus
- Fix: can’t change the markers position
- Fix: can’t open an item, the infinity loading
- Fix: item date
- Mod: audio player with a new interface
- New: global styles & the ‘onLoad’ callback
- Fix: removing disabled elements from the output
- Fix: converting the url protocol from HTTP to HTTPS if needed
- New: search item box, trash support
- New: shortcode attribute ‘slug’
- Fix: widgets thumbnail images lazyload
- Fix: website under HTTPS (secured with SSL certificate), but scene images are under HTTP (unsecured)
- Mod: preload image generation
- New: compass support
- New: tooltip show trigger “enter”
- Fix: ‘civic’ widget home button
- Mod: tooltip show/hide actions after the hover event
- New: load a scene from the URL param ‘sceneid’
- New: support Emoji
- Fix: markers from the previous scenes are accessible even though they are invisible
- Fix: can’t navigate to a google street scene type
- Fix: the builder improperly adds a marker to the center of the scene
- Fix: marker “go to a scene” option not shown
- Fix: virtual tour doesn’t work on some Mac, empty scene
- Fix: save & load an item from a config file
- New: preload images to get faster pano loading experience
- New: shortcode attribute ‘width’, ‘height’
- Fix: camera save option doesn’t work (cause black screen)
- Fix: look at a shape
- Mod: add the core plugin versioning to the loader
- Fix: loader can’t load old items
- New: scene transition effects (fade, zoom, swirl and etc)
- Fix: compatibly with old items (resave item)
- Fix: marker positions for the flat scene type
- Fix: widget styles
- Fix: disabled the marker autoFocus & go to a new scene
- Mod: sets the camera lookAt position via yaw & pitch values
- New: sets the marker position via yaw & pitch values
- New: DB field ‘editor’
- Fix: super admin can’t see menu items
- Fix: on IE is no vertical scroll bar (lightbox & inbox)
- New: item slug (URL valid name)
- Mod: file system operations
- New: options for preview & iframe embed page
- New: image for a marker
- New: auto focus on a marker after the click event
- Mod: light & dark themes, the ‘civic’ widget
- Fix: FontAwesome i2svg breaks the admin frontend
- New: edit roles with access to the plugin
- Fix: loader is called only once on a page
- Mod: user can view & edit only their items
- Fix: audio options (stop previous)
- Fix: popovers in the fullscreen mode
- Mod: items pagination view
- Fix: pinch zoom for scene types: ‘sphere’, ‘cube’, ‘flat’, ‘gsv’
- Fix: undefined variable timestamp
- Fix: base css styles
- New: widget – ‘List’
- Fix: marker creation for the flat scene type
- Mod: fullscreen mode for widgets: ‘Civic’, ‘Modern’
- Mod: preview & iframe embed feature out of the box
- Fix: marker mouse pointer still appears after scene is changed
- Fix: markers scrolling for the flat scene type
- Fix: scenes navigation for the civic widget
- New: edit permissions for roles: administrator, editor, author, contributor
- Fix: warnings with framebuffer is incomplete
- New: shapes (planes with texture)
- New: container background styles can be inline or not
- New: shortcode attribute ‘sceneid’
- New: popover feature (inbox or lightbox)
- New: theme – ‘bubbles’
- Fix: update widgets
- Fix: bug with the browser cache, don’t see updates after changes
- New: widget – ‘Civic’
- New: embed & preview is independent of WordPress themes and third-party plugins
- Fix: lost details in the fullscreen mode
- Fix: cubemap scene, front & bottom images issue
- Fix: preview & embed URL generation
- Fix: save & load config to and from a file
- New: interactive preview image builder
- New: absolutely new version, incompatible with the old one
- Fix: transfer userData & title parameters to frontend
- Fix: black screen issue in Chrome with zooming
- Fix: fullscreen toggle
- Fix: compatible with Smart Product Viewer
- Fix: exit full-screen mode in IE
- New: save or not the camera look at vector if you move between scenes
- New: top and bottom pitch limits for each scene
- New: left and right yaw limits for each scene
- Fix: scene images background load
- Fix: fullscreen on iOS
- Fix: bug with a short touch on a link hotspot
- Fix: bug with a sceneId parameter in frontend
- Fix: bug with multiple instances on one page
- Fix: works better with touch events
- Fix: sometimes lost webgl context in FF
- Fix: bug with fullscreen on IE11
- New: global settings
- New: zoom by pinch gestures
- New: the cube scene type can have one single texture or six separated
- Fix: bug with fullscreen on iOS (leave only standard fullscreen API)
- New: top and bottom pitch limits
- New: specifying a custom onload callback javascript code
- New: enable/disable the prevention for default behavior on the mouseWheel event
- Fix: bug with loading a saved config
- Fix: bug with appearing hotspot images in the upper left corner
- Fix: bug with distortion
- Fix: bug with char encoding, problems with item update
- New: image URL can be local relative to the upload folder or full
- New: easy hotspot customization
- New: add loading progress bar for the builder
- Fix: support multiple angular.js versions on the same page
- Fix: warning about array_map() after the item has updated
- New: new dark theme
- New: thumbnails (vertical, horizontal)
- New: thumbnails toggle control
- New: next & Prev scene controls
- New: show a popover when the scene’s loaded
- New: save & load a config from file
- New: default width and height settings
- New: updated the jQuery plugin
- Initial release
- Version 1.8.4
- Last updated 2 months ago
- Active installations 7,000+
- WordPress version 4.6 or higher
- Tested up to 6.5.5
- PHP version 7.0 or higher
English (US) and Portuguese (Brazil) .
Translate into your language
- Tags 360 panorama panorama panorama viewer Virtual Tour
- Advanced View
Contributors
Got something to say? Need help?
View support forum
IMAGES
VIDEO
COMMENTS
Additional features of Pannellum include hot spots for displaying information, linking of multiple panoramas into virtual tours, and video support. 2. Photo Sphere Viewer. Github. Photo Sphere Viewer is a JavaScript library which renders 360° panoramas shots with Photo Sphere, the new camera mode of Android 4.2 Jelly Bean and above.
iPanorama 360° Virtual Tour is a lightweight and rich-feature panorama viewer for the web. This plugin is built with modern libraries jQuery and Three.js to be used for part of backend solutions. Additionally, it has an awesome feature called virtual tour which allowed the user to navigate from one scene to another. Also, it supports hotspots for providing information about any part of the ...
The 360 Virtual Tour is a responsive javascript plugin for displaying 360 degree virtual tours directly in the Browser. Now there is no need to segregate the 6 side of panoramic photo. Using 360 Virtual Tour you can use just One 360×180 panoramic photo for making a virtual tour. 360 Virtual Tour is simple to use.
The tool processes your panoramas on the browser. Both sphere (equirectangular) and cubeface formats are supported. After processing you can export a virtual tour application that can be deployed to any web hosting platform. This application may also be used as a boilerplate for further customization using standard Javascript, HTML and CSS. The ...
Get 23 virtual tour plugins, code & scripts on CodeCanyon such as Simple Virtual Tour, Simple Virtual Tour - Google Street View Plugin, 360 Virtual Tour. ... Responsive jQuery Plugin. by liviu_cerchez in Images And Media Software Version: jQuery; File Types Included: JavaScript JS; HTML; CSS; $25 (51)
The nodes can be provided all at once or asynchronously as the user navigates. In client mode you must provide all the nodes at once, you can also change the nodes with the setNodes method. The Gallery plugin, Map plugin, Plan plugin and Compass plugin plugins can be easily integrated with the virtual tour.
Best Vanilla JavaScript Tour Plugins. Simple Step By Step Site Tour Plugin. Intro.js is a simple and fast js library that makes it easier to create Step By Step website tour guide with keyboard and mouse support. [Demo] [Download] Responsive Guided App Tour In JavaScript - shepherd.
A Javascript Panorama Viewer. Panolens.js is based on Three.JS (a 3D framework) with specific interest area in panorama, virtual reality, and potentially augmented reality. To start using panolens.js, download. More panorama constructors, methods and events detail can be found in. image (2 to 1 ratio e.g. width and height is 1024 x 512) is ...
Virtual Tour is a simple jQuery Panorama Viewer Plugin that allows you to add interactivity without to transform some panoramic views into a virtual tour. Quick Usage: 1. Insert jQuery and js calls into your head section. 2. Include the necessary stylesheets in the document. 3.
Photo Sphere Viewer plugin to create virtual tours by linking multiple panoramas.
About. iPanorama 360° Virtual Tour is a lightweight and rich-feature panorama viewer for the web. This plugin is built with modern libraries jQuery and Three.js to be used for part of backend solutions. Additionally, it has an awesome feature called virtual tour which allowed the user to navigate from one scene to another.
The tour id is simply a unique identifier string. The simplest tour consists of just an id string and an array of one or more steps. This plugin has been created by the guys at LinkedIn. 4. Enjoyhint. Github. A free web-tool that is created to guide users through a site or app in the simplest way.
Free. Easy to use. Opensource. With features of. Multiresolution. Plugins and Modules. Support hotspots, polygons. Free Easy to use Opensource JavaScript Three.js based panorama / virtual tours viewer.
The 360 Virtual Tour is a responsive JavaScript plugin for displaying 360 degree virtual tours directly in the Browser. Now there is no need to segregate the 6 side of panoramic photo. Using 360 Virtual Tour you can use just One 360×180 panoramic photo for making a virtual tour. 360 Virtual Tour is simple to use. All changes you can do on ...
6. Intro.js. Intro.js is a lightweight plugin to create step By step website tour guide. It uses data attributes for navigation and also has support navigation using Keyboard keys. 7. Mytour. Mytour is a jQuery plugin that provides an easy and lightweight way to create an enjoyable virtual tour for your site.
All 43 JavaScript 15 HTML 9 C# 5 TypeScript 4 PHP 2 Blade 1 Java 1 Ruby 1 Vue 1 ShaderLab 1. ... A collective list of 360° Virtual Tour Software for building Virtual Tours online & offline. ... Plugin to add lens flares to a Photo Sphere Viewer (Library: PhotoSphereViewer) by mistic100 ...
Getting Started. Install the Panorom plugin via your WordPress dashboard or upload it manually. Go to Panorom Editor to add your 360-degree equirectangular photos. Customize the tour with hotspots, multimedia elements, and designs. Embed the virtual tour shortcode on your pages or posts and share your immersive experiences with the world!
4. Chardin.js. Inspired by Gmail's new composer tour, Chardin.js is a simple overlay of instructions on existing elements. It uses a JQuery plugin to display instructions. The GitHub page contains the instructions and documentation and has 4.9k GitHub stars.
This scripts helps you to add Virtual 3D Tour to your site. Purchase include the source of Visual Virtual Tour Constructor! It helps to create the Virtual Tour in visual mode in your site admin panel! Features: Maximal Support in Browsers due to WebGL & Canvas Renderers. HTML5 3D-Tour Redactor for Admin Panel. Convenient and Great API.
Get 18 360 virtual tour plugins, code & scripts on CodeCanyon such as 360 Virtual Tour, iPanorama 360° - Virtual Tour Builder for WordPress, FastPano 360 - Virtual Tour Constructor ... Responsive jQuery Plugin. by liviu_cerchez in Images And Media Software Version: jQuery; File Types Included: JavaScript JS; HTML; CSS; $25 (51)
Use multiple 360° panorama images to create a free 360 VR tour of any house or location. Add scenes covering different rooms, corners, or spots. Connect these Panorama Scenes. Use Scene-type Hotspots so all the 360 degree images join together. Show information in the virtual tours using info hotspots and hit publish!
Javascript. Community. Captcha. virtual-tour. 10 plugins. WP VR - 360 Panorama and Virtual Tour Builder For WordPress. ... ⭐ NEW ⭐ Panorom is the most user-friendly 360-degree panorama virtual tour builder plugin. Free. 5.0 (16) WP Google Street View (with 360° virtual tour) & Google maps + Local SEO.
Description. iPanorama 360 is the WordPress plugin out there that lets you create excellent virtual tours for clients from directly inside the WordPress admin in seconds. The plugin supports markers for providing information about any part of the scene or for navigation to other rooms/areas. With a well-builded tooltip system, you can enrich a ...