I’m making a lightbox plugin called WowBox.
Right now, if you want to make a div pop up you use this:
<a href="#element" rel="wowbox" title="Title">Open #element in WowBox</a>
And to make an image pop up you use this:
<a href="image.jpg" rel="wowbox[img]" title="Caption">Open image in WowBox</a>
Now, here is the the jQuery for it:
<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>
Now I just need a way to detect if the href of the a tag is an image or a div. So I can just use $('a[rel="wowbox"]').click() instead of using both. I know this is probably going to contain an if/else statement, but if anyone help, that would be great. Thanks! 🙂
Kind regards,
Nathan
you can also go the other way around: