In this example I'm gonna show you how to work with custom client side code in the RadEditor.

Goal: We want to have a FancyBox style popup that show a large image file when clicking on a thumbnail. Follow these steps to achieve the desired behaviour:

Updated for the 01.01.03 release
The code below makes now use of the implemented imagetester webform to check if the file actually is a thumbnail of a larger image
  1. Create a file editor.js in a folder called js in the skin diretory of your current DNN skin
  2. In your editor configuration set the property ScriptToLoad to "js/editor.js"
  3. In your editor configuration set the property OnClientPasteHtml to "OnClientPasteHtml"
  4. In the editor.js file put in the following code:

// this is what will come in between the rel tag of the image link
// this will cause the jQuery plugin to fire on those links

var relTag = 'img_group';

// this is the url that we send our testcalls to
// e.g. check wether a large image file exists on the server

var testUrl = '/Desktopmodules/dnnWerk.RadEditorProvider/ImageTester.aspx';

// this is the method to be called whenever something is being pasted into the editor
// note that this can be extended by adding something similar like 
// "if (commandName == "ImageManager")" for the media mananger: "if (commandName == "MediaManager")"

function OnClientPasteHtml(sender, args)
{
   var commandName = args.get_commandName();
   var value = args.get_value();
   if (commandName == "ImageManager")
   {
       //See if an img has an alt tag set
       var div = document.createElement("DIV");
       //Do not use div.innerHTML as in IE this would cause the image's src or the link's href to be converted to absolute path.
       //This is a severe IE quirk.
       Telerik.Web.UI.Editor.Utils.setElementInnerHtml(div, value);
       var img = div.firstChild;
       if (img) {
           
           var href;
           var replace = false;
           
           href = img.src.replace(/_thumb.gif/g, '.gif');
           href = href.replace(/_thumb.jpg/g, '.jpg');
           href = href.replace(/_thumb.png/g, '.png');
           href = href.replace(/_thumb.JPG/g, '.jpg');
           href = href.replace(/_thumb.PNG/g, '.png');
           href = href.replace(/_thumb.GIF/g, '.gif');

           if (href != img.src) {
               //only attempt to create link to large image if it is another file than the source file
               //we ue an ajax call to our tester page if that file exists
               jQuery.ajax({
                   url: testUrl,
                   cache: false,
                   data: ({ file: href }),
                   dataType: 'text',
                   async: false, //must no be async because we want our variable to be populated correctly
                   success: function(data) {
                       if (data == 'OK') {
                           //image exists 
                           replace = true;
                       }
                   }
               });

               if (replace == true) 
               {
                   //this is the new markup, rel="img_group" cause the jquery plugin to fire on the image link
                   var html = '<a rel="' + relTag + '" href="' + href + '">' + value + '</a>';
                   //write back to the editor
                   args.set_value(html);
               } 
           }                      
       }     
   }
}





For more information about the event have a look at the onlinehelp for the editor itself:

http://www.telerik.com/help/aspnet-ajax/onclientpastehtml.html

Then find a way to load the following jQuery code in your skin, make also sure you load the FancyBox plugin.

jQuery(document).ready(function() {
		
	$("a[rel=img_group]").fancybox({
				'transitionIn'		: 'none',
				'transitionOut'		: 'none',
				'titlePosition' 	: 'over',
				'titleFormat'		: function(title, currentArray, currentIndex, currentOpts) {
					return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' &nbsp; ' + title : '') + '</span>';
				}
			});
                });


Now when you want to add an image with that effect make sure that you have two images in place:
  • image.jpg
  • image_thumb.jpg
Place the image_thumb,jpg into the editor by using the image manager. The script will add the necessary markup to your image to fire the FancyBox scripts. That easy!

Last edited Nov 5, 2010 at 3:10 PM by proeder, version 5

Comments

No comments yet.