Multiple Javascript / Mootools Gallery Boilerplate

readme.md

Some of the code is kind of messy, but hopefully it gives you an idea.

For use in https://github.com/iloveitaly/XtLightbox w/GalleryManager

DynamicImage is an image manipulation library written as a Kohana 2 module: https://github.com/iloveitaly/DynamicImage/

The substr() business was to handle a specific issue in the deployment I was dealing with.

The wrapper class and possibly some other other css is part of a bigger production library.

Live Ex: http://prorefinish.com/base/gallery

galleries.js

window.addEvent('domready', function() {
	var galleryLength = <?=$l?>,
		galleryList = [];
	
	for(var a = 0; a < galleryLength; a++) {
		galleryList.push("gallery-" + a);
	}
	
	var galleryManager = new GalleryManager(galleryList, {
		
	});
});

structure.php

<h1>Gallery</h1>
<div id="thumbnail_controls">
	<a href="#" id="prev_button"><img src="/images/lightbox/leftarrow.png" /></a>
	<a href="#" id="next_button"><img src="/images/lightbox/rightarrow.png" /></a>
</div>
<div id="gallery_holder" class="wrapper">
<?
if(!function_exists("sizedPhoto")) {
	function sizedPhoto($photoPath, $thumb = false) {
		return substr($thumb ?
			DynamicImage_Controller::generate_cache(array('src' => $photoPath, 'width' => 50, 'height' => 50, 'maintain_ratio' => 'width', 'filter' => 'c')) : 
			DynamicImage_Controller::generate_cache(array('src' => $photoPath, 'width' => 800, 'height' => 500, 'maintain_ratio' => 'auto'))
		, strlen(DOCROOT) - 1);
	}
}

$l = 0;

foreach($galleries as $galleryInfo):
	echo "<h2>{$galleryInfo['title']}</h2><hr/>";
	echo "<div class=\"wrapper\">";
	
	foreach($galleryInfo['subgalleries'] as $subGalleryInfo):
?>
	<div id='gallery-<?=$l++?>' class='gallery_holder'>
		<div class='picture_holder'>
<?$thumbnailImage = $subGalleryInfo['folder'][0];?>
			<a href="<?=sizedPhoto($thumbnailImage)?>" title="Comment here"><img src="<?=substr(DynamicImage_Controller::generate_cache(array('src' => $thumbnailImage, 'width' => 200, 'height' => 200, 'maintain_ratio' => 'width', 'filter' => 'c')), strlen(DOCROOT) - 1)?>" /></a>
		</div>
		<div class="thumbnail_holder">
			<h4>Viewing Gallery: <?=$subGalleryInfo['title']?></h4>
			<div class='infinite_width'>
<?
// these are the thumbnails
foreach($subGalleryInfo['folder'] as $photo) {
	echo '<a href="'.sizedPhoto($photo).'" title="a comment" class="hidden"><img src="" data-src="'.sizedPhoto($photo, true).'" /></a>';
}
?>
			</div>
		</div>
		<h4><?=$subGalleryInfo['title']?></h4>
	</div>
		<?endforeach;?>
		</div>
<?endforeach;?>
</div>

styles.less

.opacity(@opacity: 0.5) {
	-moz-opacity: @opacity;
	-khtml-opacity: @opacity;
	-webkit-opacity: @opacity;
	opacity: @opacity;
}

#gallery_holder {
	&:first-child {
		margin-top:0;
	}
	
	.gallery_holder {
		padding:10px;
		float:left;
		
		.picture_holder {
			.hidden {
				display:none;
			}
			
			a {
				border-bottom:none;
				
				&:hover {
					border-bottom:none;
					background-color:transparent;
				}
			}
			
			img {
				border: 1px solid #999;
			}
		}
		
		.thumbnail_holder {
			display:none;
			
			position: fixed;
			left:50px;
			top:0;
			width:100%;
			height:57px + 22px;
			overflow:hidden;
			z-index:2;
			
			padding:5px 5px 0 5px;
			
			h4 {
				font-size:15px;
				height:22px;
				margin:0;
				color:white;
				text-shadow: #000 1px 1px 0;
				white-space: nowrap;
			}
			
			.infinite_width {
				width:10000px;
				padding-top:5px;
				height:52px + 22px;
				margin-left:0;
			}
						
			a {
				display:block;
				float: left;
				margin:0 5px;
				
				border: 1px solid darken(#ddd, 20%);
			}
		}		
		
		h4 {
			margin:10px 0 0 0;
		}
	}
}

#thumbnail_controls {
	display:none;
	position:fixed;
	left:0;
	top:22px;
	z-index:2;
	width:100%;
			
	a {
		display:block;		
		color:white;
		text-decoration:none;
		font-size:50px;
		text-shadow: #000 1px 1px 1px;
		padding:18px 15px;
		border-bottom:none;
		
		&:hover, &:visited {
			background-color:transparent;
			border-bottom:none;
			text-decoration:none
		}
	}
	
	#prev_button {
		float:left;
	}
	
	#next_button {
		float:right;
	}
}

#thumbnail_controls.visible {
	display:block;
	.opacity(1);
	.transition(opacity, 0.3s);
}