Enhance ImageVault with jQuery

In the spirit of Microsoft's official embrace of jQuery, I'd like to show you an example of how you can add jQuery functionality to ImageVault.

jQuery is a powerfull JavaScript library that can help you with e. g. animations and Ajax interactions. The prefered way of loading jQuery is to use google.load(), Google provides the most popular, open source JavaScript libraries through the AJAX Libraries API. To load jQuery just add the following section to your head section.

<script type="text/javascript src="http://www.google.com/jsapi"></script><script type="text/javascript">    google.load("jquery", "1.2.6");</script>

For more information about google.load() please visit Google AJAX APIs.

Next i'm going to show you how easy it can be to create an autocomplete searchbox that searches through ImageVault and all of it's contents. For this to work we will add a ready to use plugin for jQuery called Autocomplete. So just download the script and include the path in your head section of your document. We should end up with something like this:

<script type="text/javascript src="http://www.google.com/jsapi"></script><script type="text/javascript">    google.load("jquery", "1.2.6");</script><script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script>

Next it's time to create the handler responsible for delivering the images based on our query and for this my choice is a generic handler, so let's add a new generic handler to our project.

public class AutoComplete : IHttpHandler {
    public void ProcessRequest(HttpContext context) {
        if (context.Request.QueryString["q"] != null) {
            IVFileDataCollection hits = IVDataFactory.FindFilesWithCriteria(1, context.Request.QueryString["q"],
            null, IVSearchConditions.StartsWith,
            null, true);
            IVUrlBuilder urlBuilder = new IVUrlBuilder();
            foreach (IVFileData hit in hits) {
                urlBuilder.Id = hit.Id;
                urlBuilder.Width = 46;
                urlBuilder.Height = 46;
                context.Response.Write(urlBuilder + "|" + hit.FileName + Environment.NewLine);
            }
        }
        context.Response.End();
    }
    public bool IsReusable {
        get {
            return false;
        }
    }
}

... and there we have a very simple ImageVault search handler, the first paramter to the FindFilesWithCriteria method is the id of the album you want to search in and this should ofcourse be configured from e. g. the page template.

The handler above is invoked by some JavaScript, so let's add a new script file and write some jQuery.

$(document).ready(function() {
    $("#ctl00_QuickSearch_SearchText").autocomplete(" /AutoComplete.ashx ", {
        delay: 5,
        minChars: 1,
        matchSubset: 1,
        matchContains: 1,
        max: 6,
        autofill: true,
        scroll: false,
        formatItem: function(data, i, n, value) {
            return "";
        },
        formatResult: function(data, value) {
            return data[1];
        }
    });
})

As you can see above I have hijacked the quicksearch field on a standard EPiServer CMS 5 demo site, you probably want to change this but for now this is all about proof of concept.

Next, add the newly created file to your head section and it should look something like this:

<script type="text/javascript src="http://www.google.com/jsapi"></script><script type="text/javascript">    google.load("jquery", "1.2.6");</script><script type="text/javascript" src="/js/jquery.autocomplete.min.js"></script><script type="text/javascript" 
src="/js/demo.autocomplete.js"></script>

When you have saved all your files you should be able the have a test run so fire up the demo site and start typing in the quicksearch field, if you have the required access to ImageVault you should see some images. When your done testing you could add some clean css to give this proof of concept thingy a nice look and feel.

Hope you like this article and feel free to drop a comment or contact me if you have some ImageVault questions.