English | Español | Deutsch | Francais



Beispiele

Generated Gallery

loading...

Download


Code

append to head (between your <head> tags):
		
		<!-- ****** append stylesheet of gambarize ****** -->

	<!-- MAKRE SURE TO INCLUDE THE THEME CSS -->
	<link rel="stylesheet" href="http://gambarize.klickagent.ch/cdn/0.3/style/themes/classic/style.css.php"/>

		<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,
		                 
		                styleTheme: 'classic', 
		                 
		                /*keepThumbRatio: false,
		                keepThumbRatioAlbum: false, */
		                 
		                /* 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/singapur.jpg" title="Singapur" 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">
		        	<a href="data/album_simple/sunset.jpg" data-img-thumb="data/album_simple/_meta/thumb_sunset.png" title="" class="gmbz"></a>
		        	
		        	
		            <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>
		        <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>