Lightbox support for ImageManager

10 posts, 1 answers
  1. IKB
    IKB avatar
    24 posts
    Member since:
    Sep 2007

    Posted 18 Jul 2008 Link to this post

    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
  2. George
    Admin
    George avatar
    859 posts

    Posted 23 Jul 2008 Link to this post

    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
  3. IKB
    IKB avatar
    24 posts
    Member since:
    Sep 2007

    Posted 23 Jul 2008 Link to this post

    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
  4. George
    Admin
    George avatar
    859 posts

    Posted 25 Jul 2008 Link to this post

    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.
  5. IKB
    IKB avatar
    24 posts
    Member since:
    Sep 2007

    Posted 25 Jul 2008 Link to this post

    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?
  6. IKB
    IKB avatar
    24 posts
    Member since:
    Sep 2007

    Posted 25 Jul 2008 Link to this post

    Here (RadEditor.js:9399-9421)?

    1 RadEditorNamespace.radEditorCreateImage=function(_162,_163){  
    2 if(!_162||!_162.imagePath){  
    3 return;  
    4 }  
    5 var _164=_163.editor;  
    6 _164.InsertImage(_162.imagePath);  
    7 var _165=_164.GetSelectedElement();  
    8 if(_165&&_165.tagName.toLowerCase()=="img"){  
    9 _165.alt=_162.imageAltText;  
    10 }  
    11 if(_162.linkImagePath){  
    12 if(_165.tagName.toUpperCase()=="IMG"){  
    13 _165.style.border="0";  
    14 }  
    15 var _166={};  
    16 if(_162.targetToNew){  
    17 _166.text=_164.GetSelectionHtml();  
    18 _166.href=_162.linkImagePath; originalAttribute="href" originalPath="_162.linkImagePath;"  
    19 _166.target="_blank";  
    20 }  
    21 _164.InsertLink(_162.linkImagePath,null,_166);  
    22 }  
    23 }; 

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

    It'll be a great weekend. ;-)

    Regards

    Martin
  7. Answer
    George
    Admin
    George avatar
    859 posts

    Posted 28 Jul 2008 Link to this post

    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.
  8. IKB
    IKB avatar
    24 posts
    Member since:
    Sep 2007

    Posted 30 Jul 2008 Link to this post

    Yes, thank you!

    Martin
  9. Abdullah
    Abdullah avatar
    1 posts
    Member since:
    Feb 2012

    Posted 26 Feb 2012 Link to this post

    Hi I use asp.net. How can I use lightbox for imagemanager in radeditor.
  10. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 28 Feb 2012 Link to this post

    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.
Back to Top