Once upon a time developers forced open new browser windows to show enlarged photos. Then along came Lightbox, a decent way of expanding images over your web page with the help of jQuery. I used to like that solution, but like most good things it got used too much in the industry and now I actually hate when I see it being used on a site. There’s a new beast I use all the time for expanding images, called Fancybox.
I’m not writing this article because I think I’m introducing anyone to Fancybox. It’s pretty popular, and because of how flexible it is I use it on a variety of sites for different purposes. So what’s this all about?
The problem is that when people provide packages of their software they always want to show how versatile it is, so they need to add tons of code in order to show all the different uses of the product. It always drives me nuts to have to jump over to the Fancybox website, download the package, strip out the code that I need, delete example files and images… just to be able to use the code in it’s most simple form on my website! If I just simply want to expand a thumbnail to a larger image on my webpage with the help of Fancybox it’s a huge waste of time to download everything just to delete 80% of the files.
So I decided to make a cleaned up, slimmed down zip file that can be used for the most basic use of Fancybox; clicking on a thumbnail and having the larger image expand. Check out my demo to see what the download contains.
You can see the top 2 images show what I consider to be the most common use:
A simple fade effect as the images expand, and the dark background color to help the enlarged images pop.
The second 2 images show no overlay color, and elastic effect as they expand, and captions under the photos.
If you look at the head of the document you’ll see this:
If you compare that to the standard Fancybox example file you’ll notice that I changed a#example1 to a.pop. I never understood why they have it set as an ID, since you would most likely want to use the same effect on more than one image (meaning you need to use a class). I always use pop as my class, every time I use my prepacked code here I know I just have to through a class of pop on the link to fire up Fancybox.
If you compare the rest of the Fancybox standard download vs. my slimmed down download, you’ll notice a couple of other differences. I use a file called images where I keep my (duh) images, instead of an “example” folder. I have deleted some of the extra js files that aren’t needed also.
So to wrap up, my main goal here is to help my and hopefully others development time by providing this slimmed down version of Fancybox. Enjoy, and happy coding!