Vaselineamazingskin.com
This site is truly amazing! Like the products itself. This is another Drupal powered website. Some custom module must be written to fit this website needs. I have to weave all SWF assets from creative guys and work more extra on wall of skin. Wall of skin is written with jQuery to display all pop up. The pop up itself mimic facebook pop up 
- No related posts
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 
Case Study: How To Setup Multisite Configuration on Drupal
One of the feature of Drupal Content Management Framework, you can set multi site with a single code base without a massive modification on scripts code. We just set up some configurations on Apache Web Server (I assume you use this great web server software) and some configuration on Drupal settings (yes, Drupal has provided this multisite configuration out of the box).
If you unpacked the Drupal package, you may find on settings.php comment how to set up multisite. From my experience, I have read many posts but I have to tear my hair off to get it done. From this documentation, it makes sense, and I want to start from there.
Okey, I have case study to share with you. I have set up multisite with different subfolder. Yes, you may apply this for subdomain too. First I will describe how to set up multisite with sub folder: http://playwithbeauty-id.com/magicspell, and http://playwithbeauty-id.com/whiteglam.
You have to have some knowledge about:
- Edit Apache configuration and reload the web server
- Edit Drupal configuration ;). I bet you know this one.
First we edit apache configuration. Configuration path depends on your installation and operating system, find httpd.conf or apache.conf then add this line:
Alias /magicspell /PATH_TO_YOUR_PUBLIC_HTML/
Alias /whiteglam /PATH_TO_YOUR_PUBLIC_HTML/
You may change magicspell and whiteglam with your own sub folder. The second step is create multisite folder on Drupal root folder:
mkdir -p sites/playwithbeauty-id.com.magicspell/{files,themes}
mkdir -p sites/playwithbeauty-id.com.whiteglam/{files,themes}
Commands above create two multisite with files and themes folder. We create separate files and themes folder to make a different theme with the main site. Now copy settings.php file from the default configuration to those folders:
cp sites/default/settings.php sites/playwithbeauty-id.com.magicspell/
cp sites/default/settings.php sites/playwithbeauty-id.com.whiteglam/
Edit those settings.php with different database configuration to make them properly separated. Also you can set $base_url variable to reflect the website URL (recommended).
Okey, reload the apache configuration:
apachectl graceful
Then try to access those subfolder URL. If you find an installation page, then you are done! Follow the instruction and create a custom theme for your new subfolder by copying your theme on sites/YOUR_DOMAIN.subfolder/themes. Good Luck!
Since I upgraded my Wordpress to 2.5
Since I upgraded my Wordpress to 2.5, some odds happening on my site. No, no this is not because of the wonderful administration theme (you know what, I love the layout and UI design for this new administration theme!).
This is because the gravatar is not properly displayed in exact dimension. I have inspected the functions.php on my modified prologue theme, and found nothing but headache.
So I think the get_gravatar function might be placed somewhere on the code since this version has supported the gravatar. With a wonderful “grep” command, I found get_gravatar function on wp-includes/pluggable.php.
Hmm, the function has a different arguments with the prologue theme function, so I decided to use the wordpress one. I must edit those theme scripts one by one to adopt the new get_avatar function.
Here it is, my new modified prologue theme that support wordpress 2.5
Howto add jQuery functionality on your Wordpress theme
Wordpress now include jQuery for Javasript library. Drupal has this library started from version 5.
In this short tutorial I will show you an example how to add jQuery functionality on your Wordpress theme. The possibilities are endless, the limit is only on your creativity ;).
We take a “Archieves” on sidebar for example. We know that sometimes with numerous posts, archive list will be long. Sometimes this is annoying. You want to just display the Archieves title, when someone click, the content will be expanded.
Let’s begin:
- Open your theme file, especially your header theme file (header.php) then add this syntax to load jQuery library:
<script type="text/javascript" src="<?php bloginfo('siteurl'); ?>/wp-includes/js/jquery/jquery.js"></script> - Then add this code:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#archives ul').css('display','none');
jQuery('#archives h2').css('text-decoration','underline');
jQuery('#archives h2').click(function() {
jQuery('#archives ul').fadeIn('slow');
});
});
</script>
See at point 2, jQuery(document).ready(function() {}); is a function to check if the whole page is loaded, if it’s fully loaded, the following script will be executed.
Set all list hidden: jQuery('#archives ul').css('display','none');
Add some underline format on Archieve title: jQuery('#archives h2').css('text-decoration','underline');
When title is clicked, the list will be displayed with fade in effect
jQuery('#archives h2').click(function() {
jQuery('#archives ul').fadeIn('slow');
});
Try it!
