Picturelicious - Image Grid Example Configurations

Quadratic Thumbs in 3 Different Sizes (Default Configuration)

lib/config.php

public static $gridView = array(
	'gridSize' => 64,
	'gridWidth' => 12,
	'borderWidth' => 2,
	'classes' => array(
		'b2' => array( 'width'=>1, 'height'=>1, 'percentage'=>0.60, 'dir'=>'64x64' ),
		'b1' => array( 'width'=>2, 'height'=>2, 'percentage'=>0.35, 'dir'=>'128x128' ),
		'b0' => array( 'width'=>3, 'height'=>3, 'percentage'=>0.05, 'dir'=>'192x192' )
	),
);

media/picturelicious.js

var gridSize = 64;
var gridMinWidth = 6;
var gridWidth = 0;
var grid = null;
var boxDef = {
	'b0': {'width': 3, 'height': 3},
	'b1': {'width': 2, 'height': 2},
	'b2': {'width': 1, 'height': 1}
};

media/styles.css

.b0 {
	width: 192px;
	height: 192px;
}
.b1 {
	width: 128px;
	height: 128px;
}
.b2 {
	width: 64x;
	height: 64px;
}

Large Spacing between Thumbnails

lib/config.php

public static $gridView = array(
	'gridSize' => 88,
	'gridWidth' => 12,
	'borderWidth' => 2,
	'classes' => array(
		'b2' => array( 'width'=>1, 'height'=>1,	'percentage'=>0.6,	'dir'=>'64x64' ),
		'b1' => array( 'width'=>2, 'height'=>2,	'percentage'=>0.35,	'dir'=>'128x128' ),
		'b0' => array( 'width'=>3, 'height'=>3,	'percentage'=>0.05,	'dir'=>'192x192' )
	),
);

media/picturelicious.js

var gridSize = 88;
var gridMinWidth = 6;
var gridWidth = 0;
var grid = null;
var boxDef = {
	'b0': {'width': 3, 'height': 3},
	'b1': {'width': 2, 'height': 2},
	'b2': {'width': 1, 'height': 1}
};

media/styles.css

.b0 {
	padding-left: 32px;
	padding-top: 32px;
	width: 192px;
	height: 192px;
}
.b1 {
	padding-left: 24px;
	padding-top: 24px;
	width: 128px;
	height: 128px;
}
.b2 {
	padding-left: 12px;
	padding-top: 12px;
	width: 64x;
	height: 64px;
}

4 Thumbnail sizes in 4:3 and 2:3 aspect ratios

lib/config.php

public static $gridView = array(
	'gridSize' => 32,
	'gridWidth' => 24,
	'borderWidth' => 2,
	'classes' => array(
		'b3' => array( 'width'=>2, 'height'=>3,	'percentage'=>0.58,	'dir'=>'64x96' ),
		'b2' => array( 'width'=>4, 'height'=>3,	'percentage'=>0.3,	'dir'=>'128x96' ),
		'b1' => array( 'width'=>4, 'height'=>6,	'percentage'=>0.10,	'dir'=>'128x192' ),
		'b0' => array( 'width'=>6, 'height'=>9,	'percentage'=>0.02,	'dir'=>'192x288' )
	),
);

media/picturelicious.js

var gridSize = 32;
var gridMinWidth = 6;
var gridWidth = 0;
var grid = null;
var boxDef = {
	'b0': {'width': 6, 'height': 9},
	'b1': {'width': 4, 'height': 6},
	'b2': {'width': 4, 'height': 3}
	'b3': {'width': 2, 'height': 3}
};

media/styles.css

.b0 {
	width: 192px;
	height: 288px;
}
.b1 {
	width: 128px;
	height: 192px;
}
.b2 {
	width: 128px;
	height: 96px;
}
.b3 {
	width: 64px;
	height: 96px;
}