How to Make a Brazilian Bikini Photo Gallery With Drupal and AJAX

Drupal is an excellent free open-source content management system built with PHP and MySQL.

AJAX is a JavaScript technique to get new information from a server without needing to reload the entire web page.

Drupal/AJAX Brazilian Bikini Photo Gallery

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.

Click the bikini photo for the AJAX effect

(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.)

How to Install Drupal With Fantastico

How to Install Drupal Manually

Drupal is fairly easy to install manually. It involves just a few simple steps:

1. Download Drupal (this tutorial was originally created on Drupal 4.7, but should also work with Drupal 5.0 if the modules have been updated)
2. Uncompress the files
3. Upload the Drupal files to your web server
4. Make sure you have a database ready on your server. You will need the database name, database user, database password, and database host (usually "localhost")
5. Open the main page (the home page of your new Drupal site) and follow the link that takes you to the page where you can create the admin account. If you are using Drupal 5 you will be asked to enter your database information the first time you visit your site.
6. That's it...

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.

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.

Creating the Drupal Admin Account

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.

Install the AJAX Photo Gallery Lightbox 2 Drupal Module

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.

Activate the Drupal Modules

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

• Lightbox2
• Upload

(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.)

Adding Photos to Your Brazilian Bikini Photo Gallery

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.

The Brazilian Bikini Photo Gallery and Slideshow With AJAX!

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.