peachananr / panorama_viewer Goto Github PK

Embed panorama photos on your website with Panorama Viewer

Home Page: http://peachananr.github.io/panorama_viewer/demo/demo.html

License: GNU General Public License v2.0

JavaScript 100.00%

panorama_viewer's Introduction

#Panorama Viewer by Pete R. Embed interactive Panorama Pictures on your site with this simple plugin. Created by Pete R., Founder of Travelistly and BucketListly

Demo

View demo

Compatibility

Modern browsers such as Chrome, Firefox, and Safari on both desktop and smartphones have been tested. I have not tested this on IE.

Basic Usage

You can now display your panorama photos on your site with this plugin. To do this, first you have to include the latest jQuery library together with jquery.panorama_viewer.js and panorama_viewer.css into your document's <head>. Now all you have to do this add your image to your HTML like this:

<div class="panorama">
 <img src="your-panorama.jpg">
 ...
</div>

Make sure to change the source of the image to your image and call the function as shown below:

  $(".panorama").panorama_viewer({
    repeat: false,              // The image will repeat when the user scroll reach the bounding box. The default value is false.
    direction: "horizontal",    // Let you define the direction of the scroll. Acceptable values are "horizontal" and "vertical". The default value is horizontal
    animationTime: 700,         // This allows you to set the easing time when the image is being dragged. Set this to 0 to make it instant. The default value is 700.
    easing: "ease-out",         // You can define the easing options here. This option accepts CSS easing options. Available options are "ease", "linear", "ease-in", "ease-out", "ease-in-out", and "cubic-bezier(...))". The default value is "ease-out".
    overlay: true               // Toggle this to false to hide the initial instruction overlay
  });

Now you will be able to display your panoramic photos without having to rely on the global width of the website. I hope you will find this useful. Stay tuned for more updates.

If you want to see more of my plugins, visit The Pete Design, or follow me on Twitter and Github.

Other Resources

Tutorial

panorama_viewer's People

Contributors

Stargazers

Watchers

Forkers

owtp ferlyz05 gabrielcury vcichecka toddsantoro halkibsi arjunmenon enotnys brenothales savantos lorddarq visense radum vhagerty ninetimes13 manolenso johnsonlrd lyhiving netconstructor drjova grafflinz awesome wenkuang cyberwani agiza preealpha nxtbz gazhay ohax willyciaps ashrafabulsoud artyom4d godemo reb00ter kevinrodbe bingo1992 marcatyron colorwalf nullnotfound miklobit skrosoft roachhd adswebwork thejoepeach danidebabahi willyci rockerflower pjb109 cesardanielhg isc-labs rockzeng xgl272268065 ircoco ygx2011 balmat haifengpeng nanymor arcsecw zartata ieatdriod tkining gaybro8777 sinabio datalink747 asd1355215911 jquerycollection pkitw ngari zamelsky lcp0578 chrisemoulton esauromano pacebale venk007 feedlike shakti0786 alfa87 ducminhn tttuugii bhagwansinghcct rottengum shortyl lyushine suprabhasupi heathernfran gunshotpanda gptalgopro xuegoo easaw christopheraz kerwinma tseng256 sshyran radoslavmiladinov newsnode zyjiang0571 zhanghw0917 yoshi386kotaro twzd social-lantern-media

panorama_viewer's Issues

Conflict with Google Maps API

The plugin doesn't work if it's included with the following script:
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"> </script>

autostart panorama

Hello ,

I want to create a simple HTML page . In this HTML page , a 360 degree panorama to be embedded . After the page load is an autorotation start . How can I realize this autostart ?
How can I influence the speed ?

Sincerely yours

Stephan

It doesn't work on the second refresh

Hi,

Can you please look at this link http://020018.businesscatalyst.com/index.html
Panorama works if I clear the cache. but the second refresh stops it.

Thanks

Images with large height will surpass screen height

I just tried this beautiful plugin, but have a feature request / proposal.

Currently the div will get the tag style height in pixel of the original image. This is very unflexible and not usable on smaller devices or screens.

i.e. my image is a panorama with 1204 px height. after calling panorama_viewer, the surrounding div will have a very long style attribute value with height: 1204px; supersedeing every css styling from an external css file.

I'd like to propose an optional, more responsive sizing, maybe a max-height of 100% of the screen, but keeping the aspect ratio.

Not working when function called before </body>

As in the title. The plugin doesn't work when it's called anywhere else than inside <head> tag. My website includes all JS files separately, right before the closing </body> tag, therefore i can't use panorama viewer plugin effectively.

Is there a way to center the image?

Is there a way to center the image in the container, currently it's left aligned and the client would like it to be centered. Is there a way to do this?

I have problem with "Uncaught TypeError: Cannot read property 'fn' of undefined"

**$.fn.**panorama_viewer = function(options){

document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);

.......
Drupal 8, using clear node with init script, div, img. Downloaded from github

Autoscroll and responsive behaviour missing

As I missed autoscrolling and responsive behaviour I added these features for me:
http://ulrichbangert.de/div/webdesign/javascript/panorama/demo.html
Should be revised by the author as I didn't completely understand the code.

Doesn't move in Windows RT 8.1

Panorama_viewer loads fine but when you try to interact with the image, it doesn't do anything. This was tested on an original Surface RT running Windows RT 8.1.

Sometimes .js didn't trigger

tried 20 times, 6 out of 20 might get the js initialized and triggered proeprly, but majority time the script can't be triggered, can you help please

Viewer ignores "repeat: false"

Even with following configuration:

var defaults = {
    repeat: false,
    direction: "horizontal",
		animationTime: 700,
		easing: "ease-out",
		overlay: true
   };

Panorama is always 360. Apparently viewer is ignoring "repeat:" value and always makes image 360, regardless the value.

Are there any known workarounds to get this to work?