Content references list with preview

ArticleWithSlider.cs

[SiteContentType(GUID = "263B8330-791D-4A5E-BAE4-E7B59F93D3FB")]
public class ArticleWithSlider: ArticlePage
{
    [UIHint(MultipleReferencesEditorWithPreviewDescriptor.UiHint)]
    [Display(GroupName = SystemTabNames.Content, Name = "Carousel", Order = 100)]
    public virtual IList<ContentReference> ContentReferencesCollection { get; set; }
}

MultipleReferencesEditorWithPreviewDescriptor.cs

[EditorDescriptorRegistration(TargetType = typeof(IList<ContentReference>), UIHint = UiHint)]
public class MultipleReferencesEditorWithPreviewDescriptor : ContentReferenceListEditorDescriptor
{
    public const string UiHint = "multiple-references-with-preview";

    public MultipleReferencesEditorWithPreviewDescriptor(IEnumerable<IContentRepositoryDescriptor> contentRepositoryDescriptors, IContentLoader contentLoader): base(contentRepositoryDescriptors, contentLoader)
    {
        this.ClientEditingClass = "alloy.editors.multipleReferencesWithPreview";
   }
}

multipleReferencesWithPreview.js

define([
        "dojo/_base/declare",
        "dojo/_base/lang",
        "dojo/query",
        "dojo/on",
        "dojo/dom",
        "dojo/aspect",

        "dijit/popup",
        "dijit/TooltipDialog",

        "epi-cms/contentediting/editors/ContentReferenceListEditor"
    ],
    function(
        declare,
        lang,
        query,
        on,
        dom,
        aspect,

        popup,
        TooltipDialog,

        ContentReferenceListEditor

    ) {
        return declare("alloy.editors.multipleReferencesWithPreview", [ContentReferenceListEditor], {
            buildRendering: function () {
                this.inherited(arguments);

                var _this = this;
                aspect.around(this.list._list, "insertRow", function(originalInsertRow) {
                    return function (object, parent, beforeNode, i, option) {
                        var row = originalInsertRow.apply(this, arguments);
                        var node = query("div.epi-mo--img", row);
                        lang.hitch(_this, _this._createTooltip(row, node, object.previewUrl));
                        return row;
                    }
                });
            },

            _createTooltip: function (node, imgNode, previewUrl) {
                this.own(node.imageTooltip = new TooltipDialog({
                    connectId: [node.id],
                    content: "<img src='" + previewUrl + "' style='max-height: 250px;max-width: 400px;'/>",
                    onMouseLeave: function () {
                        popup.close(node.imageTooltip);
                    }
                }));

                on(imgNode, 'mouseleave', function () {
                    popup.close(node.imageTooltip);
                });

                on(imgNode, 'click', function () {
                    popup.open({
                        popup: node.imageTooltip,
                        around: dom.byId(node.id),
                        orient: ["after-centered"]
                    });
                });
            }
        });
    });