English | Español | Deutsch | Francais



Beispiele

Dynamisch Bilder hinzufügen (html)

Bilder können nach dem generieren der Gallerie noch hinzugefügt werden. Die Bilder werden bei diesem Beispiel vom HTML (DOM) geparsed

Generated Gallery

Add Images to Root
Add new Album to Root and add Images
Add Images to "Empty Album 2"

Add Image to the Root and create a new Album with another image
Add Image to the "Example Album" and create there a new Album with another image inside
Create a new Album, add an Image to it and create a new Album with another image inside

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({
				
				nested: false,
				content: { 
					source: 'a',
					selector: 'gmbz',
					
					loadInDiv: 'gallery'
				}
											
			});
		}
</script>

append to body (between your <body> tags):
		 <!-- ****** adding content ****** -->
		 
		 	
		
		
		<!-- /* This Album adds its content on click on the album */ !-->
		<div data-type="album" data-album-id="emptyalbum" data-title="Is this an empty Album?" class="gmbz" data-album-msg="Not anymore" data-content-url="http://google.com" data-content-class="gmbz2"></div>
		
		<div data-type="album" data-album-id="emptyalbum2" data-title="Empty Album 2" class="gmbz"></div>
		<div data-type="album" data-album-id="examplealbum" data-title="Example Album" class="gmbz"></div>
		
		<a href="data/album_simple/wave.jpg" rel="" title="Wave, Bali" class="gmbz" data-img-hres="data/album_simple/_meta/specials/wave_hres.jpg" data-img-download="data/album_simple/_meta/specials/wave_download.jpg"></a>
		<a href="data/album_simple/sea.jpg" rel="" title="Sea, Bali" class="gmbz" data-img-download="true"></a>
		
		
		
		
		<!-- /* this is the data to be added when opening the Album "Is this an empty Album?" : */ !-->
		<a href="data/album_simple/field.jpg" rel="" title="" class="gmbz2"></a>
		<a href="data/album_simple/mountains.jpg" rel="" title="Mountains, Shadow" class="gmbz2"></a>
		
		<!-- /* this is the data to be added when clicking on the link "Add Images to Root" : */ !-->
		<a href="data/album_simple/field.jpg" rel="" title="" class="rootpics"></a>
		<a href="data/album_simple/mountains.jpg" rel="" title="Mountains, Shadow" class="rootpics"></a>
		
		<!-- /* this is the data to be added when clicking on the link "Add new Album to Root and add Images" : */ !-->
		<a href="data/album_simple/field.jpg" rel="" title="" class="rootNewAlbumPics"></a>
		<a href="data/album_simple/mountains.jpg" rel="" title="Mountains, Shadow" class="rootNewAlbumPics"></a>
		
		<!-- /* this is the data to be added when clicking on the link "Add Images to "Empty Album2 " : */ !-->
		<a href="data/album_simple/field.jpg" rel="" title="" class="addToEmptyAlbum"></a>
		<a href="data/album_simple/mountains.jpg" rel="" title="Mountains, Shadow" class="addToEmptyAlbum"></a>
		
		
		<!-- /* this is the data to be added when clicking on the link "Add Image to the Root and create a new Album with another image" : */ !-->
		<a href="data/album_simple/field.jpg" rel="" title="" class="addRootInclAlbum"></a>
		<a href="data/album_simple/mountains.jpg" rel="new Album created by embedded Data in a tag" title="Mountains, Shadow" class="addRootInclAlbum"></a>
		
		<!-- /* this is the data to be added when clicking on the link "Add Image to the "Example Album" and create there a new Album with another image inside" : */ !-->
		<a href="data/album_simple/field.jpg" rel="" title="" class="addToAlbumInclAlbum"></a>
		<a href="data/album_simple/mountains.jpg" rel="new Album created by embedded Data in a tag" title="Mountains, Shadow" class="addToAlbumInclAlbum"></a>
		
		<!-- /* this is the data to be added when clicking on the link "Add Image to the "Example Album" and create there a new Album with another image inside" : */ !-->
		<a href="data/album_simple/field.jpg" rel="" title="" class="creatingAlbumInclAlbum"></a>
		<a href="data/album_simple/mountains.jpg" rel="new Album created by embedded Data in a tag" title="Mountains, Shadow" class="creatingAlbumInclAlbum"></a>
		
		
		
		
		<div id="gallery">
			loading gallery...
		</div>
	    
	    
	    <a href="javascript:;" onclick="gambarize_instance.loadImages({ content: { source: 'a', selector: 'rootpics', loadInDiv: 'gallery'} });">Add Images to Root</a><br/>
	    
	    <a href="javascript:;" onclick="gambarize_instance.loadImages({ content: { source: 'a', selector: 'rootNewAlbumPics', loadInDiv: 'gallery', newAlbum: 'newImages'} });">Add new Album to Root and add Images</a><br/>
	    
	    <a href="javascript:;" onclick="gambarize_instance.loadImages({ content: { source: 'a', selector: 'addToEmptyAlbum', loadInDiv: 'gallery', addToAlbum: 'emptyalbum2'} });">Add Images to "Empty Album 2"</a><br/>
	    <br/>
	    
	    <a href="javascript:;" onclick="gambarize_instance.loadImages({ content: { source: 'a', selector: 'addRootInclAlbum', loadInDiv: 'gallery'} });">Add Image to the Root and create a new Album with another image</a><br/>
	    
	    <a href="javascript:;" onclick="gambarize_instance.loadImages({ content: { source: 'a', selector: 'addToAlbumInclAlbum', loadInDiv: 'gallery', addToAlbum: 'examplealbum' } });">Add Image to the "Example Album" and create there a new Album with another image inside</a><br/>
	    
	    <a href="javascript:;" onclick="gambarize_instance.loadImages({ content: { source: 'a', selector: 'creatingAlbumInclAlbum', loadInDiv: 'gallery', newAlbum: 'examplealbum2' } });">Create a new Album, add an Image to it and create a new Album with another image inside</a><br/>
	    
	    
	    
		<!-- ****** 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>