Mura CMS : This is an example of creating a custom Gallery in Mura CMS.

muraCustomGallery.cfm

<!---
	1) Create a directory called 'gallery' under either:
		a) /{SiteID}/includes/display_objects/custom/gallery/
		OR
		b) /{SiteID}/includes/themes/{ThemeName}/display_objects/gallery/

	2) Add an index.cfm file to the above directory, and then place this code in it.
--->
<cfscript>
	$.loadShadowboxJS();
	itKids = $.content().getKidsIterator();
</cfscript>
<cfoutput>
	<cfif itKids.hasNext()>
		<cfloop condition="itKids.hasNext()">
			<cfset item = itKids.next() />
			<cfif item.hasImage()>
				<div class="gallery-image-wrapper">
					<a class="gallery-image-link" href="#item.getImageURL()#" rel="shadowbox[My Gallery];" title="#HTMLEditFormat(item.getMenuTitle())#">
						<img class="gallery-image" src="#item.getImageURL(size='medium')#" alt="#HTMLEditFormat(item.getMenuTitle())#" />
						<!--- Just for fun --->
						<div class="gallery-text">
							#HTMLEditFormat(item.getMenuTitle())#
						</div>
					</a>
				</div>
			</cfif>
		</cfloop>
	<cfelse>
		<div class="alert alert-info">
			This Gallery is empty.
		</div>
	</cfif>
</cfoutput>

<!--- Optional CSS Styling Fun --->
<style>
.gallery-image-wrapper {
	float: left;
	width: auto;
	margin: 0 1em 1em 0;
	border: 8px solid white;
	box-shadow: 0px 0px 12px #666;
	position: relative;
}
.gallery-text {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #333;
	color: white;
	padding: 5px;
	font-size: 1.5em;
	font-weight: bold;
	display: none;
}
.gallery-image-link:hover .gallery-text {
	display: block;
}
</style>

Thanks for the example, how do you actually implement this within the CMS?