Bilder können nach dem generieren der Gallerie noch hinzugefügt werden. Die Bilder werden bei diesem Beispiel vom HTML (DOM) geparsed
<!-- ****** 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({ nested: false, content: { source: 'a', selector: 'gmbz', loadInDiv: 'gallery' } }); } </script>
<!-- ****** 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="https://projects.klickagent.ch:443/gambarize/cdn/0.3/js/gambarize.js" type="text/javascript"></script>