PIXEL METRO - PLUGIN JQUERY TO CREATE PHOTO ALBUM

Pixel Metro Pixel Metro is a plugin allow user to create beautiful metro photo album, which had built from JQuery.

Download

Pixel-metro version 1.0 (sourcecode only) : 06/02/2017 : Download

Pixel-metro version 1.0 (sourcecode and demo) : 06/02/2017 : Download

INSTALLATION AND USE

Copy file "jquery-2.2.3.min.js" and "pixel-metro.js" into js folder, file "pixel-metro.css" into css folder of website. After that, open webpage and insert this script in head section:

<head>
   <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>

   <script type="text/javascript" src="js/pixel-metro.js"></script>
   <link rel="stylesheet" href="css/pixel-metro.css" type="text/css" />
</head>
Note: We’re using jquery version 2.2.3 and up, we did not check with older Jquery version.

USE

- Use $([object_name]).pixel_slide(); syntax to create slide with default properties.

- To create slide and set values for properties, use following syntax:

$([object_name]).pixel_metro({
property_1: value_1,
property_2: value_2,
});

Example:

<script type="text/javascript">
	$(".pixel-metro").pixel_metro({
		height:"500px",
		bg_metro:"images/dulieu/bg-metro3.jpg",
		bg_opacity:0.55,
		metro_rows:3,
	});
</script>

Full script:

<section>
		
	<div class="your-css">

		<div class="pixel-metro">
			<div class="content-metro" size-o="normal">
				<div class="metro-sheet">
					<img src="images/album/img01.jpg">
				</div>
				<div class="metro-sheet">
					<img src="images/album/img02.jpg">
				</div>
				<div class="metro-sheet">
					<img src="images/album/img03.jpg">
				</div>
			</div>
			
			<div class="content-metro" size-o="wide">
				<div class="metro-sheet">
					<img src="images/album/img04.jpg">
				</div>
				<div class="metro-sheet">
					<img src="images/album/img05.jpg">
				</div>
			</div>
			
			<div class="content-metro" size-o="small">
				<div class="metro-sheet">
					<img src="images/album/img06.jpg">
				</div>
				<div class="metro-sheet">
					<img src="images/album/img07.jpg">
				</div>
				<div class="metro-sheet">
					<img src="images/album/img08.jpg">
				</div>
			</div>
			
		</div>
		<script type="text/javascript">
			$(".pixel-metro").pixel_metro({
				height:"500px",
				bg_metro:"images/dulieu/bg-metro3.jpg",
				bg_opacity:0.55,
				metro_rows:3,
			});
		</script>

	</div>
</section>

- Each div tag with class name content-metro in div with class name pixel-metro refer to 1 cell of metro grid, and in each div with class name content-metro has some div tags with class name metro-sheet, which is a photo in metro cell. - In div tag with class name metro-sheet has 2 class name options for inside div tag, those are text-metro and icon-metro (refer for content is text or image). - Property size-o in div class name content-metro has 3 options for the size of metro cell

Note: We’re going to develop more options for next version. Now it has only 3 options.

Example:

<div class="content-metro" size-o="normal">
	<div class="metro-sheet">
		<div class="text-metro">
			<p><span class="glyphicon glyphicon-camera"></span></p>
			<p><a href="#">Beautiful natural photo</a></p>
		</div>
	</div>
	<div class="metro-sheet">
		<div class="icon-metro">Demo Icon</div>
	</div>
</div>

Options

Default properties

width:"100%",
height:"100%",
delayTime:5000,
bg_color:"#2d92f4",
txt_color:"#ffffff",
metro_rows:3,
padd_s:6,
padd_box:20,
autoFixHeight:false,
bg_metro:"",
bg_opacity:0.35,

Description

Property Description
width The width of pixel metro, default is 100% equal to the width of parent tag.
height The height of pixel metro, default is 100% equal to the height of parent tag.
delayTime The time in milisecond, after that effects will be done, default value is 5000 (1000=1s).
bg_color The background color of metro cell, default is #2d92f4
txt_color The text color in metro cell, default is #ffffff (white).
metro_rows Number of rows in pixel metro slide, default are 3 rows.
padd_s The distance (padding, in pixel) of metro cells
padd_box The distance (padding, in pixel) of slide edge and metro cells.
autoFixHeight Default is false, if it is set to true, the metro auto adjust the width of metro cells.
bg_metro The background image of metro slide, default is empty string, it can be set to path of an image.
bg_opacity The opacity of background (image or color), it can be a number between 0-1, default value is 0.35.

Leave a reply