It has lots of types of content support and it is really simple to customize. prettyPhoto also comes with lots of features and 5 built-in themes…

• light_rounded
• dark_rounded
• light_square
• dark_square
• facebook
• pp_default
• minimal theme – which will add here with minimal and pure CSS

…which you can easily change via JavaScript customization. But this is not the subject of this tutorial.

I prefer a default minimal and simple theme for prettyPhoto and the ability to add stuff if I need it and not the opposite. So this is my little CSS to create a simple theme for prettyPhoto

Please note that this theme is beta version and you should check that everything is OK before any production deployment. You can also remove all other themes if you do not need them, for a light weight code.

What you will download with the Minimal prettyPhoto theme

So with theme you will get the following:

• Minimal theme for prettyPhoto lightbox
• Really simple and minimal aspect
• No images have been used and I mean no images, including no sprites and no encoded images in the CSS.
• 1 and only HTTP requests to load the theme CSS file (like I said, no images are used). The default theme uses 22 requests to 7 image files of about 20KB (all).
• Smaller CSS file size only 5KB for the compressed version.

so this is all about speed, after all.

So all this, smaller file size and less HTTP requests translate into faster speed when talking about page loading.

Note, that you can bundle this theme into the prettyPhoto main CSS files and remove all other themes if you do not need them.

But if you don’t insert the theme into the main CSS you will still have a fast loading theme, since the browser will not load images in the CSS that are not used. I will not blame you if you don’t bundle the files together, I also prefer to keep things separate, just in case you need to update.

You can include the theme in a separate CSS file like this

<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" />
<link rel="stylesheet" href="css/prettyPhoto.minimal.css" type="text/css" />

You can include it in any order. It will work.

This is all you have to do to have your minimal theme for prettyPhoto available. You can now go and activate it via prettyPhoto standard function:

$(document).ready(function(){
    $(".gallery a[rel^='prettyPhoto']").prettyPhoto({
        theme:'minimal'
    });
});

Scrool a little bit to see a live working version of the prettyPhoto minimal theme and download the CSS files from GitHub.

PrettyPhoto Minimal theme Demo

Download Minimal theme for prettyPhoto lightbox

You can find the minimal prettyPhoto theme on GitHub here:

https://gist.github.com/catalin586/12ff5f68ceaba74e9c3d

Credits – Here is what I have used for the Minimal theme

The SpinKit to create a simple CSS loader instead of calling a gif image:  https://github.com/tobiasahlin/SpinKit

Some pure CSS icons. I use it for the expand/contract buttons. It works well on IE also. http://nicolasgallagher.com/pure-css-gui-icons/

Some styling for small screens. It’s not perfect but it’s the best I could came up with. http://themeforest.net/forums/thread/prettyphoto-styling-for-small-screens/66783

And the prettyPholo lightbox that you can download it from the main site here: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Yes, of course I could just use the phone alert…but this is funnier…and I can say “I made this”

The good part, is that you can pin the tab in your favorite browser (I am a Chrome evangelist) and every time you start it, it also starts the timer. The counter restarts automatically every day, so you don’t have to worry about it and it shows the alert no matter what you are doing when time finishes.

I customized so it pup ups the alert every day at 5:30pm exempt on Friday when it shows me the alert al 2:30pm. Feel free to do it your way.

This counter was actually used on a website to let the user know client-side, the time has left to complete an online exam. I have then converted it into a funnier counter. Hope you like it.

I use a local installation of XAMPP and give it a special website where to run, but there is really no need for all this trouble. You can run this from any place like your normal server or even from your desktop. It is just pure html with two lines of javascript included.

The counter with alert snippet

Here is the main snipped that does all the job. Also don’t forget to include the jQuery library.

var d = new Date();

    var month   = d.getMonth()+1;
    var day     = d.getDate();
    var year    = d.getFullYear();

    var day_in_week = d.getDay();

    var hour    = (day_in_week == 5 ? 14-1 : 17-1);
    var minute  = 30;
    var second  = 00;

    var s1      = '/';
    var s2      = ':';

    var output  = month+s1+day+s1+year+ ' ' +hour+s2+minute+s2+second;

    $('#myCounter').countdown({

        date: output

    }, function () {

        alert('Go home now...you must be very tired!');

    });

You can see a demo file on Github. And you must download the main jquery.countdown.min.js from the @eka7a repository. YOu also have there a small demo and some documentation, but for a more generic purpose.

Feel free to edit and set up for you needs. You can let me know if you find other curious ways to use it.