jQuery弹窗大图展示代码
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>
Just bind galpop to the anchor link.
<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>
Bind a series of images with the same "data-galpop-group" attribute value.
<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(''+ string +'').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、查看效果。
