Beispiele
Generated Gallery
loading gallery...
Download
Code
append to head (between your <head> tags):
<!-- ****** append stylesheet of gambarize ****** -->
<link rel="stylesheet" href="https://projects.klickagent.ch:443/gambarize/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_content', 'element': 'a.' }
},
content: {
source: 'a',
selector: 'gmbz',
loadInDiv: 'gallery'
}
});
}
</script>
append to body (between your <body> tags):
<!-- ****** adding content ****** -->
<div id="gambarize_content">
<!-- /*************************************/ -->
<!-- creating an album, with a coverpicture: -->
<!-- /*************************************/ -->
<a href="data/album_tree/holidays/field.jpg" rel="our nice Holidays" data-album-id="holidays" data-album-fullparentid="" class="gmbz coveronly"></a>
<!-- /******************************************/ -->
<!-- creating an album, with random coverpicture: -->
<!-- and adding custom navigation to pictures -->
<!-- /******************************************/ -->
<a href="data/album_tree/holidays/field.jpg" rel="2012" data-img-nav="nav,scale,random,title,info,close" data-album-id="2012" data-album-fullparentid="holidays" class="gmbz"></a>
<a href="data/album_tree/holidays/water/sunsets/sunset.jpg" title="Sunset on the beach in Java" rel="2012" data-img-nav="nav,scale,random,title,info,close" data-album-id="2012" data-album-fullparentid="holidays" class="gmbz"></a>
<!-- /***********************************************/ -->
<!-- creating an album, which only contains subalbums: -->
<!-- /***********************************************/ -->
<a rel="2013" data-album-id="2013" data-album-fullparentid="holidays" data-type="album" class="gmbz"></a>
<a href="data/album_tree/holidays/mountains/mountains.jpg" rel="mountains" data-album-id="mountains" data-album-fullparentid="holidays2013" class="gmbz"></a>
<!-- /**********************************/ -->
<!-- setting a specific picture as cover: -->
<!-- /**********************************/ -->
<!-- enable downloadable -->
<a href="data/album_tree/holidays/water/sea.jpg" rel="Water Pictures" data-album-id="water" data-album-fullparentid="holidays2013" class="gmbz cover downloadable"></a>
<!-- using other thumb source, specify download image, specify hres image -->
<a href="data/album_tree/holidays/water/wave.jpg" rel="Water Pictures" data-album-id="water" data-album-fullparentid="holidays2013" 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="https://projects.klickagent.ch:443/gambarize/cdn/0.3/js/gambarize.js" type="text/javascript"></script>