This plugin is completely free for use in any context or connection.
picshow2.swf
A plugin for showing an image in a scalable box. Zooming and panning is supported, and can be
controlled either by mouse or by VRSmarty commands.
Image box size can be set in pixels or as a percentage of pano width/height.
The following parameters are supported:
In VRSmarty xml file:| image | image="img/pic2.jpg" | image file |
| imageWidth | imageWidth="35%" | width of image box |
| or | ||
| imageHeight | imageHeight="400" | height of image box |
| borderColor | borderColor="#FFFFFF" | border color |
| borderWidth | borderWidth="2" | border width, default:no border |
Plugin attributes:set with spot_id.content.name=value
| image | image='img/pic2.jpg' | load new image |
| imageWidth | imageWidth='35%' | new image box width |
| imageHeight | imageHeight=400 | new image box height |
Plugin methods: call with spot_id.content.name(value)
| zoomIn() | zoomIn() | start zooming in |
| zoomOut() | zoomOut() | start zooming out |
| panLeft() | panLeft() | start panning left |
| panRight() | panRight() | start panning right |
| panUp() | panUp() | start panning up |
| panDown() | panDown() | start panning down |
| stop() | stop() | stop zooming or panning |
| reset() | reset() | reset image to initial state |
NOTES:
Specify either "imageWidth" or "imageHeight". The plugin will scale the image to fit the given width or height. When a percentage value is given, the plugin will calculate the size initially and whenever the pano is being resized.
External zoom controls can be ordinary hotspots with the onDown and onUp events set.
Example VRSmarty xml file:
<!-- ***** picshow2 ***** --> <spot id="pictureL" url="picshow2.swf" type="static" layerType="pano" staticAlign="TL" align="TL" staticX="80" staticY="15" display="shdw1" mouseChildren="true" buttonMode="true" blockMouse="true" onOver="pano.enableWheel=false" onOut="pano.enableWheel=true" /> <pictureL image="images/pic1.jpg" imageWidth="35%" borderColor="#000000" borderWidth="2" /> <!-- arrows --> <spot id="pLeft" url="/panos/images/com/blue_l.png" type="static" staticAlign="BL" align="BL" staticX="40" staticY="45" scaleX="0.7" scaleY="0.7" onDown="pictureL.content.panLeft()" onUp="pictureL.content.stop()" /> <spot id="pDown" url="/panos/images/com/blue_d.png" type="static" staticAlign="BL" align="BL" staticX="70" staticY="25" scaleX="0.7" scaleY="0.7" onDown="pictureL.content.panDown()" onUp="pictureL.content.stop()" /> <spot id="pUp" url="/panos/images/com/blue_u.png" type="static" staticAlign="BL" align="BL" staticX="70" staticY="65" scaleX="0.7" scaleY="0.7" onDown="pictureL.content.panUp()" onUp="pictureL.content.stop()" /> <spot id="pRight" url="/panos/images/com/blue_r.png" type="static" staticAlign="BL" align="BL" staticX="100" staticY="45" scaleX="0.7" scaleY="0.7" onDown="pictureL.content.panRight()" onUp="pictureL.content.stop()" /> <spot id="zIn" url="/panos/images/com/blue_p.png" type="static" staticAlign="BL" align="BL" staticX="140" staticY="80" scaleX="0.7" scaleY="0.7" onDown="pictureL.content.zoomIn()" onUp="pictureL.content.stop()" /> <spot id="zOut" url="/panos/images/com/blue_m.png" type="static" staticAlign="BL" align="BL" staticX="140" staticY="45" scaleX="0.7" scaleY="0.7" onDown="pictureL.content.zoomOut()" onUp="pictureL.content.stop()" /> <spot id="zReset" url="/panos/images/com/blue_a.png" type="static" staticAlign="BL" align="BL" staticX="140" staticY="10" scaleX="0.7" scaleY="0.7" onDown="pictureL.content.reset()" />
Version history: