1、新建html文档。
2、准备好需要用到的图标。
3、书写hmtl代码。<div class="container"> <h1 class="page-title">示例演示 | Galpop Image Gallery Popup</h1> <div class="row"> <div class="col-md-12"> <h2 id="single-head">1、单张图片</h2> <p>Just bind galpop to the anchor link.</p> <div class="gallery-wrapper"> <a class="galpop-single" href="images/gallery/large/apocalypse.jpg"> <img src="images/gallery/thumbs/apocalypse.jpg" class="img-thumbnail" alt="An apocalyptic Earth." /> </a> </div> <h2 id="single-head">2、多张图片</h2> <p>Bind a series of images with the same "data-galpop-group" attribute value.</p> <div class="gallery-wrapper"> <a class="galpop-multiple" data-galpop-group="multiple" href="images/gallery/large/apocalypse.jpg"><img src="images/gallery/thumbs/apocalypse.jpg" class="img-thumbnail" alt="An apocalyptic Earth." /></a>
4、书写css代码。body, html { font-size: 100%; padding: 0; margin: 0; }body { background: #494A5F; color: #D5D6E2; font-weight: 500; font-size: 1.05em; font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial, sans-serif; }
5、书写并添加js代码。<script src="js/jquery-1.11.0.min.js" ></script><script src="js/jquery.galpop.min.js"></script><script > $(document).ready(function() { $('.galpop-single').galpop(); $('.galpop-multiple').galpop(); $('.galpop-info').galpop(); var callback = function() { var wrapper = $('#galpop-wrapper'); var info = $('#galpop-info'); var count = wrapper.data('count'); var index = wrapper.data('index'); var current = index + 1; var string = 'Image '+ current +' of '+ count; info.append('<p>'+ string +'</p>').fadeIn(); }; $('.galpop-callback').galpop({ callback: callback }); $('.manual-open').change(function(e) { var image = $(this).val(); if (image) { var settings = {}; $.fn.galpop('openBox',settings,image); } }); $('.manual-open-group').change(function(e) { var v = $(this).val(); var images = [ 'images/gallery/large/apocalypse.jpg', 'images/gallery/large/vintage.jpg', 'images/gallery/large/magicLake.jpg', 'images/gallery/large/underwater.jpg', 'images/gallery/large/goodBoy.jpg', 'images/gallery/large/darkroad.jpg', 'images/gallery/large/roadkill.jpg', 'images/gallery/large/wolfMarine.jpg', 'images/gallery/large/alice.jpg', 'images/gallery/large/reflection.jpg', ]; var settings = {}; $.fn.galpop('openBox',settings,images,v); }); $('.click-open-iframe').galpop({ contentType: 'iframe', }); $('.click-open-ajax').galpop({ contentType: 'AJAX', }); });</script>
6、代码整体结构。
7、查看效果。
