Image Zoom In / Out

Q&A about the latest versions
Ink8455
Posts: 47
Joined: Tue Nov 29, 2016 10:34 am

Tue Jun 12, 2018 7:50 am

My pano allows the user to view 360, with a limited zoom in/out function.
I have numerous still images scattered around each Pano. Each image has an associated text box and a preview thumbnail.
Once selected, the image enlarges and fills the screen.
The still images are static, fixed size on the screen.
I would like to allow the user to be able to zoom in and out of a selected image.


My question is, is it possible to zoom in and out of the selected image once filling the screen?
I accept that there may be limitations on the size and quality of the original still image but the function would help alot.


Many thanks
Last edited by Ink8455 on Wed Jun 13, 2018 6:08 am, edited 1 time in total.
User avatar
Tony
Posts: 999
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Tue Jun 12, 2018 3:44 pm

Hi,

It's possible, here's a quick example of a small popup window but it would certainly work with a fullscreen image. There are a couple of issue with it that I have to work out.

https://s3-ap-southeast-2.amazonaws.com ... index.html

I'm a bit flat out for the coming day but I'll put something together you can use asap.

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
Ink8455
Posts: 47
Joined: Tue Nov 29, 2016 10:34 am

Wed Jun 13, 2018 2:21 am

Perfect!!!!!!

That's exactly what I was trying to acheive.
User avatar
Tony
Posts: 999
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Wed Jun 13, 2018 7:29 am

Hi Ink,

I've just updated the sample project with a fullscreen responsive version. Same URL

https://s3-ap-southeast-2.amazonaws.com ... index.html

The image size is 2,500px x 1568 px

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
Ink8455
Posts: 47
Joined: Tue Nov 29, 2016 10:34 am

Wed Jun 13, 2018 7:38 am

Perfect, THANK YOU!!!!!


How is it done?
User avatar
Tony
Posts: 999
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Wed Jun 13, 2018 7:49 am

Hi,

I will write up a tutorial on how to do it and post it on my website. I'll post here when it's up.

https://tonyredhead.com/tipsandtutorials

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
User avatar
soulbrother
Posts: 433
Joined: Tue Apr 08, 2008 7:01 pm
Location: München
Contact:

Wed Jun 13, 2018 2:26 pm

Tony,

this really looks like the work of a genius, so it´s hard to wait for your tutorial.

This time I will say big THANKS, before I will see your tutorial!
User avatar
Tony
Posts: 999
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Wed Jun 13, 2018 2:30 pm

Hi Soulbrother,

:D Actually it's pretty simple to implement only takes a minute or two.

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
User avatar
Tony
Posts: 999
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Mon Jul 02, 2018 2:13 pm

Hi,

Quick update to let you know that I've created and published the tutorial on how to implement the zoom/pan fullscreen image.

https://tonyredhead.com/pano2vr/hotspot ... reen-image

This tutorial show you how to create a point hotspot and integrate a third party image viewer application that opens an image that fills the current screen. Once the image has opened the user can then zoom in and out of the image and pan around it using a mouse or by touch on a mobile device.

There is a downloadable zip file with all of the files needed to complete the tutorial.

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
Ink8455
Posts: 47
Joined: Tue Nov 29, 2016 10:34 am

Mon Jul 02, 2018 3:32 pm

Many thanks
User avatar
Tony
Posts: 999
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Tue Jul 03, 2018 4:43 am

Hi,

A comment by Jaroslav Pindora in the Pano2VR User Group on Facebook https://www.facebook.com/groups/Pano2VR ... 216434516/, to my post re the tutorial, made me take another look at how his all Pano2VR solution could be implemented.

I've created a new output and personally I think it works as well, if not better, than the JQuery solution and at no cost.

Here's the new output, I'll be posting a new tutorial shortly.

https://s3-ap-southeast-2.amazonaws.com ... index.html

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
Ink8455
Posts: 47
Joined: Tue Nov 29, 2016 10:34 am

Fri Jul 13, 2018 8:37 am

Perfect
User avatar
Tony
Posts: 999
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Fri Jul 13, 2018 1:07 pm

Ink8455 wrote:
Fri Jul 13, 2018 8:37 am
Perfect
:D
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: http://tonyredhead.com - http://redsquare.com | roundme: http://round.me/@tonyredhead | instagram: https://www.instagram.com/tonyredhead/
User avatar
KRitchie
Posts: 46
Joined: Tue Apr 21, 2020 10:59 am
Location: Philadelphia, PA

Thu Aug 13, 2020 6:10 pm

Hi Tony, did you ever post a tutorial on the non-jquery image popup with zoom? I did your a tutorial using jquery, and the one thing I can't figure out is how to use this if you have multiple images and hotspots. If I have 4 hotspots, each with their own image - I couldn't figure out how you would call these images from the fullsize.html

- Kevin
User avatar
SimonG
Posts: 1
Joined: Sat Feb 22, 2020 11:39 am

Fri Aug 14, 2020 7:52 pm

Hi everyone !
After watching the last Webinar (again with the brilliant explanation of Martin Hopkins and the support of the Garden Gnome Software Team), I regret my absence at the webinar because I have one question, the same as this topic !
I want to zoom in / out in an popup-image, so I can see details of the picture I integrate.
I read the topic, and the well builded tutorial of Tony Redhead. The result I want is exactly the one he builded.
But because I read that one person loose the functionality of the tour nodes, I want to study the subject more before buying a not working add-on (jquery things).

This topic is 2 years old, is there any update in Pano2VR allowing to do so?

Thanks a lot for your feedback !

Simon.G.
Post Reply