How to display images from media library in lightbox in version 5.0

1) Please  change following lines in following files first:


~\CMSAdminControls\FCKeditor\editor\plugins\InsertImageOrMedia\fckplugin.js:

if (arr['behavior'] == 'hover') {

to:

if ((arr['behavior'] == 'hover') || (arr['behavior'] == 'lightbox')) {


~\CMSModules\Content\Controls\Dialogs\Properties\HTMLMediaProperties.ascx:

                <div style="padding-left: 27px; padding-top: 5px;">
                    <cms:WidthHeightSelector ID="imgWidthHeightElem" runat="server" VerticalLayout="false" />
                </div>
            </div>
        </ContentTemplate>

to:

                <div style="padding-left: 27px; padding-top: 5px;">
                    <cms:WidthHeightSelector ID="imgWidthHeightElem" runat="server" VerticalLayout="false" />
                </div>
                <table>
                    <tr>
                        <td colspan="2">
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <cms:LocalizedRadioButton ID="radImageLightbox" runat="server" ResourceString="dialogs.image.behaviorlightbox"
                                GroupName="imgBehavior" Height="20" />
                        </td>
                    </tr>
                </table>
            </div>
        </ContentTemplate>


~\CMSModules\Content\Controls\Dialogs\Properties\HTMLMediaProperties.ascx.cs:

                retval[DialogParameters.IMG_MOUSEOVERHEIGHT] = imgWidthHeightElem.Height;
            }
        }

        #endregion

to:

                retval[DialogParameters.IMG_MOUSEOVERHEIGHT] = imgWidthHeightElem.Height;
            }
            if (radImageLightbox.Checked)
            {
                retval[DialogParameters.IMG_BEHAVIOR] = "lightbox";
            }

        }

        #endregion

and

                                radImageNone.Checked = true;
                                break;
                        }
                    }

                    // Process behavior

to:
                               
                                radImageNone.Checked = true;
                                break;
                        }
                    }
                    if (imgBehavior == "lightbox")
                    {
                        radImageLightbox.Checked = true;
                    }

                    // Process behavior


~\CMSScripts\Dialogs\HTMLEditor.js:

                if (obj.img_behavior == "hover") {

to:

                if ((obj.img_behavior == "hover") || (obj.img_behavior == "lightbox")) {


2) Replace ~\CMSInlineControls\ImageControl.ascx.cs file with this one (please rename file to 'ImageControl.ascx.cs' after downloading it).

3) Download original lightbox gallery files and follow procedure described at http://www.lokeshdhakar.com/projects/lightbox2/#how
You can register the required JavaScripts, e.g. using the General -> Java script web part and CSS file e.g. using General -> HeadHTML web part

4) Add image(s) into editable region using 'Insert/Edit image or media' button from toolbar and choose lightbox behavior in 'Behavior' tab after selecting the image from media library.
 

See also:

Applies to: Kentico CMS 5.0