Howto: Using Lightbox and jQuery to Display Large Image on Wordpress
Before we start, you can use lightbox package from here. We will do some tricky programming using Javascript especially with Lightbox and jQuery. I know there are many plugins which can make your life easier than this, but I bet you want to learn something here as I am who want to share about this “little” piece of amazing code :D.
First, download the lightbox package. I assume you use WP 2.5+ here because we want to utilize jQuery to do the magic. After unpacking it, you may copy the files as following:
- close.gif and loading.gif to your wp-content/themes/your_theme/images/
- lightbox.js to your wp-content/themes/your_theme/
- style.css, you can add the piece of lines to your theme’s style.css
Okey, open your lightbox.js and find loadingImage and closeButton variable. Change it to reflect your theme path, then open your template page which one you want to add this lightbox capability. Example: index.php, add the following code:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/lightbox.js"></script>
<script type="text/javascript" src="/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#content').find('a').attr('rel','lightbox');
});
</script>
You can change the #content, with your ID elemen of your layout page. You can use class too. After that, upload your file and try to create post, insert image into the post (you better insert thumbnail instead of medium or large size), save and then try to click thumbnail image on that page.
You can’t see the lighbox worked, you can email me 
rumahcantikcitra.co.id
Another pure XHTML + CSS website from Unilever brand. I “weave” some pieces of PSDs into pages, optimize their document structure and optimize the styles. I didn’t separate the style sheet instead of put in each page respectively. As the are growing, I will convert it progresively using content management system.
Update: I have built CMS for this website and all pages are inserted into CMS progressively.
- No related posts
myponds.net
The first phase setup for Pond’s official website. I convert PSD to XHTML compliant plus CSS. I’m using jQuery to write less code with “big” impact effects or DHTML programming stuff :D.
The creative work has been done by Yuwie very nicely. Thanks Yuwie.
- No related posts
playwithbeauty-id.com
Lux Play With Beauty Website (playwithbeauty-id.com) - Engine/CMS, SEO optimizations, document structure dan page loading optimizations.
This is a second campaign website to support offline event: Lux Magic Spell. I’m using Drupal Content Management Framework to build entirely site. I implement a multisite configuration to provide multiple sites for previous campaign.
A little note about Ubuntu 8.04 a.k.a Hardy Heron
My overall comments is “not bad”. I rather disappointed with this release although this release is a Long Term Support (LTS) release. I don’t know if this happens because I’m upgrading from Gutsy Gibbon. I though I must be fresh install everything from scratch (oh my, should I do this option? Come on, I have so many applications with different custom settings, I don’t want to re-configuration all over again, and waste my time to do that :D)
My inkscape is unstable, don’t know. I didn’t have much work to do with Inkscape anyway, but it is still annoying. Since this is an UI bugs, I don’t know how to submit it via bug-buddy or go to inkscape bugzilla/ubuntu launchpad?
Well, too much dissapointed but.. I’m very glad that working with remote files are easily than before. GVFS saves my day. I don’t need ugly gFTP anymore (sorry gFTP developers) because it doesn’t reflect file changes when file are changes on current local directory. I’m using nautilus now for FTPing, I just type: ftp://kutucape.com and the nice nautilus browse my remote folder seemlessly.
GNOME 2.22 has some TODO on GVFS transitions from GnomeVFS, some works on Pulse Audio and move some libraries into GTK+. I thought that GNOME 2.24 is promising. I hope that Intrepid Ibex, a next Ubuntu code name after Hardy Heron will be rock solid and all “TODO” will be finished on this release. My personal opinion, Ubuntu Hardy Heron doesn’t deserve to be a LTS version, it must be Intrepid Ibex.
