GitHub - csangani/Mosaic: Mosaic is a flexible javascript framework for creating dynamic and interactive content galleries.

csangani / Mosaic Public
Notifications You must be signed in to change notification settings
Fork 0
Star 0
Mosaic is a flexible javascript framework for creating dynamic and interactive content galleries.
Notifications
Name		Name	Last commit message	Last commit date
Latest commit History 7 Commits
css		css
images		images
js		js
LICENSE		LICENSE
README		README
Repository files navigation

Mosaic
======

Mosaic is a flexible javascript framework for creating dynamic and interactive content galleries. 

Installation
------------

1. Copy the following files and folders to your website root directory:
	a. mosaic.js
	b. mosaic.css
	c. mosaic.style.css
	d. jquery.mousewheel.js
	e. images
	
2. Include jQuery and jQuery UI in your website. For more information, visit http://www.jquery.com.

3. Add the following code to your header:
	<script src="jquery.mousewheel.js" type="text/javascript"></script>
	<script src="mosaic.js" type="text/javascript"></script>
	<link href="mosaic.css" rel="stylesheet" type="text/css">
	<link href="mosaic.style.css" rel="stylesheet" type="text/css">
	
4. Set up your content in the following manner:
	<div id="mosaic-target"></div>
	<ul id="mosaic-source">
		<li class="mosaic-cell">..</li>
		<li class="mosaic-cell">..</li>
		<li class="mosaic-cell">..</li>
		<li class="mosaic-cell">..</li>
		.
		.
	</ul>
5. Insert the following JavaScript in your header:
	<script type="text/javascript">
	$(document).ready(function() {
		$('#mosaic-target').mosaic({
			source: $('#mosaic-source'),
		});
	});


Parameters
----------

Parameters passed to the $().mosaic() function can contain the following values:


#	Parameter		Default		Description

1	source			this		Use this jQuery object as a context to find cells.
2	cell			'.mosaic-cell'	Use this selector to search for cells in the source object.	
3	width			null		Width of grid in pixels, or null for auto-width.
4	height			400			Height of grid in pixels.
5	columns			3			Number of columns in grid.
6	min_rows		2			Minimum visible rows in grid per column.
7	max_rows		3			Maximum visible rows in grid per column.
8	strict_grid		false		true, if height of all rows should be equal.
9	spacing			1			Space between cells, in pixels.
10	interval		2000		Interval between animations, in milliseconds.
11	speed			500			Duration of animations, in milliseconds.
12	easing			'swing'		Animation easing. Include jquery.ui to use option.
							Available options:
								[linear] | [swing] | [ease] [In|Out|InOut] [Quad|Cubic|Quart|Quint|Expo|Sine|Circ|Elastic|Back|Bounce]
13	remove_source		true		Remove source cells from DOM after grid initialization.
14	alternate_columns	false		true, if consecutive columns cannot have the same number of visible rows.
15	orientation		'vertical'	Direction of animation.
							Available options:
								[vertical] | [horizontal]
16	random_columns		true		Select a random column for next animation cycle.
17	pause_animation		false		Pause a column's animation on mouseenter.
18 	navigation_buttons	'proximity'	Display column navigation buttons.
							Available options:
								[always] | [proximity] | [never]
19	autoplay		true		Play animation on deployment.
20	loop_type		'reverse'	Select whether to reverse the loop on reaching the end, or rewind. None if no looping.
							Available options:
								[reverse] | [rewind] | [none]
21	column_scroll		true		Navigate columns using the scroll wheel.

Sample Code
-----------

