Customization · Dynamics CRM 2011 · Javascript

CRM 2011: Image Viewer (Image Carousel + Lightbox)

Recently I have to customize CRM to allow users to view images in CRM form. After a quick google, I settled on Carousel format combined with Lightbox.

Inspired by these two blogs:
1. Displaying a Contact’s Facebook Picture in Microsoft Dynamics CRM 2011
2. Adding an Image Carousel to a CRM 2011 Form

Here is how it looks like:
NOTE: There’s an upload control which I originally planned to include, but have since abandoned the idea since users can simply upload an image using attachment ribbon button. Thanks to Kyle for noticing this.

And the lightbox

Using jCarousel Lite library and jQuery library. And also Super Simple Lightbox with CSS and jQuery.

imageViewer.htm

<!DOCTYPE html>
<html>
<head>
    <link rel="StyleSheet" href="styles/lightbox.css" type="text/css"/>
    <script src="../ClientGlobalContext.js.aspx" type="text/javascript"></script>
    <script src="scripts/jquery_1.8.2.min.js" type="text/javascript"></script>
    <script src="scripts/jcarousellite_1.0.1.js" type="text/javascript"></script>
    <script src="scripts/imageHandler.js" type="text/javascript"></script>
    <title></title>
</head>
    <body>
    <table>
        <tr>
            <td>
                <button id="prev"><<</button>
            </td>
            <td>
            <div id="carousel">
                <ul id="carousel-ul"></ul>
            </div>
            </td>
            <td>
                <button id="next">>></button>
            </td>
        </tr>
    </table>
</body>
</html>

imageHandler.js

var MINIMIZED_HEIGHT = 180;
var MAXIMIZED_HEIGHT = 500;

function loadImages() {
    var context = GetGlobalContext();

    // Get the entity id    
    var entityId = context.getQueryStringParameters().id;

    if (entityId) {

        // Build the OData query to get all the images attached to the current entity        
        var oDataQuery = context.getServerUrl() + "/XRMServices/2011/OrganizationData.svc" +
        "/AnnotationSet?$select=AnnotationId,Subject,DocumentBody,MimeType&" +
        "$orderby=ModifiedOn desc&$filter=ObjectId/Id eq guid'" + entityId +
        "' and IsDocument eq true and startswith(MimeType,'image/') ";

        // Get a reference to the carousel ul        
        var carouselul = $("#carousel-ul");

        // Execute the OData query for the images
        $.getJSON(oDataQuery, function (data) {
            var results = data.d.results;

            // Add the results to the carousel ul            
            for (var i = 0; i < results.length; i++) {
                var noteId = results[i].AnnotationId;
                var noteSubject = results[i].Subject;

                // Build up an img tag surrounded by a li tag to add to the carousel ul                
                var img = "<li><a title='" + noteSubject + "' id='" + noteId + "' onclick='javascript:showLightbox(this);'><img id='img" + noteId + "' src='";

                // set src attribute of default profile picture web resource.                                    
                // here we use DataURI schema which has 32kb limit in IE8 and doesn't support IE <= 7.                                    
                var src = "data:" + results[i].MimeType + ";base64," + results[i].DocumentBody;

                img += src;
                img += "' width='100' height='100' style='border: 1px solid; margin: 1px;' alt='";
                img += noteSubject + "' /></a></li>";

                // Add the li with imag inside to the carousel ul                
                carouselul.append(img);
            }

            // Wire-up jCarouselLite to the carousel div            
            $("#carousel").jCarouselLite({
                btnNext: "#next",
                btnPrev: "#prev",
                visible: 6
            });
        });
    } else {
        alert("could not get entity id");
    }
}

function showLightbox(e) {
    //Get clicked link href
    var imageData = e.children[0].src;
    
    e.document.parentWindow.frameElement.height = MAXIMIZED_HEIGHT;
    e.document.parentWindow.frameElement.style.height = MAXIMIZED_HEIGHT;

    /* 	
    If the lightbox window HTML already exists in document, 
    change the img src to to match the href of whatever link was clicked
		
    If the lightbox window HTML doesn't exists, create it and insert it.
    (This will only happen the first time around)
    */

    if ($('#lightbox').length > 0) { // #lightbox exists

        //place href as img src value
        $('#content').html('<img src="' + imageData + '" />');

        //show lightbox window - you could use .show('fast') for a transition
        $('#lightbox').show();
    }

    else { //#lightbox does not exist - create and insert (runs 1st time only)

        //create HTML markup for lightbox window
        var lightbox =
			'<div id="lightbox">' +
				'<p>Click to close</p>' +
				'<div id="content">' + //insert clicked link's href into img src
					'<img src="' + imageData + '" />' +
				'</div>' +
			'</div>';

        //insert lightbox HTML into page
        $('body').append(lightbox);
    }
}


$(document).ready(function ($) {
    this.parentWindow.frameElement.height = MINIMIZED_HEIGHT;
    this.parentWindow.frameElement.style.height = MINIMIZED_HEIGHT;
    
    loadImages();

    //Click anywhere on the page to get rid of lightbox window
    $('#lightbox').live('click', function () { //must use live, as the lightbox element is inserted into the DOM
        $('#lightbox')[0].document.parentWindow.frameElement.height = MINIMIZED_HEIGHT;
        $('#lightbox')[0].document.parentWindow.frameElement.style.height = MINIMIZED_HEIGHT;

        $('#lightbox').hide();

    });
});

lightbox.css

body {
	margin:0; 
	padding:0; 
	background:#efefef;
    font-family: Segoe UI, Tahoma, Arial; 
    font-size: 11px;
	text-align:center; /* center div in IE 
	for ie div centering, reset in carousel  */
}
#carousel {
	width:600px; 
	margin:0 auto; 
	border-radius:0 0 5px 5px;
	-moz-border-radius:0 0 5px 5px;
	-webkit-border-radius: 0 0 5px 5px;
	background:#fff; 
	border:1px solid #ccc;
    padding: 10px 10px 10px 10px;
	border-top:none; 
	box-shadow:0 0 5px #ccc;
	-moz-box-shadow:0 0 5px #ccc;
	-webkit-box-shadow:0 0 5px #ccc;
	text-align:left;
}
#lightbox {
	position:fixed; /* keeps the lightbox window in the current viewport */
	top:0; 
	left:0; 
	width:100%; 
	height:100%; 
	background-color: grey;
	text-align:center;
	z-index:10;
}
#lightbox p {
	text-align:right; 
	color:#fff;
    margin-top: 0px;
    margin-bottom: 0px;
	margin-right:20px; 
	font-size:12px;
}
#lightbox img {
	box-shadow:0 0 25px #111;
    border: whitesmoke 2pt solid;
	max-width: 500px;
    max-height: 500px;
}

Cheers – Sy

Advertisements

4 thoughts on “CRM 2011: Image Viewer (Image Carousel + Lightbox)

  1. Hi,

    Which version of your Internet Explorer? I did something similar using embedded image, It worked in Internet Explorer 9 but in Internet Explorer 8 it did not work.

  2. Can’t see how this could work. Your example show a label for ‘upload new picture’ and 2 buttons for Browse and Upload, but nowhere in this code is that written.

    1. Hi Kyle,

      I originally planned to do an upload function, but since then have abandoned the idea since users can simply upload an image using attachment ribbon button.

      Apologies for the confusion. I’ll put a note on the post.

      Sy

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s