Create an isotope gallery with Mura Categories as filters

isotopeCSS.cfm

<!--- if using CFStatic --->
<cf_CacheOMatic key="isotopeCSS">
		#$.static()
			.include('/css/isotope/')
			.renderIncludes('css')#
	</cf_CacheOMatic>

<!--- Static CSS Include --->
<!--- <link rel="stylesheet" href="#$.siteConfig('themeAssetPath')#/css/isotope/isotope.css"> --->

isotopeJS.cfm

<!--- if using CFStatic --->
<cf_CacheOMatic key="isotopeJS">
		#$.static()
			.include('/js/isotope/')
			.renderIncludes('js')#
	</cf_CacheOMatic>

<!--- Static JS Include --->
<!--- <script src="#$.siteConfig('themeAssetPath')#/js/isotope/isotope.js"></script> --->

muraIsotopeGallery.cfm

<!--- Add this as a custom display object, page template, or Extended Attribute handler 
(i.e. display_objects/custom/extensions/dsp_Folder_Portfolio.cfm) --->

<cfoutput>
<!--- Include your isotope CSS include file in the header --->
<cfset $.addToHTMLHeadQueue("#$.siteConfig('themeAssetPath')#/templates/inc/isotopeCSS.cfm")>
<!--- Include your isotope CSS include file in the footer--->
<cfset $.addToHTMLFootQueue("#$.siteConfig('themeAssetPath')#/templates/inc/isotopeJS.cfm")>
<div class="row-fluid">

	<div class="filter-box clearfix"><span id="filter">Filter<i class="icon-sort"></i></span>
		<ul class='sort' id="option">
			<li><a class="active" href="##" data-filter="*">All</a></li>
			<!--- get categories from Mura --->
			<cfset catBean = $.getBean('category').loadBy(name="Portfolio Item")>
			<cfset catFeed = catBean.getKidsQuery()>
			<cfset catList = ValueList(catFeed.name)>
			<cfloop list="#catList#" index="category">
				<li><a href="##" data-filter=".#$.createCSSID(category)#">#category#</a></li>
			</cfloop>
		</ul>
	</div>
	
	<cfset feed=$.content().getContentID()>
	<cfset iterator=$.getBean("content").loadBy(contentid='#feed#').getKidsIterator()>
	
		<cfif iterator.hasNext()>
		<ul class="gallery four_col clearfix">
			<cfloop condition="iterator.hasNext()">
			<cfset item=iterator.next()>
			<cfset categories = item.getCategoriesIterator()>
				<li class="
				<cfif categories.hasNext()>
							<cfloop condition="categories.hasNext()">
							<cfset category=categories.next()>
								#$.createCSSID(category.getName())#
							</cfloop>
					</cfif>"> <a class="hover" href="#item.getURL()#"> <img src="#item.getImageURL()#" alt="" /><span class="plus"></span></a>
					<div class="entry-summary">
						<h4><a href="#item.getURL()#">#item.getTitle()#</a></h4>
						#item.getSummary()#
					</div>
				</li>
			</cfloop>
		</ul>
		</cfif>

</div>

</cfoutput>