<!DOCTYPE html>
<html>
	<head>
		<script src="jquery.js" type="text/javascript"></script>
		<script src="jquery.ui.js" type="text/javascript"></script>
		<script src="jquery.mousewheel.js" type="text/javascript"></script>
		<script src="mosaic.js" type="text/javascript"></script>
		<link href="mosaic.css" rel="stylesheet" type="text/css">
		<link href="mosaic-style.css" rel="stylesheet" type="text/css">
		<script type="text/javascript">
			$(document).ready(function() {
				$('#mosaic-target').mosaic({
					source: $('#mosaic-source'),
					width: 900,
					height: 400,
					columns: 3,
					min_rows: 1,
					max_rows: 2,
					speed: 500,
					alternate_columns: true,
					easing: 'easeInOutQuart',
					pause_animation: true,
					loop_type: 'rewind',
					navigation_buttons: 'always'
				});
			});
		</script>
	</head>
	<body>
		<div id="mosaic-target"></div>
		<ul id="mosaic-source" style="display:none">
			<li class="mosaic-cell">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			</li>
			<li class="mosaic-cell">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			</li>
			<li class="mosaic-cell">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			</li>
			<li class="mosaic-cell">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			</li>
			<li class="mosaic-cell">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			</li>
			<li class="mosaic-cell">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			</li>
			<li class="mosaic-cell">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			</li>
			<li class="mosaic-cell">
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
			</li>
		</ul>
	</body>
</html>

Mosaic Gallery
==============

Installation
------------

1. Install Mosaic.

2. Add the following code to your header:
	<link href="mosaic.gallery.css" rel="stylesheet" type="text/css">
	<link href="mosaic.gallery.style.css" rel="stylesheet" type="text/css">
	<script src="mosaic.gallery.js" type="text/javascript"></script>

3. Add the following code to your header:
	<script type="text/javascript">
		$(document).ready(function() {
			$('#mosaic-target').mosaicgallery();
		});
	</script>
	
Parameters
----------

Parameters passed to the $().mosaicgallery() function can contain the following values:


#	Parameter			Default				Description

1	image				'.mosaic-gallery-image'		Selector for <img> object to be used as thumbnail.
2	image_hd			'.mosaic-gallery-image-hd'	Selector for <a> object whose href value points to HD image.
3	title				'.mosaic-gallery-title'		Selector for object whose contents are the title.
4	desc				'.mosaic-gallery-desc'		Selector for object whose contents are the description.
5	url				'.mosaic-gallery-url'		Selector for <a> object whose href value points to the relevant page.
6	scale_image			true				Scale thumbnail to fit the cell.
7	on_click			'lightbox'			Select action on clicking thumbnail.
										Available options:
											[lightbox] | [url]
8	overlay_style			'bottom'			Position of overlay on thumbnail.
										Available options:
											[top] | [bottom] | [left] | [right] | [full]
9	popup_overlay			true				Show full overlay on mouseenter.
10	overlay_title			true				Always show the title, even if the overlay is hidden.
										Not valid for overlay_style: 'full' or 'left' or 'right'.
11	overlay_animation_speed		250				Speed of overlay pop / hide animation.
12	lightbox_overlay		true				Show image information in lightbox.
13	lightbox_overlay_style		'right'				Position of overlay in lightbox.
										Available options:
											[right] | [left]
14	error_image			'images/error.gif'		Location of thumbnail error image.
15	error_image_hd			'images/error-hd.gif'		Location of lightbox error image.
16	lightbox_overlay_width		300				Width of lightbox overlay
17	lightbox_transition_speed	400				Soeed of lightbox transitions.

Sample Code
-----------

