122 comments found.
Do you have an example of the carouFredSel integration?
Yes, there is an example in the purchased file – but no live preview for it.
Is there any possibility of adding field of view and supporting more than just flat panoramas? There is a great example here using webgl – http://mrdoob.github.com/three.js/examples/webgl_panorama_equirectangular.html
The script does not use canvas to render the panorama – canvas with webgl is a new feature added and supported only by the latest browsers. It’s not yet a reliable solution.
Hi Liviu,
Awesome job!
BTW, Is it possible to use the accelerometer to scroll the panorama view? If so, could you please give me a demo, thanks 
Kai
Hi, thank you so much. The plugin supports only touch events on small devices – no accelerometer support yet.
Thanks for reply.
I just want to use the accelerometer to drive the viewer to scroll, can you help ?
Sorry, there is no accelerometer support for the plugin. I’ll think about it for a future version.
OK, I was just trying to use accelerometer ( Gyroscope actually ) to scroll the panorama by this post http://www.lakercompendium.com/how-to-use/advanced-techniques/using-the-accelerometer/ , however it seems to be hard …
Thanks anyway!
Kai
I have panoramics loaded from a folder. Have no idea what the height and width is of each. Can you add something to automatically adjust width, height on each panoramic image? I am loading them from a folder dynamically. Just seems that the script should handle this.
Very frustrating, have yet to get this fixed.
Hi, the plugin needs to know the exact fixed size of the image before it loads it – so you must use an additional PHP/ASP script to obtain their dimensions (just google this – should be very easy). This is a plugin requirement, you must follow this rule.
Hi, there is an issue with the 180-degree option in iOS. I’ve tested on iPad 2 and all that displays is a grey box. Do you have an idea what would be causing this issue, or do you have a fix for this problem?
Hi, can you send me a preview URL for debugging the issue? Thank you.
Sorry also a second problem if it is possible?
can you call a position eg a button outside the slider to go to a section of the slider eg the coordinates?
Hi, there is no public API function to manipulate the position of the panorama. This can be added in a future version, but it’s not possible right now.
Again it’s fine I should be able to call the function on the page and i’ll post it up i was hoping you would give me a hand but i guess this is not like open source stuff.
I’ve used the
sliding_direction: 0.5but am looking to stop this when they click on the <area> hotspots.
I’m not a coder but i would imagine is it something like
settings.sliding_direction = 0;
But not sure where it is to go in your .js file can you help me please?
Hi, there is no sliding_direction: 0.5 – it’s either -1, 0 or 1. Currently there is no public API function to stop the sliding, but I can help you out with a custom developed version of the script. Get in touch with me via my profile contact form and we’ll talk details. Thank you.
that’s ok i’ll figure it out I’m not looking to pay for it a custom script but i will post the code up here when i get a chance this weekend
Hi
I got the jquery reel for joomla, but want to buy this newer version, can I intgrate it in joomla 2.5?
Sure, you can integrate it in any HTML based project.
okay, I bought it. how do I get the image loader in to my jquery reel in joomla 2.5?
Please follow the instructions in the documentation, you must add the script, panorama markup and initialize the 360° view. Drop me a message in my profile’s contact form for more details.
Hi,
Good job! But It would be great if there was possibility of zooming…
Hi, thank you for the support.
Yes, some other users have requested this feature. It’s not currently possible with the current version. Regards!
Does this software create the panoramic view or just display them?
Hi, the plugin only displays 360° panoramas.
Thought I would share this with @liviu_cerchez
This is fully working and now db driven, and works flawlessly. Hope you like:
This is to show other users a particular use of the panorama, in a dynamic setting.
Regards Ste
Looks great, I’m glad you found it useful.
Hi,
Can I make the panoramic image auto scroll when I move my mouse to the left/right side of the image?
Thanks.
Hi. The scrolling works based on mouse drag, mousewheel or touch swipes. There is no option to auto scroll based on mouse position only.
Why are the prev an next unicode characters different sizes.
I use:
& # 9666 and & # 9656
and like your demo they are of different proportions.
Hi, good point – you can use those characters if you like. In the next version I’ll add graphics to maintain the same style throughout all web browsers.
Thanks, i ditched unicode in the end and used glyph icons a la Bootstrap.
I am trying to configure your pano as in your example/demo here on codecanyon i.e. with the bottons left right stop …. That was not included in the demo files and it is frustrating….
What should I do to get it to look and work like that… have saved your demo here a number of time and tried to work from there replacing with correct files but still it don’t work….
Secondly the pano picture you use seem to be at 150ppi and 72ppi which is the screen resolution – if I replace the picture with a screen res one I get problems with visual mismatch when 360 completes… what can I do?
$('.panorama-view').panorama360({sliding_controls: true});
Do you have a preview URL for me to see the panorama live? I will do my best to help out.
I am trying to add the fancybox integration, but I’d like to use JackBox (http://codecanyon.net/item/jackbox-responsive-lightbox/3078222) instead of fancybox as it has a more advanced caption/description feature.
I can get this jackbox lightbox working fine with regular hotspots by adding the jackbox class, data-group, and href attributes to the area tag, but it doesn’t seem to work with the hotspots in the panorama. When I click the lightbox hotspot, nothing happens.
Here’s the code I’m using:
<div id="panorama" class="fade showsecond">
<div class="preloader" />
<div class="panorama-view">
<div class="panorama-container">
<img src="images/photo.jpg" data-width="2089" data-height="221" usemap="Map" alt="Panorama" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="-10,0,184,227" class="jackbox" data-group="images" href="#description_1"/>
<area shape="rect" coords="183,-11,482,223" class="jackbox" data-group="images" href="#description_2" />
<area shape="rect" coords="482,-2,800,237" class="jackbox" data-group="images" href="#description_3" />
<area shape="rect" coords="801,-1,1118,224" class="jackbox" data-group="images" href="#description_4" />
<area shape="rect" coords="1116,-8,1429,234" class="jackbox" data-group="images" href="#description_5" />
<area shape="rect" coords="1426,-6,1678,223" class="jackbox" data-group="images" href="#description_6" />
<area shape="rect" coords="1677,-10,1967,227" class="jackbox" data-group="images" href="#description_7" />
</map>
</div>
</div>
</div><a class="jackbox" data-group="images-gym" data-description="#description_1" href="image1.jpg">Hotspot Area 1</a>
<ul class="jackbox-hidden-items">
<li class="jackbox" data-group="images-gym" data-description="#description_1" data-href="image2.jpg" />
<li class="jackbox" data-group="images-gym" data-description="#description_1" data-href="image3.jpg" />
</ul>
<a class="jackbox" data-group="images-library" data-description="#description_2" href="image4.jpg">Hotspot Area 2</a>
<ul class="jackbox-hidden-items">
<li class="jackbox" data-group="images-library" data-description="#description_2" data-href="image5.jpg" />
<li class="jackbox" data-group="images-library" data-description="#description_2" data-href="image6.jpg" />
</ul>
<a class="jackbox" data-group="images-foyer" data-description="#description_3" href="image7.jpg">Hotspot Area 2</a>
<ul class="jackbox-hidden-items">
<li class="jackbox" data-group="images-foyer" data-description="#description_3" data-href="image8.jpg" />
<li class="jackbox" data-group="images-foyer" data-description="#description_3" data-href="image9.jpg" />
</ul>
<div class="jackbox-description" id="description_1">Description Text Here</div>
<div class="jackbox-description" id="description_2">Description Text Here</div>
<div class="jackbox-description" id="description_3">Description Text Here</div>
Just before the end of my body tag I’m using:
<!-- Jackbox Lightbox -->
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".jackbox[data-group]").jackBox("init", {
deepLinking: false,
preloadGraphics: true,
useThumbs: false
});
});
</script>
<!-- 360 Panorama -->
<script>
$(function(){
$('.panorama-view').panorama360({
sliding_direction: 1,
sliding_controls: false,
sliding_interval: 40,
use_preloader: true,
sliding_controls: false,
});
});
</script>
I read in your documentation that I need to add this script, but I’m not sure how to adjust it for jackbox, or if that’s even the solution to this problem?
$('.panorama .hotspot').fancybox({
maxWidth : 800,
maxHeight : 600,
padding : 0,
fitToView : true,
width : '90%',
height : '90%',
autoSize : false,
closeClick : false
});
Would you be able to help at all?? Any insight would be really appreciated.
(Sorry about the code sections above, it wasn’t picking up the pre tags correctly)
Hi, sorry but I can’t really offer support for an external plugin that I don’t know of. Panorama360 generates links from the list of <area> elements and copies the class name, href, title. Use FireBug or a similar tool to see the final output markup and get in touch with jackbox’s author to see if he can help out.
Another tip would be to initialize jackbox script after panorama360.
Alright, I’ll give it a go.. Thanks anyway! Also, do you know if fancybox is the ONLY lightbox that works with the panorama? Others should be able to work too, but fancybox is just one you recommend, yes?
I used fancybox as an example and recommend you to use the one you like. It may need some tweaking, but it will work with almost every lightbox solution out there.
Would it also be possible to create custom prev/next buttons that move the panorama image forward 300px, or backwards 300px? Thanks! Great Plugin
Not currently, the next and prev buttons control only the direction of the auto scroll. I’ll put this feature request on my todo list.
Is there a way I can be informed when this feature is added in the future? Do you know roughly how long it might take for it to be added? (Just so I can let my client know). Thanks for all your help!
I have hotspots covering most of my panorama. When I view it on a phone, I can touch and drag to scroll the panorama, as well as click the hotspots to open the links. This is how I want it to work
On a desktop computer, I can’t seem to click and drag because of the hotspot areas. Is there a way to ignore the hotspots when dragging, and only open them on click? (So that it works the same way it does on a phone?) Thanks!
Hi, I see what you mean and will look for a solution for this. Meanwhile on desktop you can drag the parts of the panorama that don’t contain any hotspots.
Thanks, I really appreciate it. Looking forward to your reply!
@liviu_cerchez
This looks nice, but I am absolute NOOB at panoramas etc. I also do not own Iphone, however I know people create panoramas using their iphone. Do you know if this viewer can accept panorama created on say iphones etc.
Regards Ste
Thank you, the panoramas must be full 360 degree in order for the viewer to make them look good. iPhones may create such images (with an installed app) and the viewer supports them.
The image have a good quality I think , because on the desktop resolutions it renders good, but on the ipad is poor. I’ve tested your demo and I have the same issue, the image quality is very bad.
Please send me a preview link if you have one. I’ll look into it.
www.ibizapartypeople.com/panorama
Alright, thank you. The source image quality is very poor. If you create a better image, (height bigger then 1000px) then your panorama will look better.
Hi! Nice plugin! I have a problem, I’m testing it on the latest ipad and the image has very bad quality. How can I fix this? Here is a link Thanks!
Hi, please set a high quality panoramic image as a source file. iPad has the retina display feature and a clear image helps.
Quick question.. Can I adjust the speed of the viewer when it’s in autoplay?
Thanks in advance!
Yes, set the sliding_interval option to adjust the speed.
