<?php // no direct access
defined('_JEXEC') or die('Restricted access'); 
?>
<link rel="stylesheet" href="<?php echo JURI::base()?>modules/mod_quickgallery/colorbox.css" />
<style type="text/css">
#quick-gallery{text-align: center;}
#quick-gallery > h2 {
	text-align: center;
	border-radius: 5px;
	margin-bottom: .3em;
	background-color: #3895D5;
	padding: .2em 0;
	color: #F5F5F5;
	font-weight: normal;
}
#quick-gallery ul {
	list-style: none;
}
#quick-gallery ul li {
	display: inline-block;
	border: 1px solid #ccc;
	margin: 0 0 4px 0;
	padding: 2px;
	background-color: #fff;
}
.gallery{
	display: inline-block;
	height: 140px;
	width: 140px;
	background-repeat: no-repeat;
	background-position: center;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="<?php echo JURI::base()?>modules/mod_quickgallery/jquery.colorbox-min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
(function( $ ) {
$(function() {

	$(".g-position").colorbox({
		rel:'group',
		slideshow:true,
		scalePhotos:true,
		maxWidth:"600px"
	});

});
})(jQuery);
</script>
<?php if($files){ ?>
<div id="quick-gallery">
	<ul>
	<?php
	$rows = (int)$params->get('rows', 4);
	$file_rows = count($files);
	$set_row = $file_rows<$rows ? $file_rows : $rows ;

	for($i=0; $i<$set_row; $i++){
		$img = $files[$i];
		$size = getimagesize($img);
		$height = "";
		if ($size[1]>140) {
			$height = "background-size: auto 140px;";
		}
		?>
		<li>
			<a class="g-position" href="<?php echo JURI::base().$img;?>">
				<div class="gallery" style="background-image: url('<?php echo JURI::base().$img;?>');<?php echo $height?>"></div>
			</a>
			
		</li>
		<?php
	}
	?>
	</ul>
</div>
<?php } ?>