Skip to content

Z
zui

易企天创 / zui
11 个月 前同步成功

通知 6
Star 0
Fork 1
Z
zui

体验新版 GitCode，发现更多精彩内容 >>

提交 edadada0 编写于 作者: C Catouse
浏览文件
操作

+ updated lightbox.

上级 5d6e837a
隐藏空白更改
内联 并排
Showing with 416 addition and 153 deletion
dist/css/zui.css
浏览文件 @ edadada0
因为 它太大了无法显示 source diff 。你可以改为 查看blob。
dist/js/zui.min.js
浏览文件 @ edadada0
......@@ -18,6 +18,7 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
// @koala-append "popover.js"
// @koala-append "pager.js"
// @koala-append "tab.js"
// @koala-append "image.ready.js"
// @koala-append "lightbox.js"
// @koala-append "droppable.js"
// @koala-append "dashboard.js"
......@@ -1243,7 +1244,15 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
modal.addClass('modal-loading').toggleClass('fade', options.fade);;
if(options.type == 'ajax')
if(options.type === 'custom' && options['custom'])
{
options['custom']({modal: modal, options: options, element: $e, ready: function()
{
ajustModalPosition(options.position, modal.find('.modal-dialog'));
modal.removeClass('modal-loading');
}});
}
else if(options.type === 'ajax')
{
modal.load(options.url, function()
{
......@@ -1320,7 +1329,7 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
{
var name = 'triggerModal', setting = this.options;
var loc = setting.location;
if($(name).length)
if($('#' + name).length)
{
/* unbind all events */
$(name).off('show.bs.modal shown.bs.modal hide.bs.modal hidden.bs.modal');
......@@ -2200,79 +2209,249 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
}(window.jQuery);
(function($)
/**
* 图片头数据加载就绪事件 - 更快获取图片尺寸
* @version 2011.05.27
* @author TangBin
* @see http://www.planeart.cn/?p=1121
* @param {String} 图片路径
* @param {Function} 尺寸就绪
* @param {Function} 加载完毕 (可选)
* @param {Function} 加载错误 (可选)
* @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () {
alert('size ready: width=' + this.width + '; height=' + this.height);
});
*/
var imgReady = (function () {
var list = [], intervalId = null,
// 用来执行队列
tick = function () {
var i = 0;
for (; i < list.length; i++) {
list[i].end ? list.splice(i--, 1) : list[i]();
};
!list.length && stop();
},
// 停止所有定时器队列
stop = function () {
clearInterval(intervalId);
intervalId = null;
};
return function (url, ready, load, error) {
var onready, width, height, newWidth, newHeight,
img = new Image();
img.src = url;
// 如果图片被缓存，则直接返回缓存数据
if (img.complete) {
ready.call(img);
load && load.call(img);
return;
};
width = img.width;
height = img.height;
// 加载错误后的事件
img.onerror = function () {
error && error.call(img);
onready.end = true;
img = img.onload = img.onerror = null;
};
// 图片尺寸就绪
onready = function () {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight !== height ||
// 如果图片已经在其他地方加载可使用面积检测
newWidth * newHeight > 1024
) {
ready.call(img);
onready.end = true;
};
};
onready();
// 完全加载完毕的事件
img.onload = function () {
// onload在定时器时间差范围内可能比onready快
// 这里进行检查并保证onready优先执行
!onready.end && onready();
load && load.call(img);
// IE gif动画会循环执行onload，置空onload即可
img = img.onload = img.onerror = null;
};
// 加入队列中定期执行
if (!onready.end) {
list.push(onready);
// 无论何时只允许出现一个定时器，减少浏览器性能损耗
if (intervalId === null) intervalId = setInterval(tick, 40);
};
};
})();
/* Lightbox */
+function($, window, document, Math)
{
jQuery.fn.lightbox = function()
"use strict";
if (!$.fn.modalTrigger) throw new Error('modal & modalTrigger requires for lightbox');
if (!imgReady) throw new Error('imgReady requires for lightbox');
var Lightbox = function(element, options)
{
this.$ = $(element);
this.options = this.getOptions(options);
this.init();
};
Lightbox.DEFAULTS =
{
var lightboxId = 0;
$("[data-toggle='lightbox']").each(function(){$(this).attr('data-id',lightboxId++)});
modalTeamplate: '<div class="icon-spinner icon-spin loader"></div><div class="modal-dialog"><button class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button><button class="controller prev"><i class="icon icon-chevron-left"></i></button><button class="controller next"><i class="icon icon-chevron-right"></i></button><img class="lightbox-img" src="{image}" alt="" data-dismiss="modal" /><div class="caption"><div class="content">{caption}<div></div></div>'
}; // default options
$(this).click(function()
Lightbox.prototype.getOptions = function (options)
{
options = $.extend({}, Lightbox.DEFAULTS, this.$.data(), options);
if(!options['image'])
{
// need modal
if (!$.fn.modal) throw new Error('modal requires for lightbox');
var $e = $(this);
options['image'] = this.$.attr('src') || this.$.attr('href')
|| this.$.find('img').attr('src');
this.$.data('image', options['image']);
}
return options;
};
// get image
var imgUrl = $e.attr('data-image') || $e.attr('src') || $e.attr('href')
|| $e.find('img').attr('src');
if(!imgUrl) return false;
Lightbox.prototype.init = function()
{
this.bindEvents();
}
// get caption
// var caption = $e.attr('data-caption') || $e.find('img').attr('title') || $e.attr('title');
Lightbox.prototype.initGroups = function()
{
var groups = this.$.data('groups');
if(!groups)
{
groups = $('[data-toggle="lightbox"][data-group="' + this.options.group + '"], [data-lightbox-group="' + this.options.group + '"]');
this.$.data('groups', groups);
groups.each(function(index)
{
$(this).attr('data-group-index', index);
});
}
this.groups = groups;
this.groupIndex = parseInt(this.$.data('group-index'));
}
// get lightbox modal
if($('#lightboxModal').size() == 0)
Lightbox.prototype.bindEvents = function()
{
var $e = this.$, that = this;
var options = this.options;
if(!options.image) return false;
$e.modalTrigger(
{
type: 'custom',
name: 'lightboxModal',
custom: function(e)
{
$('<div id="lightboxModal" class="modal fade modal-lightbox"><div class="modal-dialog"><button class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button><button class="controller prev"><i class="icon icon-chevron-left"></i></button><button class="controller next"><i class="icon icon-chevron-right"></i></button><img id="lightboxImg" src="#" alt="" data-dismiss="modal" /><div class="caption"></div></div></div>').appendTo('body');
$('#lightboxModal .controller').click(function()
that.initGroups();
var modal = e.modal,
groups = that.groups,
groupIndex = that.groupIndex;
modal.addClass('modal-lightbox')
.html(options.modalTeamplate.format(options))
.toggleClass('lightbox-with-caption', typeof options.caption == 'string')
.removeClass('lightbox-full')
.data('group-index', groupIndex);
var dialog = modal.find('.modal-dialog'),
winWidth = $(window).width();
imgReady(options.image, function()
{
var id = parseInt($('#lightboxModal').attr('data-id')) + ($(this).hasClass('prev') ? -1 : 1);
var e = $('[data-toggle="lightbox"][data-id="' + id + '"]');
if(e)
{
var url = e.attr('data-image') || e.attr('src') || e.attr('href') || e.find('img').attr('src');
if(url)
{
$('#lightboxImg').attr('src', url);
$('#lightboxModal').attr('data-id', id);
dialog.css({width: Math.min(winWidth, this.width), height: 'auto'});
if(winWidth < (this.width + 30)) modal.addClass('lightbox-full');
e.ready();
});
$('#lightboxModal .controller').hide();
if($('[data-toggle="lightbox"][data-id="' + (id - 1) + '"]').length > 0)
$('#lightboxModal .prev').show();
if($('[data-toggle="lightbox"][data-id="' + (id + 1) + '"]').length > 0)
$('#lightboxModal .next').show();
modal.find('.prev').toggleClass('show', groups.filter('[data-group-index="' + (groupIndex - 1) + '"]').length > 0);
modal.find('.next').toggleClass('show', groups.filter('[data-group-index="' + (groupIndex + 1) + '"]').length > 0);
$('#lightboxModal .modal-dialog').width(e.attr('data-width') || 'auto').height(e.attr('data-height') || 'auto').css('margin-top', Math.max(0, ($(window).height() - e.attr('data-height'))/2));
}
modal.find('.controller').click(function()
{
var $this = $(this);
var id = modal.data('group-index') + ($this.hasClass('prev') ? -1 : 1);
var $e = groups.filter('[data-group-index="' + id + '"]');
if($e.length)
{
var image = $e.data('image'),
caption = $e.data('caption');
modal.addClass('modal-loading')
.data('group-index', id)
.toggleClass('lightbox-with-caption', typeof caption == 'string')
.removeClass('lightbox-full');
modal.find('.lightbox-img').attr('src', image);
winWidth = $(window).width();
imgReady(image, function()
{
dialog.css({width: Math.min(winWidth, this.width), height: 'auto'});
if(winWidth < (this.width + 30)) modal.addClass('lightbox-full');
e.ready();
});
}
modal.find('.prev').toggleClass('show', groups.filter('[data-group-index="' + (id - 1) + '"]').length > 0);
modal.find('.next').toggleClass('show', groups.filter('[data-group-index="' + (id + 1) + '"]').length > 0);
return false;
});
}
});
}
var id = parseInt($e.attr('data-id'));
var img = $('#lightboxImg');
var lightboxModal = $('#lightboxModal');
// set current id
lightboxModal.find('.controller').hide();
lightboxModal.attr('data-id', id);
if($('[data-toggle="lightbox"][data-id="' + (id - 1) + '"]').length > 0) lightboxModal.find('.prev').show();
if($('[data-toggle="lightbox"][data-id="' + (id + 1) + '"]').length > 0) lightboxModal.find('.next').show();
lightboxModal.find('.modal-dialog').width($e.attr('data-width') || 'auto').height($e.attr('data-height') || 'auto').css('margin-top', Math.max(0, ($(window).height() - $e.attr('data-height'))/2));
$.fn.lightbox = function(option)
{
var defaultGroup = 'group' + (new Date()).getTime();
return this.each(function()
{
var $this = $(this);
// update modal content
img.attr('src', imgUrl);
// if(caption && caption.length > 0) lightboxModal.addClass('with-caption').find('.caption').text(caption);
// else lightboxModal.find('.caption').remove();
var options = typeof option == 'object' && option;
if(typeof options == 'object' && options.group)
{
$this.attr('data-lightbox-group', options.group);
}
else if($this.data('group'))
{
$this.attr('data-lightbox-group', $this.data('group'));
}
else
{
$this.attr('data-lightbox-group', defaultGroup);
}
$this.data('group', $this.data('lightbox-group'));
// show modal
lightboxModal.modal();
var data = $this.data('zui.lightbox');
if (!data) $this.data('zui.lightbox', (data = new Lightbox(this, options)));
return false;
});
if (typeof option == 'string') data[option]();
})
};
})(jQuery);
$.fn.lightbox.Constructor = Lightbox;
$(function()
{
$('[data-toggle="lightbox"]').lightbox();
});
}(jQuery,window,document,Math);
/* Droppable */
......
example/lightbox.html
浏览文件 @ edadada0
......@@ -6,12 +6,10 @@
<link href="../assets/css/example.css" rel="stylesheet">
<link href="../dist/css/theme.css" rel="stylesheet">
<script src="../dist/js/jquery.js"></script>
<script src="../src/js/debug.js"></script>
<script src="../src/js/modal.js"></script>
<script src="../src/js/lightbox.js"></script>
<script src="../dist/js/zui.min.js"></script>
<script>
$(function () {
$("[data-toggle='lightbox']").lightbox();
// $("[data-toggle='lightbox']").lightbox();
});
</script>
......@@ -87,8 +85,8 @@
<h4>基本类型</h4>
<div class="segment">
<a href="img/img1.png" title="这是lightbox的示例" data-toggle="lightbox" data-width='1075' data-height='554'><img src="img/img1.png" alt=""></a>
<a href="img/img2.jpg" title="这是lightbox的示例" data-toggle="lightbox" data-width='757' data-height='571'><img src="img/img2.jpg" alt=""></a>
<a href="img/img1.png" title="这是lightbox的示例" data-toggle="lightbox" data-caption='fdsafsdafdsafsd'><img src="img/img1.png" alt=""></a>
<a href="img/img2.jpg" title="这是lightbox的示例" data-toggle="lightbox"><img src="img/img2.jpg" alt=""></a>
</div>
</section>
</article>
......
src/js/lightbox.js
浏览文件 @ edadada0
(function($)
/* Lightbox */
+function($, window, document, Math)
{
jQuery.fn.lightbox = function()
"use strict";
if (!$.fn.modalTrigger) throw new Error('modal & modalTrigger requires for lightbox');
if (!imgReady) throw new Error('imgReady requires for lightbox');
var Lightbox = function(element, options)
{
var lightboxId = 0;
$("[data-toggle='lightbox']").each(function(){$(this).attr('data-id',lightboxId++)});
this.$ = $(element);
this.options = this.getOptions(options);
$(this).click(function()
{
// need modal
if (!$.fn.modal) throw new Error('modal requires for lightbox');
this.init();
};
var $e = $(this);
Lightbox.DEFAULTS =
{
modalTeamplate: '<div class="icon-spinner icon-spin loader"></div><div class="modal-dialog"><button class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button><button class="controller prev"><i class="icon icon-chevron-left"></i></button><button class="controller next"><i class="icon icon-chevron-right"></i></button><img class="lightbox-img" src="{image}" alt="" data-dismiss="modal" /><div class="caption"><div class="content">{caption}<div></div></div>'
}; // default options
Lightbox.prototype.getOptions = function (options)
{
options = $.extend({}, Lightbox.DEFAULTS, this.$.data(), options);
if(!options['image'])
{
options['image'] = this.$.attr('src') || this.$.attr('href')
|| this.$.find('img').attr('src');
this.$.data('image', options['image']);
}
return options;
};
// get image
var imgUrl = $e.attr('data-image') || $e.attr('src') || $e.attr('href')
|| $e.find('img').attr('src');
if(!imgUrl) return false;
Lightbox.prototype.init = function()
{
this.bindEvents();
}
// get caption
// var caption = $e.attr('data-caption') || $e.find('img').attr('title') || $e.attr('title');
Lightbox.prototype.initGroups = function()
{
var groups = this.$.data('groups');
if(!groups)
{
groups = $('[data-toggle="lightbox"][data-group="' + this.options.group + '"], [data-lightbox-group="' + this.options.group + '"]');
this.$.data('groups', groups);
groups.each(function(index)
{
$(this).attr('data-group-index', index);
});
}
this.groups = groups;
this.groupIndex = parseInt(this.$.data('group-index'));
}
// get lightbox modal
if($('#lightboxModal').size() == 0)
Lightbox.prototype.bindEvents = function()
{
var $e = this.$, that = this;
var options = this.options;
if(!options.image) return false;
$e.modalTrigger(
{
type: 'custom',
name: 'lightboxModal',
custom: function(e)
{
$('<div id="lightboxModal" class="modal fade modal-lightbox"><div class="modal-dialog"><button class="close" data-dismiss="modal" aria-hidden="true"><i class="icon-remove"></i></button><button class="controller prev"><i class="icon icon-chevron-left"></i></button><button class="controller next"><i class="icon icon-chevron-right"></i></button><img id="lightboxImg" src="#" alt="" data-dismiss="modal" /><div class="caption"></div></div></div>').appendTo('body');
$('#lightboxModal .controller').click(function()
that.initGroups();
var modal = e.modal,
groups = that.groups,
groupIndex = that.groupIndex;
modal.addClass('modal-lightbox')
.html(options.modalTeamplate.format(options))
.toggleClass('lightbox-with-caption', typeof options.caption == 'string')
.removeClass('lightbox-full')
.data('group-index', groupIndex);
var dialog = modal.find('.modal-dialog'),
winWidth = $(window).width();
imgReady(options.image, function()
{
var id = parseInt($('#lightboxModal').attr('data-id')) + ($(this).hasClass('prev') ? -1 : 1);
var e = $('[data-toggle="lightbox"][data-id="' + id + '"]');
if(e)
{
var url = e.attr('data-image') || e.attr('src') || e.attr('href') || e.find('img').attr('src');
if(url)
{
$('#lightboxImg').attr('src', url);
$('#lightboxModal').attr('data-id', id);
dialog.css({width: Math.min(winWidth, this.width), height: 'auto'});
if(winWidth < (this.width + 30)) modal.addClass('lightbox-full');
e.ready();
});
$('#lightboxModal .controller').hide();
if($('[data-toggle="lightbox"][data-id="' + (id - 1) + '"]').length > 0)
$('#lightboxModal .prev').show();
if($('[data-toggle="lightbox"][data-id="' + (id + 1) + '"]').length > 0)
$('#lightboxModal .next').show();
modal.find('.prev').toggleClass('show', groups.filter('[data-group-index="' + (groupIndex - 1) + '"]').length > 0);
modal.find('.next').toggleClass('show', groups.filter('[data-group-index="' + (groupIndex + 1) + '"]').length > 0);
$('#lightboxModal .modal-dialog').width(e.attr('data-width') || 'auto').height(e.attr('data-height') || 'auto').css('margin-top', Math.max(0, ($(window).height() - e.attr('data-height'))/2));
}
modal.find('.controller').click(function()
{
var $this = $(this);
var id = modal.data('group-index') + ($this.hasClass('prev') ? -1 : 1);
var $e = groups.filter('[data-group-index="' + id + '"]');
if($e.length)
{
var image = $e.data('image'),
caption = $e.data('caption');
modal.addClass('modal-loading')
.data('group-index', id)
.toggleClass('lightbox-with-caption', typeof caption == 'string')
.removeClass('lightbox-full');
modal.find('.lightbox-img').attr('src', image);
winWidth = $(window).width();
imgReady(image, function()
{
dialog.css({width: Math.min(winWidth, this.width), height: 'auto'});
if(winWidth < (this.width + 30)) modal.addClass('lightbox-full');
e.ready();
});
}
modal.find('.prev').toggleClass('show', groups.filter('[data-group-index="' + (id - 1) + '"]').length > 0);
modal.find('.next').toggleClass('show', groups.filter('[data-group-index="' + (id + 1) + '"]').length > 0);
return false;
});
}
});
}
var id = parseInt($e.attr('data-id'));
var img = $('#lightboxImg');
var lightboxModal = $('#lightboxModal');
// set current id
lightboxModal.find('.controller').hide();
lightboxModal.attr('data-id', id);
if($('[data-toggle="lightbox"][data-id="' + (id - 1) + '"]').length > 0) lightboxModal.find('.prev').show();
if($('[data-toggle="lightbox"][data-id="' + (id + 1) + '"]').length > 0) lightboxModal.find('.next').show();
lightboxModal.find('.modal-dialog').width($e.attr('data-width') || 'auto').height($e.attr('data-height') || 'auto').css('margin-top', Math.max(0, ($(window).height() - $e.attr('data-height'))/2));
$.fn.lightbox = function(option)
{
var defaultGroup = 'group' + (new Date()).getTime();
return this.each(function()
{
var $this = $(this);
// update modal content
img.attr('src', imgUrl);
// if(caption && caption.length > 0) lightboxModal.addClass('with-caption').find('.caption').text(caption);
// else lightboxModal.find('.caption').remove();
var options = typeof option == 'object' && option;
if(typeof options == 'object' && options.group)
{
$this.attr('data-lightbox-group', options.group);
}
else if($this.data('group'))
{
$this.attr('data-lightbox-group', $this.data('group'));
}
else
{
$this.attr('data-lightbox-group', defaultGroup);
}
$this.data('group', $this.data('lightbox-group'));
// show modal
lightboxModal.modal();
var data = $this.data('zui.lightbox');
if (!data) $this.data('zui.lightbox', (data = new Lightbox(this, options)));
return false;
});
if (typeof option == 'string') data[option]();
})
};
})(jQuery);
$.fn.lightbox.Constructor = Lightbox;
$(function()
{
$('[data-toggle="lightbox"]').lightbox();
});
}(jQuery,window,document,Math);
src/js/zui.js
浏览文件 @ edadada0
......@@ -18,6 +18,7 @@ if (typeof jQuery === "undefined") { throw new Error("ZUI requires jQuery") }
// @koala-append "popover.js"
// @koala-append "pager.js"
// @koala-append "tab.js"
// @koala-append "image.ready.js"
// @koala-append "lightbox.js"
// @koala-append "droppable.js"
// @koala-append "dashboard.js"
......
src/less/modules/lightbox.less
浏览文件 @ edadada0
#lightboxModal
.modal-lightbox
{
.modal-dialog
{
......@@ -10,6 +10,7 @@
max-width: 100%;
max-height: 100%;
margin-bottom: 0;
.transition();
&:hover,
&:focus
......@@ -25,7 +26,7 @@
.opacity(.9);
> .icon
{
box-shadow:1px 1px 16px rgba(0, 0, 0, 0.5);
box-shadow:1px 1px 16px rgba(0, 0, 0, .5);
}
}
}
......@@ -35,7 +36,6 @@
{
display: block;
font-size: 14px;
line-height: 14px;
text-align: center;
width: 30px;
height: 30px;
......@@ -44,30 +44,33 @@
right: -13px;
top: -15px;
color: #fff;
border: 2px solid #fff;
border: 1px solid #fff;
-webkit-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
.opacity(.9);
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
box-shadow: 0 5px 5px rgba(0, 0, 0, .5);
}
&.lightbox-full .close {right: 10px; top: 10px;}
.controller
{
display: block;
display: none;
height: 100%;
line-height: 100%;
top: 0;
position: absolute;
cursor: pointer;
font-size: 30px;
padding: 10px 20px;
color: #fff;
background:none;
border: none;
.opacity(0.05);
transition:all 0.4s;
.opacity(.05);
.transition();
&.show {display: block}
> .icon
{
......@@ -80,6 +83,8 @@
height: 50px;
line-height: 50px;
border: 2px solid #fff;
&:before {font-size: 28px;}
}
&:hover
......@@ -97,8 +102,30 @@
right: 0;
}
}
.caption {display: none}
&.lightbox-with-caption
{
.caption
{
display: block;
position: absolute;
width: 100%;
bottom: 0;
padding: 10px 15px;
color: #fff;
background: rgba(0, 0, 0, .15);
text-shadow: 1px 1px 0 rgba(0, 0, 0, .3);
opacity: .5;
text-align: center;
.transition();
}
.modal-dialog:hover .caption {opacity: 1; background: rgba(0, 0, 0, .6);}
}
}
#lightboxImg
.lightbox-img
{
width: inherit;
height: auto;
......@@ -107,30 +134,8 @@
display: block;
padding: 0;
margin: 0 auto;
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
cursor: pointer;
.transition(all,@animation-speed-normal,@animation-type);
.transition();
}
// #lightboxModal.with-caption
// {
// .caption
// {
// position: relative;
// text-align: center;
// margin-top: -30px;
// font-size: 12px;
// white-space: nowrap;
// z-index: 10010;
// color: #777;
// font-weight: bold;
// text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
// .transition(all,@animation-speed-normal,@animation-type);
// }
// #lightboxImg:hover
// {
// border-bottom-width: 40px;
// }
// }
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或