GithubHelp home page GithubHelp logo

csangani / mosaic Goto Github PK

View Code? Open in Web Editor NEW
0.0 2.0 0.0 272 KB

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

License: GNU General Public License v2.0

mosaic's Introduction

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>

mosaic's People

Watchers

James Cloos avatar Chirag Sangani avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.