shuffle gallery for MuraCMS

shuffle.cfm

<!---
1. A Gallery class extension titled Shuffle.
 
2. This function needs to be added to the site or theme eventHandler.cfc 
 
3. jquery.shuffle.min.js located in theme js folder and included in the html head file.
 
4. shuffle.css loaded into page head.
--->


<cffunction name="onPageShuffleBodyRender" access="public">
		<cfargument name="$" hint="mura scope" />
		
		<cfscript>
  		var shuffleMarkup = "";
  		var aspect = "masonryItem";
  		var iterator = $.content().getKidsIterator();
  		iterator.setNextN(100);
		</cfscript>
		<cfif iterator.recordCount()>
			<cfsavecontent variable="shuffleMarkup">
			
			<cfoutput>
				<div id="grid" class="shuffle--images row-fluid">
  					 <cfset i = 0 />
					<cfloop from=1 to="#iterator.recordCount()#" index="p">	
						<cfloop condition="#iterator.hasNext()#">
							 
							<cfset item = iterator.next() />
							<cfset i++ />
							
							<figure class="js-item img-item span3 m-span3">
								<a href="#item.getImageUrl(size="large")#">
									<img src="#item.getImageUrl('shuffle2')#" alt="#htmlEditFormat(item.getValue('title'))#"  />
									<!--- <p>#htmlEditFormat(item.getValue('title'))#</p> --->
								</a>
							</figure>
						</cfloop>
					</cfloop>
				</div>
			
			</cfoutput>
			
			<script type="text/javascript">
				var shuffleLayout = (function( $, imagesLoaded ) {

				  var $shuffle = $('.shuffle--images'),
				      $imgs = $shuffle.find('img'),
				      $loader = $('#loader'),
				      sizer = document.getElementById('js-sizer'),
				      imgLoad,
				
				  init = function() {
				
				    // Create a new imagesLoaded instance
				    imgLoad = new imagesLoaded( $imgs.get() );
				
				    // Listen for when all images are done
				    // will be executed even if some images fail
				    imgLoad.on( 'always', onAllImagesFinished );
				  },
				
				  onAllImagesFinished = function( instance ) {
				
				    if ( window.console && window.console.log ) {
				      console.log( instance );
				    }
				
				    // Hide loader
				    $loader.addClass('hidden');
				
				    // Adds visibility: visible;
				    $shuffle.addClass('images-loaded');
				
				    // Initialize shuffle
				    $shuffle.shuffle({
				      // sizer: 250,
				      itemSelector: '.js-item',
				      gutterWidth: 20
				    });
				  };
				
				  return {
				    init: init
				  };
				}( jQuery, window.imagesLoaded ));
				
				$(document).ready(function() {
				  shuffleLayout.init();
				});
			</script> 
			</cfsavecontent>
		<cfelse>
			<cfset shuffleMarkup = "<p>No images exist under this gallery!</p>">
		</cfif>
		
		<cfreturn shuffleMarkup>
	
	</cffunction>

shuffle.css

/* Shuffle.js specific css */
#grid {
	margin: 20px;	
	padding: 10px;
}
.shuffle-wrap {
    position: relative;
}
.shuffle--images {
    position: relative;
    visibility: hidden;
}
.shuffle--images.images-loaded {
    visibility: visible;
}
.shuffle--images .img-item {
    margin-top: 6px;
    margin-bottom: 6px;
    margin-left: 0;
}
/* 
.shuffle--images .img-item img {
    width: 100%;
}
*/
.loader {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -16px;
    margin-left: -16px;
}