Trying to Make a jQuery Gallery

Edit: I figured it out. Here’s a tutorial that helped me.

Here’s my post about some further adventures.


I’ve got my little website, you’ve probably seen it if you’re reading this.

All the HTML and CSS skills they taught me in school went into making it look nice and modern, but of course if you look close, you’ll realize that it’s not significantly more complex than your basic 1996-era Geocities site. Better colour scheme maybe, and even that is a matter of opinion.

So I want to add some upgrades. The first one I have in mind is a nice gallery display page to show off the projects that I’ve been working on. It’ll be pretty thin at first, since this is, in fact, the project I’ve been working on, but never mind. I’m getting there.

This is the jQuery plugin I wanted to use: Lightbox, by the obviously brilliant Nick Stakenburg. As you can see by his examples, you click the thumbnail or text or what have you, and up pops a lovely lightbox to showcase the pic on it’s own. Then you click away, it’s gone, awesome. These are all over the internet these days, so of course I thought, how hard can it be? I download the download, pop it open, do some copy pasting, check that my url paths are alright, and hit F5. Nothing.

Everyone says jQuery is super easy to use, but I’m clearly at a more advanced level of dumb than everyone else.

I’m still working on it, and once I get it sorted I’ll post up a tutorial for the intelligence-impaired, like myself. In the meantime, if anyone wants to give me a hint, please do!

Here’s what I did:

Have website folder called Website.
Have php file called projects.php within Website (it’s just html, I haven’t added any php yet.)

Have pics in folder, one is called Cars.png.

Go to Nicks page, click big friendly Download button.

Unzip file.

Take scripts, css, and examples file out of archive.

Copypaste in the scripts from this page.

Check to make sure the paths are all correct.

Paste this in:

Result: The text “Show image” as a link, which links to the image, without a trace of lovely lightbox effect.

What’d I miss?




Leave a Reply

Your email address will not be published. Required fields are marked *