htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Add-Ons:
Image manager with thumbnails! - almost :-)


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


aubrey
Novice

Aug 4, 2004, 3:32 PM

Post #1 of 12 (34166 views)
Shortcut
Image manager with thumbnails! - almost :-) Can't Post

Hello, I am working on writing an addition for the image manager to make it support inserting thumbnail images as well as full size images into the text. The problem is that thumbnails need to have a link back to the big image Wink... After puzzling my brains about it for some time, I finally decided to use the javascript onClick parameter in the image to open a new window containing the full image. For some reason, no matter what I try, I can't get the onClick parameter to appear in the image tag. the code I am using is: (image-manager.js)




Code
 
/**
* The ImageManager plugin javascript.
* @author $Author: Wei Zhuo $
* @version $Id: image-manager.js 26 2004-03-31 02:35:21Z Wei Zhuo $
* @package ImageManager
*/

/**
* To Enable the plug-in add the following line before HTMLArea is initialised.
*
* HTMLArea.loadPlugin("ImageManager");
*
* Then configure the config.inc.php file, that is all.
* For up-to-date documentation, please visit http://www.zhuo.org/htmlarea/
*/

/**
* It is pretty simple, this file over rides the HTMLArea.prototype._insertImage
* function with our own, only difference is the popupDialog url
* point that to the php script.
*/
function ImageManager(editor)
{
var tt = ImageManager.I18N;

};

ImageManager._pluginInfo = {
name : "ImageManager",
version : "1.0",
developer : "Xiang Wei Zhuo",
developer_url : "http://www.zhuo.org/htmlarea/",
license : "htmlArea"
};


// Over ride the _insertImage function in htmlarea.js.
// Open up the ImageManger script instead.
HTMLArea.prototype._insertImage = function(image) {

var editor = this; // for nested functions
var outparam = null;
if (typeof image == "undefined") {
image = this.getParentElement();
if (image && !/^img$/i.test(image.tagName))
image = null;
}
if (image) outparam = {
f_url : HTMLArea.is_ie ? image.src : image.getAttribute("src"),
f_onclick : image.onClick,
f_alt : image.alt,
f_border : image.border,
f_align : image.align,
f_vert : image.vspace,
f_horiz : image.hspace,
f_width : image.width,
f_height : image.height
};

var manager = _editor_url + 'plugins/ImageManager/manager.php';

Dialog(manager, function(param) {
if (!param) { // user must have pressed Cancel
return false;
}
var img = image;
if (!img) try {
var sel = editor._getSelection();
var range = editor._createRange(sel);
editor._doc.execCommand("insertimage", false, param.f_url);
if (HTMLArea.is_ie) {
img = range.parentElement();
// wonder if this works...
if (img.tagName.toLowerCase() != "img") {
img = img.previousSibling;
}
} else {
img = range.startContainer.previousSibling;
}
} catch(e) {}
else {
img.src = param.f_url;
}

img.onClick = param["f_onclick"];
img.alt = param["f_alt"];
img.border = parseInt(param["f_border"] || "0");
img.align = param["f_align"];
img.vspace = parseInt(param["f_vert"] || "0");
img.hspace = parseInt(param["f_horiz"] || "0");

}, outparam);
};


When I alert(param["f_onclick"]);, it shows that the value is passed to insert-image.js, it just doesn't show up in the image tag.

Help would be appreciated Smile

-Aubrey


nikotto
User

Aug 5, 2004, 1:21 AM

Post #2 of 12 (34146 views)
Shortcut
Re: [aubrey] Image manager with thumbnails! - almost :-) [In reply to] Can't Post

i could need your plugin - but i can't really help you on this...

perhaps you can try putting an a-tag around the image where the a-tag has the onclick (would be better anyway to have the location of the big-image in a.href so it works without javascript too)

please let me know when your plugin is finished - and perhaps you could post the code too :D

mfg


aubrey
Novice

Aug 6, 2004, 2:13 PM

Post #3 of 12 (34110 views)
Shortcut
Re: [nikotto] Image manager with thumbnails! - almost :-) [In reply to] Can't Post

