This tutorial will show you how to install Drupal, and how to build a cool AJAX photo gallery, in this case using Brazilian bikini models. Click on the photo below for a sample. When you click on the bikini photo below, it will load a larger version of the image from the server with AJAX, without reloading the entire web page.
(All bikini photos in this tutorial used with the permission of Microkitten. Scroll down to the bottom of this page for the Brazilian Bikini photo gallery with AJAX.)
Drupal is fairly easy to install manually. It involves just a few simple steps:
Instructions for installing Drupal in more detail:
Go to Drupal.org and download the latest version of Drupal (Drupal 5).
Uncompress the downloaded Drupal archive and upload it to your server via FTP.
Create a database on your server. Usually you can do this through the control panel. Look for an option in the control panel that lets you manage your MySQL databases. Add a user to the database and grant all privileges to the database user. Check your hosting plan's documentation because it is different for each hosting company. Site5 or BlueHost should work great for this.
Then visit the home page of your Drupal site with your browser. You will be asked to enter your database information and then to create the Admin account.
When in doubt of what to do, consult the Drupal install documentation, or leave a comment below and I'll try to answer any questions that you have.
Navigate to your new Drupal web site in your browser. If you installed Drupal correctly, you will see some instructions on the screen about creating the first admin account (if you installed with Fantastico, it already created your admin account and you can just log in).
Here is the Drupal menu after you click on the administer menu option. Your menu might look a little different depending on what default theme your Drupal has.
Download the Lightbox 2 Drupal Module (a Drupal module based on Lightbox). Uncompress the file and read the installation instructions in the README file. You will also need to download script.aculo.us which includes prototype.js. All of this will be explained in the Lightbox2 Drupal module's README file.
After you have configured the Lightbox2 module as explained in the README file, upload it to your Drupal installation via FTP to your /sites/all/modules directory (you have to create the /modules directory). It's a good idea to keep all of your additional modules in a new directory at /sites/all/modules. If you keep your extra Drupal modules in a separate directory like this, it makes upgrading much easier.
Go to the settings page in the Drupal admin panel: administer —> settings and turn on clean URLS if your server will support it. Also fill out other relevant information, like the name of your web site.
Go to the module-activation page in the Drupal admin panel: administer —> modules, and make sure that the following modules are enabled:
Then go to the access control page and allow/restrict access to the relevant features of your new Drupal web site: administer —> access control
(In another tutorial, I'll give a more complete roundup of recommended Drupal modules. For now, let's just get the bikini photo gallery online.)
Now you have Drupal and the AJAX-based photo gallery module installed, go to the create content page administer —> create content —> page.
Enter a title for your page.
Then scroll down to the File Attachments section.
Upload a thumbnail and a full-size image for each image that you want to include. They will be uploaded with AJAX, so you can upload all the photos without leaving the create content page. I recommend using the GIMP for image editing.
Then write the HTML for your photo gallery in the Body textarea that is provided. You can copy/paste your image names into the HTML. To use the AJAX, just add rel="lightbox" to all of your links. The HTML for an image might look something like this:
<a href="/files/image1.jpg" rel="lightbox">
<img src="/files/image1_thumb.jpg" /></a>
To group images so that you can navigate through them, use code like rel="lightbox[gallery1]" as mentioned in the Lightbox2 Drupal module documentation. View the source of this page for this example which is featured below in the bikini photo gallery.
Click on the images below for the Brazilian bikini photo gallery and slideshow using AJAX! Works best with a high-speed Internet connection.
(Brazilian bikini photos used with the permission of Microkitten.com.)
See also the Ruby Bikini tutorial.