The javascript image gallery plugin - gambarize
simply create an image / media gallery with albums on you website using javascript
DEMO
Examples
Browse examples
Features
- Multiple level Albums can be created with ease! supported parsing of different dom structures: nested, embedded or separated
- Can be set up as simple picture viewer also
- Enable "Not yet opened" feature, to mark the not yet visited pictures for every viewer of your gallery
- History can be enable to send Restfull links to friends
- Keyboard navigation
- API for controlling the gallery with custom controls
- Flexible configuration
- Support for multiple galleries per page (multiple instances of plugin possible)
- Support for multiple albums in a single gallery
- Images can be opened in full browser mode or inside a specified div
- Album thumbnail can be rendered inside a specified element in the DOM
- Smart gallery loading after the page is loaded
- Thumbnails are loaded when visible only: on scroll new thumbnails are being loaded
Basic setup
see basic example as demo
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">
<!-- 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="https://projects.klickagent.ch:443/gambarize/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="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({
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="https://projects.klickagent.ch:443/gambarize/cdn/0.3/js/gambarize.js" type="text/javascript"></script>
