Nat*_*han 3 javascript jquery plugins
我正在制作一个名为WowBox的灯箱插件.
现在,如果你想让div弹出,你可以使用:
<a href="#element" rel="wowbox" title="Title">Open #element in WowBox</a>
要弹出一个图像,你可以使用:
<a href="image.jpg" rel="wowbox[img]" title="Caption">Open image in WowBox</a>
现在,这是jQuery:
<script type="text/javascript">
// Copyright © 2011 Nathan Johnson. All Rights Reserved.
jQuery.fn.center = function() {
this.css("position","absolute");
this.css("top", (($(window).height() - this.height()) / 2) + $(window).scrollTop() + "px");
this.css("left", (($(window).width() - this.width()) / 2) + $(window).scrollLeft() + "px");
return this;
}
jQuery.fn.close = function() {
$(this).click(function() {
$('#lb-caption').slideUp(700);
$('#lb-title').slideUp(700);
$('#lightbox-container').fadeOut(600);
$('#lightbox-overlay').delay(100).fadeOut(600);
});
}
function ImgError(source){
var errorMssg = "<div style='color:red;text-align:center;'>Error: The requested image wasn\'t found.</div>";
$(this).hide();
$('#lb-caption').hide();
$('#lb-content').html(errorMssg);
return true;
}
$(document).ready(function() {
$('#lightbox-container').center();
window.onresize = function(event) {
$('#lightbox-container').center();
}
$(document.createElement("div")).attr("id","lightbox-holder").prependTo("body");
//The HTML of WowBox will be placed right after the starting <body> tag once the page is loaded.
$('#lightbox-holder').html(' \
<div id="lightbox-overlay"></div> \
<div id="lightbox-container"> \
<div id="lb-title"></div> \
<div id="lightbox"> \
<div id="close-lb"></div> \
<div id="lb-content"></div> \
</div> \
<div id="lb-caption"></div> \
</div>');
$('a[rel="wowbox"]').click(function() {
var element = $(this).attr('href');
var content = $(element).html();
var title = $(this).attr('title');
var lightboxContainer = "'#lightbox-container'";
$('#lb-content').ready(function() {
$('#lightbox-container').center();
});
$('#lightbox-overlay').fadeIn(700);
$('#lightbox-container').center().delay(100).fadeIn(700);
$('#lb-caption').html('');
$('#lb-content').html(content);
$('#lb-title').html(title).fadeIn(700);
return false;
});
$('a[rel="wowbox[img]"]').click(function() {
var src = $(this).attr('href');
var caption = $(this).attr('title');
var lightboxContainer = "'#lightbox-container'";
var content = "'#lb-content'";
$('#lightbox-container').center();
$('#lightbox-overlay').fadeIn(700);
$('#lightbox-container').delay(100).fadeIn(700);
$('#lb-title').html('').show();
$('#lb-content').html('<img onload="$('+lightboxContainer+').center();" src="'+src+'" onerror="ImgError(this)" onmousedown="return false;" /><div onmousedown="return false;" id="image-cover"></div>');
$('#lb-caption').html(caption).fadeIn(700);
return false;
});
$('#close-lb').click(function() {
$('#lb-caption').slideUp(700);
$('#lb-title').slideUp(700);
$('#lightbox-container').fadeOut(600);
$('#lightbox-overlay').delay(100).fadeOut(600);
});
$(document).keypress(function(event) {
if (event.keyCode == 27) {
$('#lb-caption').slideUp(700);
$('#lb-title').slideUp(700);
$('#lightbox-container').fadeOut(600);
$('#lightbox-overlay').delay(100).fadeOut(600);
}
});
});
</script>
现在我只需要一种方法来检测a标签的href是图像还是div.所以我可以使用$('a[rel="wowbox"]').click()而不是同时使用两者.我知道这可能会包含一个if/else语句,但如果有人帮忙,那就太好了.谢谢!:)
亲切的问候,内森
使用:
if(/\.(?:jpg|jpeg|gif|png)$/i.test($(this).attr('href'))){
//do what you want
}
| 归档时间： |
|
| 查看次数： |
1562 次 |
| 最近记录： |