My gallery plugin for WordPress is up and running now – there are still a lot of loose ends to tie up, but the principle is sound and it works well. Hopefully it’ll be tidied up eneough to let free in the world in a week or so, but first there are all the little bits like writing the options admin to do.
James Cameron, a (bloody good) photographer asked me to build him a new site to replace his current one: http://www.jcameron.org so I’ve been using this as the excuse to write a plugin, something I’ve been meaning to do for a long time. I decided to use WordPress as the base of the website. Now there are plenty of Image Galleries available for WordPress, but I didn’t feel any of them was quite right.
My Plugin (Flip Gallery) is designed to be as easy to use as possible, there aren’t going to very many options, no mass upload of zip archive, just fast and simple with everything thought nicely through. My one concession to modernity has been the decision to use a fancy gallery popup. The choices (for me) boiling down to lightbox and thickbox – these are both amazing little widgets and are functionally pretty equivalent.
In the end the things that swung it for me in favour of Thickbox are:
- Ajax functionality – load anything – not just an image (although I’m not using this yet)
- jQuery – 19kb (compressed) – awesome
- The back and forward links (sad I know)
I’d like to say have a look at the work so far on James’ new website – but I can’t really. Sorry!
Compare Lightbox & Thickbox
| Thickbox 2.1.1 | Lightbox JS v2.0 | Notes | |
|---|---|---|---|
| Examples | Thickbox | Lightbox | I’ve set up a quick test – identical pages of html, identical images, the only difference is the one page is powered by Thickbox and one by Lightbox. Compare and Contrast, enjoy. |
| Powered By | jQuery | Prototype Scriptaculous |
A matter of personnal preference. I have used jQuery and Prototype, I don’t think that Scriptaculous adds anything unfortuntely. |
| Hook | class="thickbox" |
rel="lightbox" |
I like the use of rel – it’s good to keep your classes clean. |
| Related Galleries | rel="gallery_name" |
rel="lightbox[gallery_name]" |
|
| Single Image | Y |
Y | |
| Gallery | Y | Y | |
| AJAX | Y | For me the additional features swing it to Thickbox for me, I love the idea of having an image gallery but to also be able to have notes about each image, via an iFrame or AJAX. | |
| Inline Content | Y | ||
| iFrame | Y |
p.s. Thanks to Dan (http://www.darfuria.com) for pointing me towards Thickbox.
Lightbox is nice in the way it animates, although that is a little jerky, instead of smooth. It also takes longer to load, and the back/forward buttons are horrible.
With Thickbox, the background isn’t covering the whole page in Firefox. I had the bug as well.
I think the CSS has to be changed to this for it to work:
#TB_overlay {
position: absolute;
z-index:100;
top: 0px;
left: 0px;
background-color:#000;
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
min-height:100%;
height: auto;
_height: 100%;
}
You’re absolutely right – I’ve had to do that in my plugin. In this case to make it fair I am just trying to use the code out of the box.
Thickbox it is, then. Though, I would have gone with that in the first place, anyway.
Ah, if only to learn Javascript and use Jquery’s awesomeness, along with lots of other crazy Ajax things.
Do you know why they happened to call Java “Java” and Javascript “Javascript”? There must be some relation between the two for them to have similar names, no?
Java is an Object Oriented Programming (OOP) language created by James Gosling of Sun Microsystems. JavaScript was created by the fine people at Netscape. JavaScript is a distant cousin of Java. It is also an OOP language. Many of their programming structures are similar. However, JavaScript contains a much smaller and simpler set of commands than does Java.
I just whipped this from HTML goodies… here is the rest (it was top of the list on google)
Ah, cool. It’s irritating that they have similar names, because in a conversation about programming, one often likes to shorten termonology as much as possible. Nobody says hyper text markup language, it’s just HTML… But we can’t shorten Javascript to Java, because that would be wrong. Arrghh!
Darfuria: So we say JS for javascript and Java for Java :-D
In the latest version of lightbox, there are more features such as iframe support, inline content, gallery/slideshow, and I think ajax as well, although i’m not sure how ajax is related directly to lightbox or thickbox, since it’s more on the presentation layer, but feel free to clarify this!