This is a migrated thread and some comments may be shown as answers.

Lightbox support for ImageManager

9 Answers 133 Views
Editor
This is a migrated thread and some comments may be shown as answers.
IKB
Top achievements
Rank 1
IKB asked on 18 Jul 2008, 12:58 PM
Hi,

I wonder if you could add a new option in the Image Manager for the next version:

When inserting a thumbnail image, there are already options to link to the original and to open this link in a new window.

How about another option to open the original image in a lightbox?

When activated, a rel="lightbox" attribute is added to the link tag.

We could then add any lightbox (or derivate) script we like to the page.

If you add an extra field for an "image set" you could also have the image gallery mentioned in another post. Typing a value in the field "image set" would then result in the attribute rel="lightbox[<image set value>]" being added to the link tag.

Or can I achieve this in any other way?
Would be nice to have this for radE for Sharepoint 4.5.3 especially... ;-)

Regards

Martni

9 Answers, 1 is accepted

Sort by
0
George
Telerik team
answered on 23 Jul 2008, 12:32 PM
Hi Martin,

In the new RadEditor for ASP.NET AJAX we have introduced the OnClientPasteHtml event, which is useful in scenarios where the developers need to examine or modify the HTML to be pasted by an editor tool before it is inserted in the editor content area. So, you can use the OnClientPasteHtml event to achieve the desired behavior. Also, note that with the RadEditor for ASP.NET Q2 "Futures" release, we introduced  the ability to load all the editor dialogs [.ascx-es] from an external folder, rather than from the DLL. Thus, is possible for developers to easily make changes and restrictions to the dialogs and their functionality. We believe this would be the easiest way to handle such requirements, as introducing new properties for each possible feature would make the editor configuration more difficult.

I can see that you are using the RadEditor for ASP.NET. What we suggest is to open the desired dialog situated in the Program Files/Common Files/Microsoft Shared/web server extensions/wpresources/RadEditorSharePoint/4.4.1.0__1f131a624888eeed/RadControls/Editor/Dialogs folder and modify it so that to best fit your scenario.

In addition, please review the following KB article:
http://www.telerik.com/support/kb/article/b454K-bakg-b454T-cgg-b454c-cgg.aspx

I hope this helps.

Sincerely,
George
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
0
IKB
Top achievements
Rank 1
answered on 23 Jul 2008, 01:45 PM
Thanks, George.

I already found the various ascx-files, but I am not sure where to add/modify the code that creates the image link.

Can you give a hint?

Regards

Martin
0
George
Telerik team
answered on 25 Jul 2008, 08:22 AM
Hi Martin,

