Demo of Gallery2 Image Chooser version 3.0

This is a demo of the Gallery2 Image Chooser version 3.0. It is available for download here.

This is primarily a demo for developers to see how they could integrate the Gallery2 Image Chooser into their embedded Gallery2 application.

A user-oriented demo is available here. It demonstrates the Gallery2 Image chooser in a WPG2 photoblog using both TinyMCE and quicktags.

There is also a demo in Traditional Chinese here to demonstrate G2Image's localization capability. (Thanks to Stephen Chu of www.ju-ju.com for the translation.)

Press the G2Image button to open the Gallery2 Image Chooser window.

Add any additional text that you'd like, then press the "Save to Results Area" button to update the "Results" area at the bottom. Then you can click on the image and you'll link to Gallery2!


Results:
Press the "Save to Results Area" button to transfer the contents of the textarea to this window. Then you can click on the images to link to Gallery2.

Code Behind the Curtain

Gallery2 Image Chooser was originally developed as a TinyMCE plugin. So, you have two methods to integrate it into your application. You can either use TinyMCE and install G2Image as a TinyMCE plugin (as demonstrated in the TinyMCE portion of the WPG2 Blog Demo) or you can add G2Image directly to your application using the javascript demonstrated on this page.

To add G2Image to your application without using TinyMCE, you first need a named form with a named input field. Then you need a button that calls g2ic_open using the form name and field name as paramenters. Here is the code used in this demo:

<form name="demo_form" action="http://demo.steffensenfamily.com">
	<textarea name="demo_content" style="width:500px" rows="10">
	</textarea>
	<input type="button" name="g2image" value="G2Image" onclick="g2ic_open('demo_form', 'demo_content');" />
</form>

Finally you need to define the javascript g2ic_open function. Here is the code used in this demo:

<script language="javascript" type="text/javascript">
function g2ic_open(form, field) {
	var url = 'http://demo.steffensenfamily.com/tinymce/plugins/g2image/g2image.php?g2ic_form='+form+'&g2ic_field='+field+'&g2ic_tinymce=0';
	var name = 'g2image';
	var w = 800;
	var h = 600;
	var valLeft = (screen.width) ? (screen.width-w)/2 : 0;
	var valTop = (screen.height) ? (screen.height-h)/2 : 0;
	var features = 'width='+w+',height='+h+',left='+valLeft+',top='+valTop+',resizable=1,scrollbars=1';
	window.open(url, name, features);
}
</script>

You must pass the form name, field name, and g2ic_tinymce=0 into g2image.php via the GET parameters, as demonstrated here.