I was just going to do the a tag with a href= to surround the image but I have no idea how to do that.

I would be glad to give the code to anyone who wants it, but this bug needs to be fixed before it will work.

hopefully someone can find where I messed up, or can think of a different way to do it...

-Aubrey


aubrey
Novice

Aug 11, 2004, 6:52 PM

Post #4 of 12 (34007 views)
Shortcut
Re: [aubrey] Image manager with thumbnails! - almost :-) [In reply to] Can't Post

I decided to rephraze my entire idea, so hopefully others can understand what I'm trying to say: Smile

The Objective:

To modify the image manager plugin so that it supports inserting thumbnails (with a link to the full sized image) OR the full sized image into text.

I can think of 2 ways to accomplish this:

1) - Insert a parameter called "onClick" into the image tag with the value "window.open('path/to/full/sized/image')"

2) - Surround the thumbnail image with a link tag, linking to the full sized image in a new window

Progress I have made:

I have modified the imagemanager dialog successfully so that it sends the correct parameters back to image-manager.js. the problem lies in the fact that I am not very good with javascript (although willing to learn), and don't know enough to modify the final image tag. (See the first post in this thread for my attempt at it Wink).

Hopefully someone can help me with this project, as I belive it will add a much-needed functionality to the image manager, and it should be pretty easy to do.

Thank You,

-Aubrey


aubrey
Novice

Aug 31, 2004, 6:15 PM

Post #5 of 12 (33636 views)
Shortcut
Re: [aubrey] Image manager with thumbnails! - another idea! [In reply to] Can't Post

I thought of another way.

It definitley isn't as good as the other two, but it should work.

If the user clicked the "Insert Thumbnail" button, it will display an alert that says "Note: if you want to have your thumbnail image link to the full sized one, just put your image inside a link to "http://www.yoursite.blah/path/to/image.???"

If noone else can think of a way to make the other ideas work, I guess I will just have to do this.

It does add a lot of useless complexity to the user, though Unsure


-Aubrey


sulleleven
Novice

Sep 1, 2004, 12:40 AM

Post #6 of 12 (33613 views)
Shortcut
Re: [aubrey] Image manager with thumbnails! - another idea! [In reply to] Can't Post

the blogging tool I use (pLog) uses htmlArea and has a custom insert_resource button that allows inserting thumbnails. I hacked it so that these thumbnails link to the full image in the gallery.
Point being, I hear your need and will try to help but I am still working on MediaHandler. I use Image Manager too so I would like this feature you are working on. I just need to look at the code more first.


aubrey
Novice

Sep 1, 2004, 10:47 AM

Post #7 of 12 (33596 views)
Shortcut
Re: [sulleleven] Image manager with thumbnails! - another idea! [In reply to] Can't Post

Sulleleven,

Thanks!

do you think you could show me the hack?

I have it all setup so that it inserts the thumbnail, and I have the location of the big image in a variable but I am having problems (Mostly from a lack of JavaScript knowledge Smile), getting the thumbnail to link.

-Aubrey


alexdean
New User

Sep 17, 2004, 5:42 AM

Post #8 of 12 (33216 views)
Shortcut
Re: [aubrey] Image manager with thumbnails! - almost :-) [In reply to] Can't Post

you need to change the image.php file to add functionality to your image list.

I rewrote the drawfiles function using echo statements due to performance issues. runs 10 times faster if you don't muddle up code with html too much.

Notice the added View button that will use javascript to popup a new window.

make sure to include the popup javascript in your code or use window.open instead


Code
   

function drawFiles($list, &$manager)