Open the RadEditorSharePoint/4.4.1.0__1f131a624888eeed/RadControls/Editor/Dialogs/ImageManager.ascx and modify the following function, so that to best fit your scenario:
function OkClicked()  
{  
    if (fileBrowser.SelectedItem.Type == "D")  
    {  
        alert(localization["NoImageSelectedToInsert"]);  
        return;  
    }  
 
    var image = {  
        imagePath: "",  
        linkImagePath: "",  
        imageAltText: previewer.GetAltText()  
    };  
 
//  image.imagePath = document.getElementById("FolderPathBox").value;  
    image.imagePath = fileBrowser.SelectedItem.GetUrl();  
    var options = mainThumbLinkOptionSetter.GetOptions();  
    var originalImage = fileBrowser.SelectedItem.GetOriginalImage(thumbAppendix);  
    if (options.LinkToImage && originalImage)  
    {  
        image.linkImagePath = originalImage.GetUrl();  
        image.targetToNew = options.TargetToNew;  
    }  
 
    retValue = image;  
    CloseDlg(retValue);  

I hope this helps.

Have a great weekend,
George
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
IKB
Top achievements
Rank 1
answered on 25 Jul 2008, 11:26 AM
I'd change this function to recognize the lightbox settings and add the appropriate properties to the image object.

But: Up to now I did not find the place where the image code is inserted, so I can change this to respect the new properties.

Is this like "If your wife says 'it is there' and you can't find it, trust your wife and keep searching..."

Is it in RadEditor.js?
0
IKB
Top achievements
Rank 1
answered on 25 Jul 2008, 11:46 AM
Here (RadEditor.js:9399-9421)?

RadEditorNamespace.radEditorCreateImage=function(_162,_163){  
if(!_162||!_162.imagePath){  
return;  
}  
var _164=_163.editor;  
_164.InsertImage(_162.imagePath);  
var _165=_164.GetSelectedElement();  
if(_165&&_165.tagName.toLowerCase()=="img"){  
_165.alt=_162.imageAltText;  
}  
if(_162.linkImagePath){  
if(_165.tagName.toUpperCase()=="IMG"){  
_165.style.border="0";  
}  
var _166={};  
if(_162.targetToNew){  
_166.text=_164.GetSelectionHtml();  
_166.href=_162.linkImagePath; originalAttribute="href" originalPath="_162.linkImagePath;"  
_166.target="_blank";  
}  
_164.InsertLink(_162.linkImagePath,null,_166);  
}  
}; 

Is code generated or somehow treated?
I can't imagine anyone to maintain this...

It'll be a great weekend. ;-)

Regards

Martin
0
Accepted
George
Telerik team
answered on 28 Jul 2008, 11:06 AM
Hi Martin,

Here are the steps to achieve your scenario:
  1. Open the RadEditorSharePoint\4.x.x.x__1f131a624888eeed\RadControls\Editor\Dialogs\ImageManager.ascx file and set the custom attribute in the OkClicked() function, e.g.
    /* OK button clicked */ 
    function OkClicked()  
    {  
        if (fileBrowser.SelectedItem.Type == "D")  
        {  
            alert(localization["NoImageSelectedToInsert"]);  
            return;  
        }  
     
        var image = {  
            imagePath: "",  
            linkImagePath: "",  
            imageAltText: previewer.GetAltText()  
        };  
     
        image.imagePath = fileBrowser.SelectedItem.GetUrl();  
        var options = mainThumbLinkOptionSetter.GetOptions();  
        var originalImage = fileBrowser.SelectedItem.GetOriginalImage(thumbAppendix);  
        if (options.LinkToImage && originalImage)  
        {  
            image.linkImagePath = originalImage.GetUrl();  
            image.targetToNew = options.TargetToNew;  
        }  
     
        retValue = image;  
        retValue.rel= "lightbox";       
        CloseDlg(retValue);  

     
     
  2. Next, open the \wpresources\RadEditorSharePoint\4.x.x.x__1f131a624888eeed\RadControls\Editor\Scripts\7_x_x\MOSSEditorTools.js file and add modify the Image Manager callBackFn function e.g.
    var imageManagerCommand = RadEditorCommandList["ImageManager"];    
    RadEditorCommandList["ImageManager"] = function(commandName, editor, oTool)     
    {     
        imageManagerCommand (commandName, editor, callBackFn);     
            
        function callBackFn(result)     
        {     
            if (result && result.imagePath)     
            {     
                  
                var img = document.createElement ("IMG");     
                var src = result.imagePath;     
                var alt = "ALT_TAG";    
                var rel= result.rel; 
       
                editor.PasteHtml("<img src='" + src + "' rel='" + rel+ "' alt='" + alt + "' />"); //paste the newly created IMG in the editor    
            };     
        }     
    }    
     
     
I hope this helps.

Sincerely,
George
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
IKB
Top achievements
Rank 1
answered on 30 Jul 2008, 05:04 AM
Yes, thank you!

Martin
0
Abdullah
Top achievements
Rank 1
answered on 26 Feb 2012, 10:52 AM
Hi I use asp.net. How can I use lightbox for imagemanager in radeditor.
0
Rumen
Telerik team
answered on 28 Feb 2012, 03:45 PM
Hi,

You can use the OnClientPasteHtml event of RadEditor to modify the inserted content via the Image Manager.


All the best,
Rumen
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Editor
Asked by
IKB
Top achievements
Rank 1
Answers by
George
Telerik team
IKB
Top achievements
Rank 1
Abdullah
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or