<!DOCTYPE html>
<html>
	<head>
		<script src="jquery.js" type="text/javascript"></script>
		<script src="jquery.ui.js" type="text/javascript"></script>
		<script src="jquery.mousewheel.js" type="text/javascript"></script>
		<script src="mosaic.js" type="text/javascript"></script>
		<script src="mosaicgallery.js" type="text/javascript"></script>
		<link href="mosaic.css" rel="stylesheet" type="text/css">
		<link href="mosaic-style.css" rel="stylesheet" type="text/css">
		<link href="mosaicgallery.css" rel="stylesheet" type="text/css">
		<link href="mosaicgallery-style.css" rel="stylesheet" type="text/css">
		<script type="text/javascript">
			$(document).ready(function () {
				$('#mosaic-grid-target').mosaic({
					source: $('#mosaic-grid-source'),
					width: 1000,
					height: 800,
					min_rows: 1,
					max_rows: 2,
					columns: 3,
					speed: 500,
					interval: 2000,
					spacing: 1,
					remove_source: true,
					alternate_columns: true,
					orientation: 'horizontal',
					easing: 'easeInOutQuart',
					pause_animation: true,
					autoplay: true,
					loop_type: 'reverse',
					random_columns: true
				}).mosaicgallery({
					scale_image: true,
					overlay_style: 'top',
					on_click: 'lightbox',
					overlay_animation_speed: 250,
					lightbox_overlay: true,
					lightbox_overlay_style: 'left',
					lightbox_transition_speed: 250,
					popup_overlay: true,
					overlay_title: true
				});
			});
		</script>
	</head>
	<body>
		<div id="mosaic-grid-target"></div>
		<div id="mosaic-grid-source" style="display: none;">
			<div class="mosaic-cell">
				<img alt="Acura Concept" class="mosaic-gallery-image" src="images/1_thumb.jpg">
				<div class="mosaic-gallery-title">Acura Concept</div>
				<div class="mosaic-gallery-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at nulla
					ac leo elementum mollis. Suspendisse at orci felis. Nulla luctus mi vel
					sapien bibendum volutpat pretium magna cursus. Vestibulum urna sapien,
					porta sit amet tincidunt vehicula, congue nec sapien. In scelerisque nulla
					vitae enim vulputate sed venenatis lectus tincidunt. Nulla facilisi.</div>
				<a class="mosaic-gallery-url" href="http://www.chiragsangani.com"></a>
				<a class="mosaic-gallery-image-hd" href="images/1.jpg"></a>
			</div>
			<div class="mosaic-cell">
				<img alt="Acura Concept" class="mosaic-gallery-image" src="images/2_thumb.jpg">
				<div class="mosaic-gallery-title">Acura Concept</div>
				<a class="mosaic-gallery-url" href="#"></a>
				<a class="mosaic-gallery-image-hd" href="images/2.jpg"></a>
			</div>
			<div class="mosaic-cell">
				<img alt="Acura Concept" class="mosaic-gallery-image" src="images/3_thumb.jpg">
				<div class="mosaic-gallery-title">Acura Concept</div>
				<div class="mosaic-gallery-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at nulla
					ac leo elementum mollis. Suspendisse at orci felis. Nulla luctus mi vel
					sapien bibendum volutpat pretium magna cursus. Vestibulum urna sapien,
					porta sit amet tincidunt vehicula, congue nec sapien. In scelerisque nulla
					vitae enim vulputate sed venenatis lectus tincidunt. Nulla facilisi.</div>
				<a class="mosaic-gallery-url" href="http://www.chiragsangani.com"></a>
				<a class="mosaic-gallery-image-hd" href="images/3.jpg"></a>
			</div>
			<div class="mosaic-cell">
				<img alt="Acura Concept" class="mosaic-gallery-image" src="images/4_thumb.jpg">
				<a class="mosaic-gallery-url" href="http://www.chiragsangani.com"></a>
				<a class="mosaic-gallery-image-hd" href="images/4.jpg"></a>
			</div>
			<div class="mosaic-cell">
				<img alt="Acura Concept" class="mosaic-gallery-image" src="images/5_thumb.jpg">
				<div class="mosaic-gallery-desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras at nulla
					ac leo elementum mollis. Suspendisse at orci felis. Nulla luctus mi vel
					sapien bibendum volutpat pretium magna cursus. Vestibulum urna sapien,
					porta sit amet tincidunt vehicula, congue nec sapien. In scelerisque nulla
					vitae enim vulputate sed venenatis lectus tincidunt. Nulla facilisi.</div>
				<a class="mosaic-gallery-url" href="http://www.chiragsangani.com"></a>
				<a class="mosaic-gallery-image-hd" href="images/5.jpg"></a>
			</div>
		</div>
	</body>
</html>