{

global $relative;

foreach($list as $entry => $file)

{

echo '<td><table width="100" cellpadding="0" cellspacing="0"><tr><td class="block">';

echo '<a href="javascript:;" onclick=selectImage("'.$file['relative'].'","'.$entry.'",'.$file['image'][0].','.$file['image'][1].');" title="'.$entry.' - '.Files::formatSize($file['stat']['size']).'"><img src="'.$manager->getThumbnail($file['relative']).'" alt="'.$entry.' - '.Files::formatSize($file['stat']['size']).'"/></a>';

echo '</td></tr><tr><td class="edit" align=center>';

if($file['image']){

echo '<a href="images.php?dir='.$relative.'>&amp;delf='.rawurlencode($file['relative']).'" title="Trash" onclick="return confirmDeleteFile(\''.$entry.'\');"><img src="img/edit_trash.gif" height="15" width="15" alt="Trash"/></a>';

echo '<a href="javascript:;" title="Edit" onclick=editImage("'.rawurlencode($file['relative']).'")><img src="img/edit_pencil.gif" height="15" width="15" alt="Edit"/></a>';

echo '<a href="javascript:;" title="View" onclick=popup("'.$manager->getBaseURL().rawurlencode($file['relative']).'","ImgPreview","width='.($file['image'][0]+20).',height='.($file['image'][1]+20).'")><img src="img/edit_active.gif" height="15" width="15" alt="View"/></a>';

echo $file['image'][0].'x'.$file['image'][1];

} else echo $entry;

echo '</td></tr></table></td>';

}//foreach

}//function drawFiles




function popup(url,name,specs){

var mywindow;

mywindow = window.open(url,name,specs);

mywindow.focus();

}












Code



      
    


alexdean
New User

Sep 17, 2004, 6:40 AM

Post #9 of 12 (33214 views)
Shortcut
Re: [aubrey] Image manager with thumbnails! - almost :-) [In reply to] Can't Post

sorry little bug in the script. needed to escape some ' characters

the function should read




Code
  

function drawFiles($list, &$manager)

{

global $relative;

foreach($list as $entry => $file)

{

echo '<td><table width="100" cellpadding="0" cellspacing="0"><tr><td class="block">';

echo '<a href="javascript:;" onclick="selectImage(\''.$file['relative'].'\',\''.$entry.'\','.$file['image'][0].','.$file['image'][1].');" title="'.$entry.' - '.Files::formatSize($file['stat']['size']).'"><img src="'.$manager->getThumbnail($file['relative']).'" alt="'.$entry.' - '.Files::formatSize($file['stat']['size']).'"/></a>';

echo '</td></tr><tr><td class="edit" align=center>';

echo '<a href="images.php?dir='.$relative.'>&amp;delf='.rawurlencode($file['relative']).'" title="Trash" onclick="return confirmDeleteFile(\''.$entry.'\');"><img src="img/edit_trash.gif" height="15" width="15" alt="Trash"/></a>';

echo '<a href="javascript:;" title="Edit" onclick=editImage("'.rawurlencode($file['relative']).'")><img src="img/edit_pencil.gif" height="15" width="15" alt="Edit"/></a>';

echo '<a href="javascript:;" title="View" onclick=popup("'.$manager->getBaseURL().rawurlencode($file['relative']).'","ImgPreview","width='.($file['image'][0]+20).',height='.($file['image'][1]+20).'")><img src="img/edit_active.gif" height="15" width="15" alt="View"/></a>';

echo $file['image'][0].'x'.$file['image'][1];

echo '</td></tr></table></td>';

}//foreach

}//function drawFiles



barc
New User

Sep 25, 2004, 2:56 AM

Post #10 of 12 (33049 views)
Shortcut
Re: [alexdean] Image manager with thumbnails! - almost :-) [In reply to] Can't Post

It looks good but where do you insert the popup bit?

I would also love to be able to insert thumbnails linking through to the larger picture. Aubrey, any success yet?



Cheers,

Chris


DarrylB
User

Jan 24, 2005, 8:10 AM

Post #11 of 12 (31352 views)
Shortcut
Re: [barc] Image manager with thumbnails! - almost :-) [In reply to] Can't Post

Did this ever get finished?


marco76tv
Novice

Feb 4, 2005, 1:01 AM

Post #12 of 12 (30926 views)
Shortcut
Re: [DarrylB] Image manager with thumbnails! - almost :-) [In reply to] Can't Post

there is a layer manager and an image manager... please test and correct error :D


my icq # 210139517
Attachments: plugins.rar (166 KB)

 
 
 


Search for (options)