While, normally I dislike popups, they are definitely an occasional necessary evil. This little utility class can make them much easier to create. Simply pass it the path of an image file (i.e. a .jpg) and it will open up a popup window containing that image and automatically resize itself to fit the picture. Only the path to picture is required, but you can also include a title to display in the popup window as well as specify the usual features of a popup (scrollbars, resizable, status, etc.).
So far I’ve only tested in IE and Firefox on Windows XP, so if someone tries it on another browser/system, let me know if it works. Admittedly, I’m not that javascript savvy.
The util class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
/** * Use to create a popup an image file that automatically resizes to fit its content. * Works ONLY with image files. * * usage: * * OBO_Popup.pop("path/image.jpg", ["Window Title", "yes", "yes", "yes", "yes", "yes", "yes"]); * * Only the path to image is required - all other arguments are optional. If not supplied, * the default window title is "Image". * * @author Devon O. */ package com.onebyonedesign.extras { import flash.external.ExternalInterface; public class OBO_Popup { public static function pop(url:String, title:String = "Image", resizable:String = "no", toolbar:String = "no", menubar:String = "no", status:String = "no", directories:String = "no", location:String = "no"):void { if (ExternalInterface.available) { // does browser use layers or divs? var hasLayers:Boolean = ExternalInterface.call('document.layers'); // open popup ExternalInterface.call('imgWin=window.open', '', '', 'scrollbars=no, resizable=' + resizable + ', toolbar=' + toolbar + ', menubar=' + menubar + ', status=' + status + ', directories=' + directories + ', location=' + location + 'scrollbars=0, width=50, height=50, left=50, top=50'); // begin html ExternalInterface.call('imgWin.document.writeln', '<script> \\\\\\\\'); // resize function ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'function resizeWin() {\\\\\\\\'); ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'if( !document.images.length ) { document.images[0] = document.layers[0].images[0]; }\\\\\\\\'); ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'var imageHeight = document.images[0].height, imageWidth = document.images[0].width;\\\\\\\\'); ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'if( !imageHeight || window.doneAlready ) { return; }\\\\\\\\'); // images are disabled ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'window.doneAlready = true;\\\\\\\\'); // Safari and Opera stuff ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'var win = window; win.resizeTo( imageWidth + 200, imageHeight + 200 );\\\\\\\\'); ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'var currWidth = 0, currHeight = 0, de = win.document.documentElement, bod = win.document.body;\\\\\\\\'); ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'if( win.innerWidth ) { currWidth = win.innerWidth; currHeight = win.innerHeight; }\\\\\\\\'); ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'else if( de && de.clientWidth ) { currWidth = de.clientWidth; currHeight = de.clientHeight; }\\\\\\\\'); ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'else if( bod && bod.clientWidth ) { currWidth = bod.clientWidth; currHeight = bod.clientHeight; }\\\\\\\\'); ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'if( window.opera && !document.childNodes ) { currWidth += 16; }\\\\\\\\'); ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'win.resizeTo( imageWidth = imageWidth + ( ( imageWidth + 200 ) - currWidth ), imageHeight = imageHeight + ( (imageHeight + 200 ) - currHeight ) );\\\\\\\\'); ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'}\\\\\\\\'); // title function ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'function writeTitle() {\\\\\\\\'); ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'document.title = "\\\\\\\\' + title + \\\\\\\\'";\\\\\\\\'); ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'}\\\\\\\\'); ExternalInterface.call(\\\\\\\\'imgWin.document.writeln\\\\\\\\', \\\\\\\\'</script>'); ExternalInterface.call('imgWin.document.writeln', ''); if (hasLayers) { ExternalInterface.call('imgWin.document.writeln', '<layer left="0" top="0"></layer>'); } else { ExternalInterface.call('imgWin.document.writeln', ' <p style="left: 0px; position: absolute; top: 0px">'); } ExternalInterface.call('imgWin.document.writeln', '<img src="http://blog.onebyonedesign.com/wp-admin/'%20+url%20+%20'" alt="Loading image ..." />'); if (hasLayers) { ExternalInterface.call('imgWin.document.writeln', ''); } else { ExternalInterface.call('imgWin.document.writeln', ' '); } ExternalInterface.call('imgWin.document.close'); ExternalInterface.call('return', 'false'); } else { trace ("Cannot call javascript functions from current container."); } } } } |
and an example document class:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
package { import com.onebyonedesign.extras.OBO_Popup; import flash.display.Sprite; import flash.events.TextEvent; import flash.text.TextField; import flash.text.TextFieldAutoSize; import flash.text.TextFormat; public class PopupExample extends Sprite { public function PopupExample():void { var fmt:TextFormat = new TextFormat("_sans", 12); var html:String = "Click <font color="#0000dd"><a href="event:test.jpg|Picture Digest">here</a></font> to open a resizing popup.\n\n"; html += "Or, click <font color="#0000dd"><a href="event:test2.jpg|Saucer Men">here</a></font> to open another." var textField:TextField = new TextField(); textField.defaultTextFormat = fmt; textField.autoSize = TextFieldAutoSize.LEFT; textField.addEventListener(TextEvent.LINK, openPopup); textField.htmlText = html; textField.x = 50; textField.y = 50; addChild(textField); } private function openPopup(te:TextEvent):void { var argumentArray:Array = te.text.split("|"); var url:String = argumentArray[0]; var title:String = argumentArray[1]; OBO_Popup.pop(url, title); } } } |
which yields:
EDIT: I just realized that class is all but completely illegible thanks to the AS parsing script I use. Below is a link to the actual .as file for anyone actually interested..
Sorry, the comment form is closed at this time.