<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>
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>
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));" >