close panorama

Swipe gallery swipe_gallery.xml
by Leszek Cuper - biuro@ai360.pl

Description

XML plugin offers displaying multiple galleries containing one or more images each. Galleries can be attached to any plugin or hotspot. Viewing images is done using the arrow keys or swipe effect (known from iOS devices).

Download

swipe_gallery.zip  (plugin and example)

Syntax / XML Usage Example

<include url="plugins/swipe_gallery.xml" />

<!-- gallery container -->
		
<layer name="gallery" type="container" align="center" width="100%" height="100%" alpha="0" autoalpha="true" bgcolor="0x000000" bgalpha="0.8" keep="true">
	<layer name="gallery_scrollarea" url="%SWFPATH%/plugins/scrollarea.swf" alturl="%SWFPATH%/plugins/scrollarea.js" keep="true" align="left" width="0" height="100%" zorder="1" direction="h" ondown="set(gallery_scrollarea_start_pos, get(x))">
	</layer>
	<layer name="arrow_left"  align="left"  x="10" keep="true" visible="false" zorder="2" onclick="move_image(left)" url="img/arrow_left.png"  />
	<layer name="arrow_right" align="right" x="10" keep="true" visible="false" zorder="2" onclick="move_image(right)" url="img/arrow_right.png" />
	<layer name="gallery_close" align="righttop" x="10" y="10" keep="true" zorder="2" onclick="hide_gallery()" url="img/close.png" />
</layer>

<!-- galleries data -->

<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" />
</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="Canal" />
	<img name="img4" url="img/pic9.jpg" title="Aquarium" />
	<img name="img5" url="img/pic10.jpg" title="Aquarium" />
	<img name="img6" url="img/pic11.jpg" title="Aquarium" />
</gallery>

How to show gallery

Any gallery can be shown by calling action show_gallery(gallery_name). In order to simplify making hotspots/layers based on styles we recommend adding additional attribute to hotspot/layer with the name of gallery that we would like to show.

<hotspot name="hs1" 
         style="hs_gallery" 
         ath="0" atv="0" 
         galleryname="gallery1" 
         />
         
<style   name="hs_gallery"
         url="img/hs_gallery.png"
         onclick="show_gallery(get(galleryname))"
         onhover="showtext(get(gallery[get(galleryname)].title))"
         />

<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" />
</gallery>

Changing mobile device's orientation

Swipe gallery can be properly displayed on mobile devices even after changing its orientation, however it's necessary to recalculate position of its elements (we recommend use onresize event).

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

Example

CLICK TO VIEW EXAMPLE