How to create custom gallery

Editor and GalleryBox controls allows to use alternative Media Gallery instead of default Media Gallery.

CustomGalleryAPI

The CustomGalleryAPI control represents API to create a custom gallery. You can use the API to get or return any custom media object from your custom gallery. This control help you to return media object from your custom gallery.

Client-side API functions list:

Name Description

ContentType This variable contains content type to filter the content that is showed into the custom gallery.

returnMediaObject(filePath, width, height, additionalParams) This function returns selected media object. In the Editor control you can use width, height and additionalParams parameters to define additional parameters.

Custom gallery creation

1. Create Editor or GalleryBox control on the page and define GalleryPath or CustomGalleryPath property by path t o your custom gallery:

<al:editor id="control1" runat="server" GalleryPath="gallery.aspx" GalleryWindowHeight="100px" GalleryWindowWidth="300px" />

<al:GalleryBox id="control1" runat="server" CustomGalleryPath="gallery.aspx" GalleryWindowHeight="100px" GalleryWindowWidth="300px" />

2. Create ASPX page with "gallery.aspx" name. See sample:

<%@ Page Language="C#" %>
<%@ Register TagPrefix="al" Namespace="AspLib.WebControls" Assembly="AspLib" %>
<html>
<head runat="server">
<script language="javascript" type="text/javascript">
// <!CDATA[

function selectImage(path)
{
    returnMediaObject(path, 120, 80, "border='1' style='border: " + document.getElementById('tbxColor').value + "' ");
}

// ]]>
</script>
</head>
<body>
    <form id="form1" runat="server"><al:CustomGalleryAPI id="CustomGalleryAPI1" runat="server" />
        <h2 style="text-align: center">Custom gallery</h2>
        <h2 style="text-align: center">
        <img src="../CustomGallery/1.jpg" height="80px" onclick="selectImage('CustomGallery/1.jpg');" />
        <img src="../CustomGallery/3.jpg" height="80px" onclick="selectImage('CustomGallery/3.jpg');" /> 
        <img src="../CustomGallery/4.jpg" height="80px" onclick="selectImage('CustomGallery/4.jpg');" />
        <img src="../CustomGallery/2.jpg" height="80px" onclick="selectImage('CustomGallery/2.jpg');" />
        <br /></h2>
        <p style="text-align: center">Border color:
            <input id="tbxColor" style="width: 63px" type="text" value="green" /></p>
        <h2 style="text-align: center"><br />
            <input id="Button1" style="width: 85px" type="button" value="Close" onclick="window.close()" /> </h2>
    </form>
</body>
</html>

This code creates next gallery form:

When you click on any image from the gallery the image will invoke the selectImage function and return the media object into the control.

Ensure that folder with the media objects exists.

See Also

Controls: GalleryBox | Editor | Media Gallery

Name	Description
ContentType	This variable contains content type to filter the content that is showed into the custom gallery.
returnMediaObject(filePath, width, height, additionalParams)	This function returns selected media object. In the Editor control you can use width, height and additionalParams parameters to define additional parameters.