English | Español | Deutsch | Francais



disponible (v.0.3)

Le plugin gambarize

le plus simple possibilité de créer une gallerie avec des images

DEMO

loading...

Examples


explorer des examples

Features

Basic setup

see basic example as demo
append to head (between your <head> tags):
		
		<!-- ****** append stylesheet of gambarize ****** -->
		<link rel="stylesheet" href="http://gambarize.klickagent.ch/cdn/0.3/style/gambarize.css.php?noreset=1" type="text/css" media="all" /> 
		
							 	
					<!-- ****** init gambarize scripts ****** -->
					<script type="text/javascript">
					
						<!-- IE 8 bugfix -->
						window.gambarize_instance='';
						window.onload = function(){
						           gambarize_instance = new gambarize();  
						           gambarize_instance.init({}); /* {} is for options => see examples */
						};		
					</script>

append to body (between your <body> tags):
		<!-- ****** adding gambarize scripts ***** -->
		<!-- add jquery, if not already loaded somewhere else on your website: -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
			
		<!-- add the cdn/0.3 of gambarize plugin -->
		<script src="http://gambarize.klickagent.ch/cdn/0.3/js/gambarize.js" type="text/javascript"></script>

Code for DEMO




append to head (between your <head> tags):
		
		<!-- ****** append stylesheet of gambarize ****** -->
		<link rel="stylesheet" href="http://gambarize.klickagent.ch/cdn/0.3/style/gambarize.css.php?noreset=1" type="text/css" media="all" /> 
		
		
		<!-- ****** init gambarize scripts ****** -->
		<script type="text/javascript">
		
			<!-- fuckin IE 8 bugfix -->
			window.gambarize_instance='';
						
		
			
		window.onload = function(){	
			gambarize_instance = new gambarize();	
			gambarize_instance.init({
			
				onloadMODE: false,
				fallbackMODE: false,
				icon_albumchooser: true,
				icon_imgchooser: true,
				
				 
				/* close gallery on close button in albumview, otherwise close gallery on click on close button in imageview */
				hideGalleryOnCloseKlick: false,
				
				
				
				content: { 
					source: 'a',
					selector: 'gmbz',
					
					/* ****** (1) ****** */
					/* ****** div where thumbnails will be generated in ****** */
					loadInDiv: 'gambarize_DEMO'
				}
											
			});
		}
</script>

append to body (between your <body> tags):
		 <!-- ****** adding content ****** -->
		 
		 	
	
		<!-- ****** DIV specified in config (1) to show pictures in ****** -->
		<div id="gambarize_DEMO">
			loading...
		</div>

		
		<!-- ****** DEMO content, REPLACE CONTENT OF THIS DIV WITH YOUR PICTURES: ****** -->
		<div id="gambarize_DEMO_content">
		
			<a href="data/album_simple/wave.jpg" data-img-thumb="data/album_simple/_meta/thumb_wave.png" title="Wave, Bali" class="gmbz"></a>
			<a href="data/album_simple/mountains.jpg" data-img-thumb="data/album_simple/_meta/thumb_mountains.png" title="Mountains, Shadow" class="gmbz"></a>
			
			<div class="gmbz" data-title="Album1">
				<div class="gmbz" data-title="Nested">
					<div class="gmbz" data-title="Inner">
							<a href="data/album_simple/wave.jpg" data-img-thumb="data/album_simple/_meta/thumb_wave.png" title="Wave, Bali" class="gmbz"></a>
					</div>
				</div>
				<div class="gmbz" data-title="Empty" data-cover="data/Black-287.png">
				</div>
				<a href="data/album_simple/field.jpg" data-img-thumb="data/album_simple/_meta/thumb_field.png" title="" class="gmbz"></a>
				<a href="data/album_simple/sea.jpg" data-img-thumb="data/album_simple/_meta/thumb_sea.png" title="Sea, Bali" class="gmbz"></a>
			</div>
			
			
			
		</div>
		
		
			    
	    
		<!-- ****** adding gambarize scripts ***** -->
		<!-- add jquery, if not already loaded somewhere else on your website: -->
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
			
		<!-- add the cdn/0.3 of gambarize plugin -->
		<script src="http://gambarize.klickagent.ch/cdn/0.3/js/gambarize.js" type="text/javascript"></script>