Swipe events on 2d layer

https://krpano.com/plugins/scrollarea/#top

But scrollarea does not swipe, it scrolls... Can be an easy workaround and can do the job but it s not the same.

I have in my todo list, a swipe effect directly in krpano, no external libraries.

You can check it's position ondown versus onup and then move it if the difference is great enough, check if positive or negative to swipe in the right direction, if it's not large enough, tween back to initial position.

I need something like this too, but I have too much on my plate to code this up. I can donate to whomever does a good swipe that works exactly like the photos app on IOS devices.

Sometime ago Tuur made 2 examples of flat galleries:

https://krpano.com/forum/wbb/inde…0691&highlight=

one of them uses slide effect.

BTW, good idea Sacha. I'll try to do it in my free time

OK, my first attempt:

http://www.ai360.pl/projekty/swipe/

This is an example using Sacha's idea.

Should work on mobiles, tablets and PC. On PC you can launch context menu and switch between two galleries. Switching orientation on mobile should recalculate gallery and display it properly (however it starts with the first image). Galleries can be stored in data containers like this:

<gallery name="gallery1" title="Title of gallery 1">
		<img name="img1" url="img/pic1.jpg" title="Escalator" />
		<img name="img2" url="img/pic2.jpg" title="Mask" />
		<img name="img3" url="img/pic3.jpg" title="Wallpaper" />
		<img name="img4" url="img/pic4.jpg" title="F/A-18 C Hornet" />
		<img name="img5" url="img/pic5.jpg" title="Forest" />
		<img name="img6" url="img/pic1.jpg" title="Escalator" />
		<img name="img7" url="img/pic2.jpg" title="Mask" />
		<img name="img8" url="img/pic3.jpg" title="Wallpaper" />
		<img name="img9" url="img/pic4.jpg" title="F/A-18 C Hornet" />
	</gallery>
	
	<gallery name="gallery2" title="Some other pictures">
		<img name="img6" url="img/pic6.jpg" title="A dog" />
		<img name="img7" url="img/pic7.jpg" title="My cat" />
		<img name="img8" url="img/pic8.jpg" title="Watching movie" />
		<img name="img10" url="img/pic10.jpg" title="St. Jacob's church in Skierniewice" />
	</gallery>

There's no title, image counter, pic's title and many other things. But can be tomorrow. What I'm going to do:

- scalable pics (they should fit the screen size if there are bigger)
- remembering pic's position while change of orientation
- text infos (gallery info, pic info, pic counter)
- etc...

Would you like to hmmm... donate this... 'plugin'' (not sure if it is plugin - just a piece of code)?

Any bugs and suggestions appreciated (I'm not able to test it on all devices).

Nice one Panomaster,

seems to work more stable (better) then my old version.
Will you share base code?

(btw.. are you on mac?)

Cheers!
Tuur

Yes, I'm going to share the code as far as I finished. I've noticed on iPhone sweep is done only after moving picture by a certain (minimum) distance (at least 50px?). If not, picture gets back to the previous position. This is another thing I have to fix.

No - I'm on PC and WIN7

Looks good for a first attempt,

my suggestions :

-What I would do is not to generate all the layers at the same time, just 3 layers and then dynamically adding and removing, that way you can have unlimited number of images, without memory issues...

- I would do it without scrollarea, just dragging the layers

works very good on android mobile !

Ok. I've uploaed an update and not encrypted xml.

How to use?

There are just two layers:

<layer name="gallery" type="container" align="center" width="100%" height="100%" bgcolor="0x336699" bgalpha="0.5" >
		<layer name="gallery_scrollarea" url="%SWFPATH%/plugins/scrollarea.swf" alturl="%SWFPATH%/plugins/scrollarea.js" align="left" width="0" height="100%" zorder="1" direction="h" ondown="set(gallery_scrollarea_start_pos, get(x))" onloaded="setcenter(0,0); make_gallery(gallery1);">
		</layer>
	</layer>

Of course you can add close button and set alpha to 0 or visible to false. Then create gallery and to make it visible.

Data section:

<gallery name="gallery1" title="Title of gallery 1">
		<img name="img1" url="img/pic1.jpg" title="Escalator" />
		<img name="img2" url="img/pic2.jpg" title="Mask" />
		<img name="img3" url="img/pic3.jpg" title="Wallpaper" />
		<img name="img4" url="img/pic4.jpg" title="F/A-18 C Hornet" />
		<img name="img5" url="img/pic5.jpg" title="Forest" />
		<img name="img6" url="img/pic1.jpg" title="Escalator" />
		<img name="img7" url="img/pic2.jpg" title="Mask" />
		<img name="img8" url="img/pic3.jpg" title="Wallpaper" />
		<img name="img9" url="img/pic4.jpg" title="F/A-18 C Hornet" />
	</gallery>
	
	<gallery name="gallery2" title="Some other pictures">
		<img name="img1" url="img/pic6.jpg" title="A dog" />
		<img name="img2" url="img/pic7.jpg" title="My cat" />
		<img name="img3" url="img/pic8.jpg" title="Watching movie" />
		<img name="img4" url="img/pic9.jpg" title="My wife" />
		<img name="img5" url="img/pic10.jpg" title="St. Jacob's church in Skierniewice" />
	</gallery>

You can use as many galleries as you want.

Creating gallery:

Just call the action with parameter (name of gallery) eg:

make_gallery(gallery1);

If you want to show another gallery just call it again with new gallery name:

make_gallery(gallery2);

All existing pictures in previous gallery will be remove and then new pictures will be created. The name of actual gallery is stored in 'activeGallery' variable.

We also recommend use onresize event to recalculate gallery while changing phone orientation.

<events onresize="make_gallery(get(activeGallery));" />

Link to xml file: http://www.ai360.pl/projekty/swipe/index.xml

Feel free to use it in commercial projects. Donations are greatly appreciated (Paypal account: biuro@ai360.pl).

wow! great work.

Just needs a manual hook for move_image to go left or right, so on desktop you can have the action via buttons in addition to swipe.

I guess the nicest way is to break apart move_image into two more sub functions.

Hi Panomaster,
his gallery looks great, but can not find how to execute it in a pano by clicking on a hotspot.
I included the .xml, but failed doing the exact code to run and then close it. Could you tell me how?
Thanks, Ramiro

Nice to hear that, especially from you Sacha.

Another update - arrows added.

There's no device detection (you can add it on your own) but in make_gallery action you can configure whether arrows have to be visible or not.

I also added complex example how to use gallery in tours. You can watch it at http://www.ai360.pl/projekty/swipe/example.html

Since now Swipe Gallery became a plugin.

https://krpano.com/plugins/userplugins/swipegallery/#top

Great plugin Panomaster.
Thank you.

Wilsan

This plugin gives surely another dimension to the Panoramas. But as in common lightbox galleries out there on the net would it be possible to add a text description field that would appear on the bottom to label each photos? Please take this as a suggestion in your future coding.

Thank you for a good plugin!

Ukrajinec: What do you exactly mean saying "Why your plugin work only in your example?"

Igor: It's good idea. I even added description attributes to data section. I'll do it in my free time.