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.

The Brazilian Bikini Photo Gallery TutorialClick 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

EDIT: I've removed the section on installing Drupal with Fantastico because it appears that Fantastico is not a good way to install Drupal. See the comments at the bottom of this page. Installing Drupal manually is not difficult and is explained below.

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

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

The Drupal welcome screen

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.

The Drupal menu

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

Pink bikini Bikini model Surfer chick in bikini
Brazilian bikini photo Beach girl with bikini Another bikini

See also the Ruby Bikini tutorial.

Average: 3.5 (88 votes)

Comments

Just say no to Fantastico

I just wanted to add that Drupal's developers have called the automated install via Fantastico "an insecure recipe for disaster". I'd advise anyone interested in Drupal to install it manually. It may take a few more steps, but it will cause you less headaches in the long run. Or just wait another month or two; the developers have promised a more user-friendly installer in the next version, which should be out in Fall of 2006.

Webmaster Tips's picture

Drupal and Fantastico

Thanks for the tip about Fantastico. I'll make an edit to the post above...

how about some 50+ images of

how about some 50+ images of the same topic :)

Webmaster Tips's picture

Bikini photos

" It's a good idea to keep

" It's a good idea to keep all of your additional modules in a new directory under your /modules directory."

This isn't exactly correct.
The recommended place to keep the modules you upload is in /sites/all/modules/ not a new subdir of /modules

Webmaster Tips's picture

Bikinis

Thanks for pointing that out. Just updated the Drupal Bikini Photo Gallery installation instructions for Drupal 5...

Does someone saw the girls ?

Does someone saw the girls ? lol

Gallery with CCK and imagefield

I outlined a simpler method on this page:
http://drupal.org/node/128080
(scroll down to section "My Method")

This might be helpful for googlers...

Hello,This is a nice (very

Hello,This is a nice (very nice) gallery, but could be posible to add a little rewiev or text information, to the pictures? how can i do this? any ideas?

Webmaster Tips's picture

adding a caption

To add a caption to an image you could create a span and/or div like this:

<div class="image">
<a href="/images/my-image.jpg" rel="lightbox"><img src="/images/my-pic-thumb.jpg" alt=""></a><br />
<span class="caption">My caption</span>
</div>

Then add CSS rules to your Drupal theme's style.css file:

div.image { border: 1px solid #666; padding: 4px; }
span.caption { font-size: x-small; }

Why is installing it with

Why is installing it with fantastico bad? I am doing it right now and would like to know the specific reasons why it should be avoided

Webmaster Tips's picture

Drupal and Fantastico

There is information about Fantastico and Drupal here:
http://drupal.org/forum/fantastico-de-luxe

Syndicate content