Introduction:

First we need to download couple software to get this working. We will be testing it locally on the computer first, then once its working we will upload it to the web server. Its very simple, i will walk you guys through each step. So lets get started.

1. WAMP5 : http://www.wampserver.com/en/index.php
   • Installing WAMP will automatically create a www folder located in C:\wamp\www
   • Create two folder in the www folder called, localroot and webroot
   • In the localroot and webroot folder create a folder that will correspond to your site example: trickdigest
   • In the site name folder located in local and web root folders create a image folder. Your folder tree should look like C:\wamp\www\webroot\trickdigest\images

     EMS SQL Manager for MySQL (WAMP5 comes with a sql manager, you can use it, or which ever one you are familiar with. 

2. Go to http://www.tom-muck.com/extensions/help/HorizontalLooper/
   • download and install the extension.

Step1: Create and Setup database

Open EMS and Create a database called gal12_db,

Click next, and you will see the window below.

Click next and Finish. When you do that you should see the Registration database window. Just click ok. Next click on the User Manager Icon.

Change the Servers to Localhost and click ok. At this point click on the Add User Icon.

your username and password will be different. Make sure to select All Privileges and With Grant option. With that click ok to apply the settings. Double click on the database you just created.

When you do that you will connect to the database, Click on Tools > SQL Scripts

Copy and paste the script below and click on this will create the table and fields.

In doing that you will create the table below.

What i did above is create a database with the name gal12_db, table named main_tb and the fields.

id which is unique and auto increment, title, image, thumbnail, and description. After creating the database and fields you need to add the url, name and description to the gallery images you will be displaying. Should be similar to what i have below. Your image location will be different. I added 6 images to the database for testing proposes. Also this is important create a username and password we will need this to connect the database with dreamweaver.

Below is the 6 data that i entered. This will be the 6 images in my gallery. You will have to download the images and place it in a folder located in your site folder. For testing you can click here and download this zip pack i created. Place the gallimages folder in the image folder located

C:\wamp\www\localroot\galleryTest\images\gallimages

Your image path in EMS should be

images/gallimages/image_name.jpg

Step2: Creating site in Dreamweaver

Ok, at this point we have the database created and download the files. Open dreamweaver, click New Site

In doing that you will see the window below. Fill in the information.

Local Info

Remote Info

Testing Server

At this point you should have the database created with the tables and the dreamweaver site created. Now we need to connect to the database and display the content of it. Click on Databases

Click on select

This will bring up the window below. Fill in the information, use the username and password you created earlier using EMS.

Step3: Displaying the Data.

Click ok, and click Bindings

Click on and select Recordset. Create the recordset below.

Click on the (+) next Recordset, you will see the fields shown above.

Table Code, copy and paste it into dreamweaver.

Doing that will give you the table below

Click inside the large table and click insert thumbnail

Click ok.

If you want all your images to be consistant size change the Width and Height setting.

The main page will show the thumbnail image which is the smaller .jpg image. When visitors click on the image they will be directed to the larger .png image.

Now click the record set to expand it

Click and Drag the title field over to the table as shown below.

Press F12 to preview the page and if anything was down correctly you should get the image with the name below it as shown below.

If you just get the name double check the database, the image path maybe incorrect.

If you get errors, make you after you create the page you click on the Put Files

To upload the files.

To link the thumbnail to the main image, click on the folder next to the link bar.

Select the option below and click ok.

Now press F12 to preview.

Now we need to display multiple images. Click on the table

With the extension you download and install earlier. Click Server Behaviors,

Fill in the information shown below

Click ok, and preview the page.

Finish:

Finished, Need help or have questions feel free to contact us.

This Tutorial was Created By Trick Digest
© 2010 trickdigest.com. All Rights Reserved.