fxms-lab


Imger

Galery creator



Exemple





Installation



Get the files




Download Imger 1.4.6





Include script

This method is not recommended since the script must wait all the images to load
You only have to put your images in the div you want to transform in galery


<head>
	<link rel="stylesheet" href="my/link/to/imger.css">
</head>
<body>

	<!--content-->
	
	<!--Recommended on bottom but not forced-->
	<script type="text/javascript" src="my/link/to/imger.js">
</body>




Initialize

See next section form content structure

To initialize the galery you have to wait for the document to load and run the class

You can either:


<head>
	<link rel="stylesheet" href="my/link/to/imger.css">
</head>
<body>

	<!--content-->
	
	<!--Recommended on bottom but not forced-->
	<script type="text/javascript" src="my/link/to/imger.js">
	<script type="text/javascript">
		var myfirstgallery = new Imger("targetID");
		var myothergallery = new Imger(document.getElementsByClassName("gal")[2]);
	</script>
</body>






Data structure



<img> Method

This method is not recommended since the script must wait all the images to load
You only have to put your images in the div you want to transform in galery


# output
<div id="myid">
	<img src="http://myweb.site/img/wallpaper/0ImMkW5.jpg"/>
	<img src="http://myweb.site/img/wallpaper/5SYfUaz.jpg"/>
	<img src="http://myweb.site/img/wallpaper/9PCUhkg.jpg"/>
	<img src="http://myweb.site/img/wallpaper/DYU7hzT.jpg"/>
	<img src="http://myweb.site/img/wallpaper/EK72H3n.jpg"/>
	<img src="http://myweb.site/img/wallpaper/KHDFxPw.jpg"/>
	<img src="http://myweb.site/img/wallpaper/OhVlDlH.jpg"/>
	<img src="http://myweb.site/img/wallpaper/PyFTXiN.jpg"/>
	<img src="http://myweb.site/img/wallpaper/R3TLLAZ.jpg"/>
	<img src="http://myweb.site/img/wallpaper/b46IJ3i.jpg"/>
	<img src="http://myweb.site/img/wallpaper/eByMcNT.jpg"/>
	<img src="http://myweb.site/img/wallpaper/fPXzts1.jpg"/>
	<img src="http://myweb.site/img/wallpaper/smzlKxM.png"/>
	<img src="http://myweb.site/img/wallpaper/t6584Rv.jpg"/>
</div>



JSON Method

The data is inserted in the div you want to transform in galery, it expects some parameters:

Optionnal options are

# Serverside

<div id="myid">
	<script>
		var IMGER_DATA = '<?php echo json_encode($data);?>'
	</script>
</div>

# output
<div id="myid">
	<script type="text/javascript">
		var IMGER_DATA = '[
			{"path":"http:\/\/myweb.site\/img\/wallpaper\/0ImMkW5.jpg","width":1600,"height":967},
			{"path":"http:\/\/myweb.site\/img\/wallpaper\/5SYfUaz.jpg","width":2657,"height":1427},
			{"path":"http:\/\/myweb.site\/img\/wallpaper\/9PCUhkg.jpg","width":800,"height":1094},
			{"path":"http:\/\/myweb.site\/img\/wallpaper\/DYU7hzT.jpg","width":1280,"height":768},
			{"path":"http:\/\/myweb.site\/img\/wallpaper\/EK72H3n.jpg","width":1024,"height":512},
			{"path":"http:\/\/myweb.site\/img\/wallpaper\/KHDFxPw.jpg","width":1280,"height":565},
			{"path":"http:\/\/myweb.site\/img\/wallpaper\/OhVlDlH.jpg","width":1280,"height":553},
			{"path":"http:\/\/myweb.site\/img\/wallpaper\/PyFTXiN.jpg","width":1269,"height":629},
			{"path":"http:\/\/myweb.site\/img\/wallpaper\/R3TLLAZ.jpg","width":1280,"height":570},
			{"path":"http:\/\/myweb.site\/img\/wallpaper\/b46IJ3i.jpg","width":1600,"height":833},
			{"path":"http:\/\/myweb.site\/img\/wallpaper\/eByMcNT.jpg","width":1600,"height":763},
			{"path":"http:\/\/myweb.site\/img\/wallpaper\/fPXzts1.jpg","width":1268,"height":630},
			{"path":"http:\/\/myweb.site\/img\/wallpaper\/smzlKxM.png","width":1920,"height":966},
			{"path":"http:\/\/myweb.site\/img\/wallpaper\/t6584Rv.jpg","width":1308,"height":610}
		]';
	</script>
</div>





Personnalisation



Options

Some options added to the script



<head>
	<link rel="stylesheet" href="my/link/to/imger.css">
</head>
<body>

	<!--content-->

	<script type="text/javascript" src="my/link/to/imger.js">
	<script type="text/javascript">


		var myfirstgallery = new Imger("targetID");

		myfirstgallery.setStyle({

			// Required

			type		: STRING "square | vertical | horizontal",
			size		: INT desired px size of the images,


			// Optionnal

			gutter		: INT px of the separation,
			gutterTop	: NULL | INT px of the separation on top,

			number		: BOOL display number of image,
			round 		: BOOL rounded corners (class style),
			shadow 		: BOOL shadowed boxes (class style),

			showButtons	: BOOL display or not the buttons on top,
			border 		: NULL | INT of border of the image,
			borderColor	: STRING #HEXCOLOR for border,
		});


	</script>
</body>