Adobe CQ5.6 Click image to enlarge

Adobe CQ5.6 Click image to enlarge

I'm new to CQ5.6 and am trying to do a basic effect.
I am trying to alter the general Image component in Adobe CQ5.6 to create
an effect similar to jQuery colorbox upon click. Currently, I have added a
checkbox to the Image component to enable the ability to click to enlarge,
but I am unsure of how to proceed.
I want to be able to pull a larger rendition of the selected image from
the DAM to display in the 'Colorbox'.
<%--
Copyright 1997-2008 Day Management AG
Barfuesserplatz 6, 4001 Basel, Switzerland
All Rights Reserved.
This software is the confidential and proprietary information of
Day Management AG, ("Confidential Information"). You shall not
disclose such Confidential Information and shall use it only in
accordance with the terms of the license agreement you entered into
with Day.
==============================================================================
Image component
Draws an image.
--%><%@ page import="com.day.cq.commons.Doctype,
com.day.cq.wcm.api.components.DropTarget,
com.day.cq.wcm.foundation.Image" %><%
%>
<%@include file="/libs/foundation/global.jsp"%>
<%
Image image = new Image(resource);
if (properties.get("enlargeEnabled", false)) {
//pull larger image rendition from DAM
%><a href="<%= image.getPath() %>" /><%
}
//drop target css class = dd prefix + name of the drop target in the
edit config
image.addCssClass(DropTarget.CSS_CLASS_PREFIX + "imageEnlarger");
image.loadStyleData(currentStyle);
image.setSelector(".img"); // use image script
image.setDoctype(Doctype.fromRequest(request));
// add design information if not default (i.e. for reference paras)
if (!currentDesign.equals(resourceDesign)) {
image.setSuffix(currentDesign.getId());
}
String divId = "cq-image-jsp-" + resource.getPath();
%><div id="<%= divId %>"><% image.draw(out); %></div><%
%><cq:text property="jcr:description" placeholder="" tagName="small"
escapeXml="true"/>