How to make a Lightbox with Background Blur

Screen Shot 2015-04-24 at 10.21.05

 

Making cool lighboxes is actually quite simple. You don’t have to use JQueryUI, Bootstrap, or some other thing to get a great looking lightbox with not much code.

The basic idea: Your lighbox is made of two divs. A container div that is the full width and height of the page, and inside that another div holds all the lightbox content. Using JavaScript, toggle the visability of the lightbox when certain elements of the page are clicked.

Now for some more details.

1. Add an html tag, and give it a meaningful class name. Here is mine:

<div class=”container-lightbox”></div>

2. Getting the div content. You could just statically put some code in the div you just wrote (see #1), but usually you need your lightbox to hold some dynamic content, such as a form to edit a product. Mine displays each of my portfolio projects. A nifty way I have found to do this is to use an ajax call to get the ‘page’ you want to display in the lightbox, and have the ajax return html. This is awesome because you can keep all your view files nicely organized, and works really well when you have to load dynamic content into your lightbox. The content can be complied together on the server, and sent over to you in a nice package by ajax, and you can then just dump all that into your lightbox. Here is how I set up my ajax call. I used jQuery, and already had a link set up that I wanted to toggle the lightbox. The link’s url was the url I wanted to get my lightbox content from.


var lightbox = $('.container-lightbox');
$('.project-thumbnail a').click(function(){
$.ajax({
url: $(this).attr('href'),
method: 'get',
success: function(data){
lightbox.fadeIn('fast').html(data);
},
dataType: 'html'
});
return false;
});

 

3. Toggling the lightbox. Once you get your content to show up in your lightbox div when you click your link, you are ready to toggle it’s visibility. Give your whole lightbox a style of display:none in your CSS. Then, in the success callback function of your ajax call, do something to set a display:block style for your lightbox. JQuery has some great functions for this. I used .fadeIn('fast')

Add a X symbol to the top of your lightbox, so some similar thing. Wire it up to some JavaScript so that when clicked, it will set the lightbox back to display:none . Here is mine.


lightbox.on('click', '.remove-lightbox', function(){
lightbox.fadeOut('fast');
return false;
});

4. Styling the lightbox. Now for the fun part. You can add some styles to your lightbox to make it look really classy. Here are mine (fyi, I’m using SASS, thus the nested statements. You can’t do that in normal CSS).


.container-lightbox{
display: none;
position: absolute;
z-index: 4;
top: 0px;
left: 0px;
width: 100%;
min-height: 100%;
overflow: hidden;
.body-lightbox{
border-radius: 3px;
padding: 20px 20px 40px 20px;
background-color: #fff;
width: 90%;
display: block;
margin: 40px auto;
overflow: hidden;
-webkit-box-shadow: 0px 14px 100px 20px rgba(0,0,0,0.4);
-moz-box-shadow: 0px 14px 100px 20px rgba(0,0,0,0.4);
box-shadow: 0px 14px 100px 20px rgba(0,0,0,0.4);
}
.remove-lightbox{
display: block;
text-align: right;
font-size: 3em;
margin: 10px;
}
}

Highlights of the above code: For your lightbox to appear above everything else, it’s important that it positioned absolutely, and that it’s z-index is higher than anything else on the page. It’s also important that the top and left are at 0. This is what puts the lightbox on top of everything else.

And now, for the blur background. For this I had to add some blur styles to all my things that are not my lightbox. I couldn’t just add them to the body, because that would blur the lightbox too. To do this I toggled adding a blur class when I toggled my lightbox. Here is my lightbox code again with the added lines.


var lightbox = $('.container-lightbox');
lightbox.on('click', '.remove-lightbox', function(){
lightbox.fadeOut('fast');
  $('.projects-container, header, footer').removeClass('blur');
return false;
});
$('.project-thumbnail a').click(function(){
$.ajax({
url: $(this).attr('href'),
method: 'get',
success: function(data){
lightbox.fadeIn('fast').html(data);
   $('.projects-container, header, footer').addClass('blur');
},
dataType: 'html'
});
return false;
});

And finally, my blur css class containing css that I shamelessly copied from the internet.


.blur{
filter:blur(4px);
-o-filter:blur(4px);
-ms-filter:blur(4px);
-moz-filter:blur(4px);
-webkit-filter:blur(4px);
}

And that’s it. I would recommend messing around with absolute vs. fixed positioning for you lightbox. I’ve found fixed is better for small lightboxes, and absolute is better for large ones.

Advertisements

Coding Dojo Graduation!

The past 3 months have pretty busy for me! I’ve been attending a Coding Dojo bootcamp: an intensive training program in web development. Even though I came to the bootcamp with prior web development experience, I still learned a lot. I graduated as, what they call, a “Double Black Belt Ninja” which just means I now know LAMP, MEAN and Ruby on Rails stacks.

 

FullSizeRender

I did it!

During the bootcamp I also worked on Bird Box Science’s social networking site. At graduation I got to demo the site in front of other people for the first time. There is still more to be done, but current working features include:

  • responsive design
  • login and registration
  • password encryption and password reset
  • user profiles
  • bird box profiles
  • likeing/following
  • comments

 

The Bird Box Science website, in it's first demo.

The Bird Box Science website, in it’s first demo

Behind the scenes on the BBS website.

Behind the scenes on the BBS website.

 

Calibrating Glowy

I did some more measurements on the movement of the X, Y, and X axes on my 3D printer, and added those calibrations into the firmware. Then I tried printing some small cubes with different layer height and flow rate combinations. The cubes, shown below, are actually a square shape this time, evidence of correctly calibrated axes. 🙂

Small cubes, printed with different layer heights and flow rates.

Small cubes, printed with different layer heights and flow rates.

printing...

printing…

 

Job Hunting, Bird Box Science, and Coding Dojo

Merry Christmas!

Since graduating in June I’ve been on the job hunt. I went to Startup Weekend in October to network with people, which lead to the birth of a new project for me: Bird Box Science. Bird Box Science is a project where people with bird houses equipped with sensors contribute data to an online database and social networking community. It’s a great activity for kids and bird enthusiasts.

logo1-color

Being a bird enthusiast myself  I’ve had a lot of fun with it, especially when I got to go help make the Kickstarter video and I got to meet a live Barn Owl named Gus.

IMG_4917

We ended up taking first place at Startup Weekend, which was awesome! I totally wasn’t expecting that. Trying to find a job can be depressing at times, so seeing my work accomplish something was very encouraging.

Part of the prize from Started Weekend was a free seat in one of Coding Dojo‘s coding bootcamps.

I’ll be starting the bootcamp on January 5th, and will finish on March 27th. I’m excited to learn more about web development. Right now I’m really just a front end dev, but soon I will have full stack skills and be able to do way more cool things. The only thing I’m nervous about is driving around on not enough sleep…

 

 

Giddy Up Girls’ New Website

So, there’s this project I’ve been working on that’s been under wraps for a long time…

But now I can talk about it! Woot!

Basically I was hired by a brand new publishing company to do the illustrations for their first book, and design and build their website. The book, a mystery where two girls and a service dog solve the case of a missing horse, will be coming out on September 7th, and as of a few days ago, the website is live. Check it out: giddyupgirlsbooks.com

This has been a pretty special project for me. Jordan, one of the co-authors, has a unique genetic abnormality that keeps her from doing a lot of things people normally do, including speaking. (Read more about her story here and here.) The story and plot-line are all her ideas. She is able to communicate those ideas to Rachelle, her nurse, who understands her very well. Rachelle then typed those idea up to create the finished story. Helping make Jordan’s story come to life has been one of those things that make me feel like God has good uses for me in this world.

Redesigning my Portfolio (sort of a tutorial)

So, as I posted previously, my domain got deleted.

This is actually sort of ok with me because I’m already in the habit of doing a visual redesign of my portfolio website every few months. New designs keep popping themselves into my head and I can’t resist!

Web design is pretty simple if you follow these steps:

1. Clarify the goals and user needs for the website (don’t forget that the people using the site and the people managing the site often have different goals). This step is important because it saves a lot of confusion and hassle later on, and it reallllly helps in the design process too. I won’t go into a ton of detail here.

2. Do wireframes. It’s very helpful to do these separately from the rest of the visual design. That way you can focus on basic interaction and layout before visual hierarchy and overall “atmosphere” and feel.

I’m using Adobe Illustrator and Adobe Photoshop.

portfolio-wireframe-home

Each of the small boxes here is a portfolio item. I chose to prominently display them on the home page like this for maximum viability. I also chose to include my email address in the header so that contacting me is an easy, one-click process.

portfolio-wireframe-text

Another reason I really like doing wireframes before the rest of the visual design is that I can lay out and visualize how I am going all my margins and paddings when I do CSS. This helps me avoid mistakes later.

3. Do visual designs. This is pretty easy after doing wireframeing. I (loosely sometimes) follow the wireframe as a guide, and overlay my design.

portfolio-wireframe-home-v1 portfolio-wireframe-text-v1

It’s a good idea to do more than one design iteration.

portfolio-wireframe

portfolio-wireframe

Personally I like my second design better, but I think I will implement the first design since it will be easier to code up, and I need my portfolio back ASAP since I am looking for a job.

So, that’s it for design. Next I’m going to use this and whip up a WordPress Theme.