English | Español | Deutsch | Francais



Beispiele

Generated Gallery


Download


Code

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({
				
				imgnavigation: 'scale,title,close,download',
				
				baseSelector: {
					'content': { 'parentElement': '#gambarize_contents', 'element': 'a.' },
					'album': { 'parentElement': '#gambarize_albums', 'element': 'div.' }
				},
				
				content: { 
					source: 'a',
					selector: 'gmbz',
					
					loadInDiv: 'gallery'
				}
											
			});
		}
</script>

append to body (between your <body> tags):
		 <!-- ****** adding content ****** -->
		 
		 
<div id="gambarize_albums">
		
		<!-- /*************************************/ -->
		<!--             creating albums             -->
		<!-- /*************************************/ -->

		<!-- /*************************************/ -->
		<!-- creating an album, with a coverpicture: -->
		<!-- /*************************************/ -->
		
		<div data-cover="data/album_tree/holidays/field.jpg" data-title="our nice Holidays" data-album-id="holidays" data-album-fullparentid="" class="gmbz"></div>
		
		
		
		<!-- /******************************************/ -->
		<!-- creating an album, with random coverpicture: -->
		<!-- and adding custom navigation to pictures	  -->
		<!-- /******************************************/ -->
		
		
		<div data-img-nav="nav,scale,random,title,info,close" data-title="2012" data-album-id="2012" data-album-fullparentid="holidays" class="gmbz"></div>
		
		<!-- /***********************************************/ -->
		<!-- creating an album, which only contains subalbums: -->
		<!-- /***********************************************/ -->
		<div data-title="2013" data-album-id="2013" data-album-fullparentid="holidays" class="gmbz"></div>
		
		
		<div data-title="Mountains" data-album-id="mountains" data-album-fullparentid="holidays2013" class="gmbz"></div>
		<div data-title="Water Pictures" data-album-id="water" data-album-fullparentid="holidays2013" class="gmbz"></div>
		
</div>		
		
		
<div id="gambarize_contents">		
		
		<a href="data/album_tree/holidays/field.jpg" data-album-id="holidays2012" class="gmbz"></a>
		<a href="data/album_tree/holidays/water/sunsets/sunset.jpg" title="Sunset on the beach in Java" data-album-id="holidays2012" class="gmbz"></a>
		
		<a href="data/album_tree/holidays/mountains/mountains.jpg" data-album-id="holidays2013mountains" class="gmbz"></a>
	
		<!-- enable downloadable -->
		<a href="data/album_tree/holidays/water/sea.jpg" data-album-id="holidays2013water" class="gmbz cover"></a>
		
		<!-- using other thumb source, specify download image, specify hres image -->
		<a href="data/album_tree/holidays/water/wave.jpg" data-album-id="holidays2013water" class="gmbz" data-img-thumbsrc="data/album_simple/_meta/thumb_wave.png" data-img-download="data/album_simple/_meta/specials/wave_download.jpg" data-img-hres="data/album_simple/_meta/specials/wave_hres.jpg"></a>
</div>	
	
		<div id="gallery">
			loading gallery...
		</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>