So I needed to use Flash to trigger some image viewing capabilities in GreyBox but found surprisingly little information on how to do it. After piecing several bits of knowledge together, I got it working to my liking. Here it is for anyone else who searches for it (including me.)
Install GreyBox as you normally would. You can download the package and installation / usage instructions from the fine folks at Orangoo: http://orangoo.com/labs/GreyBox/.
In your HTML, define an image set array for GreyBox to use and a function to call GreyBox and show a specified image:
<script type=”text/javascript”>
var image_set = [
{'caption': 'Image Number One', 'url': 'http://www.yourdomain.com/images/img_lg_01.jpg'},
{'caption': 'Image Number Two', 'url': 'http://www.yourdomain.com/images/img_lg_02.jpg'},
{'caption': 'Image Number Three', 'url': 'http://www.yourdomain.com/images/img_lg_03.jpg'},
{'caption': 'Image Number Four', 'url': 'http://www.yourdomain.com/images/img_lg_04.jpg'},
{'caption': 'Image Number Five', 'url': 'http://www.yourdomain.com/images/img_lg_05.jpg'},
{'caption': 'Image Number Six', 'url': 'http://www.yourdomain.com/images/img_lg_06.jpg'},
];
function doGreyBox(img_num) {
GB_showImageSet(image_set, img_num);
}
</script>
Now create a flash file. To make this example easy, place a standard button on the stage and put the code below on it (modify the following to call the image of your choosing from the image array you defined above.)
on (release) {
getURL(“javascript: doGreyBox(3)”); // This will trigger Image Number Three
}
Now add the flash to your HTML document and set wmode=transparent to ensure that flash will not remain on top of any GreyBox windows.
That’s it – not difficult, just Adobe Flash and GreyBox are not commonly used together for images. Feel free to modify the example above to get your job done. Questions or concerns – just leave a comment and I’ll do my best to help you out.
