Lightbox
Current lightbox options to use. Post comments on tips/tricks and tag projects with which one is used. These are also under the links section.
- Colorbox
- Fancybox
- Lightbox 2 (Images only, a little jerky on mobile)
- PrettyPhoto (Not updated as much but still might be useful)
- CSS3 Lightbox
Legacy Building Solutions Launch
http://www.legacybuildingsolutions.com/
Some rather interesting client demand made this site the way it is – but good job to Rob for pushing them through to launch. Some interesting things to note perhaps: c5.5/html 5, custom modal box dealie that really doesn’t do much of anything, custom-ish c5 photo galleries, news, sliders, used jQ masonry for the galleries, of and the auto nav was edited by BD to deal with the goofy hidden parent giving their children to their youngest sibling bug we’ve encountered a handful of times before.
CustomWoodCrates.com
Donkey simple quicky website with a little css3 fun to make IE jealous.
PrettyPhoto gallery and video. Should prolly do it all html nice video style, but all their other stuff already has these Flash videos, so I just stuck with it. Maybe I’ll fix it later.
Print prettyPhoto (and it’s ilk) contents
So, this is admittedly cheesy, but they wanted a quick and dirty solution and this is what I came up with first. They wanted to have a button or link to print only the contents of a pretty photo box (as opposed to the whole stinking page which isn’t very useful).
But hey, it works.
What I done did is use the jQ printArea plugin – which allows you to specify shit like what things makes specific divs print, etc. Then I jQ’d the title of the prettyPhoto to a link that activates the printing… shazam.
See it here: http://www.wesleywillows.com/willow_ridge-plans.html
Auto Launch Lightbox On Page Load
You can trigger Lightbox (Thickbox, PrettyPhoto) on page load with the following code.
Fancybox
$(document).ready(function(){
$("#lightbox").fancybox({
maxWidth : 700,
maxHeight : 548,
closeClick : false,
}).trigger('click');
});
<a href="http://www.stcloudrox.com/lightbox.html" id="lightbox" class="fancybox fancybox.iframe"></a>
Fancybox w/Cookie (https://github.com/carhartl/jquery-cookie)
function openFancybox() {
setTimeout( function() {$('#lightbox').trigger('click'); },100);
}
jQuery(document).ready(function() {
var date = new Date();
var minutes = 30;
date.setTime(date.getTime() + (minutes * 60 * 1000));
var visited = $.cookie('visited');
if (visited == 'yes') {
return false;
} else {
openFancybox();
}
$.cookie('visited', 'yes', { expires: date });
$('#lightbox').fancybox({
maxWidth : 700,
maxHeight : 548,
closeClick : false
});
});
PrettyPhoto
$(document).ready(function() {
$.prettyPhoto.open("image","title","description");
});
Thickbox
$(document).ready(function() {
tb_show("", "announcement.html?height=400&width=500");
});
Recent Comments