javascript - bluimp Gallery implementation - HTML nor JS rendered -
i've created simple webpage display images via gallery plugin. after straightforward implementation, page renders no output gallery mark should present.
i using blueimp gallery, , have followed setup instructions here - far 'controls' https://github.com/blueimp/gallery#description
all relevant css, js , img directories have been merged on webpage directory.
markup below:
<!doctype html> <html> <head> <script src="js/blueimp-gallery.min.js" async></script> <script src="js/bootstrap.min.js" async></script> <script src="https://code.jquery.com/jquery-3.1.1.min.js" async></script> <script src="js/script.js" async></script> <link rel="stylesheet" href="css/blueimp-gallery.min.css"> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div id="main"> <div class="navbar-wrapper" style="border: 12px solid black;"> <ul> <li><a href="#">home</a></li> <li><a href="#">about wilhelm reich</a></li> </ul> </div> <br> <br> <br> <br> </div> <!-- gallery lightbox dialog, should child element of document body --> <div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls"> <div class="slides"></div> <h3 class="title"></h3> <a class="prev">‹</a> <a class="next">›</a> <a class="close">×</a> <a class="play-pause"></a> <ol class="indicator"></ol> </div> <div id="links"> <a href="img/1.jpg" title="littleman"></a> <a href="img/2.jpg" title="littleman"></a> <a href="img/3.jpg" title="littleman"></a> </div> <script> document.getelementbyid('links').onclick = function (event) { event = event || window.event; var target = event.target || event.srcelement, link = target.src ? target.parentnode : target, options = {index: link, event: event}, links = this.getelementsbytagname('a'); blueimp.gallery(links, options); }; </script> </body> </html>
this solved adding thumbnail image source markup. although in documentation states optional.
create list of links image files, optionally enclosed thumbnails , add them body of webpage, before including gallery script:
Comments
Post a Comment