SharePoint 2010

This is a cool supplement for the content editor in SharePoint 2010.
Enable image popup functionally with a single click for the editor. This solution is based on prettyPhoto, which must be implemented before starting. The editor must insert the big version of the image in the content editor and then down scale it by dragging the corners of the image. Click the image and click on the ImagePopUp button in the editor.

Add the button to the CommandUIExtension-node:
<Button Id="ImagePopUp"
Command="Command.ImagePopUp"
Sequence="35"
Image16by16="/_layouts/images/ImagePopUp_16x16.png"
Image32by32="/_layouts/images/ImagePopUp_32x32.png"
Description="Image popup"
LabelText="Image popup"
TemplateAlias="o1" />


Then add the following to the CommandUIHandlers;
<CommandUIHandler
Command="Command.ImagePopUp"
CommandAction="javascript:sel = document.selection.createRange();if(document.selection.type == 'Control'){if(sel.item(0).tagName == 'IMG'){document.execCommand('createlink',false,sel.item(0).getAttribute('src')); newLinkObj=sel.item(0).parentElement;
newLinkObj.setAttribute('rel','prettyPhoto');node=document.createElement('span');node.innerHTML='&lt;br&gt;Click the image to see it in big'; newLinkObj.parentNode.insertBefore(node, newLinkObj.nextSibling );}};" />


Sidst opdateret: 10. okt.  2011