Photo gallery tutorial

Install

- Close Dreamwever before installation.
- Double click on MXP file to start installation process.
- After installation is completed, start Dreamweaver.
- (Restart Dreamweaver if it was running during the installation).

Insert into a page

- Click to insert the cursor where you want the Flash video player to appear and select...
- "Insert" ==> "Media" ==> "WebStunning Photo Gallery"

- If your page is unsaved Dreamweaver will prompt you to save the page.

Image list tab

On this tab, you can easily edit image list data.
- Click the "Create folder" icon to add new folder in the list.
- Click the "Add folder" icon to add folder including images and sub-folders in the list.
- Click the "Add image" icon to add image in the list.
- Click the "Remove" icon to delete image or folder from the list.
- Move elements in the list by clicking arrow buttons over the list.

Tip: Use an automatic tool to create thumbnail images, for example Batch Image Resizer.
The program allows to add prefixes. If you add prefix "thumb_", our UI will automatically assign thumbnails to corresponding main images ("image1.jpg" ==> "thumb_image1.jpg"), when you add a folder in the list.

Thumbnail image - File name of the thumbnail image.
Main image - File name of the main image.
Date - File creation date.
Link - Link assigned to an image will work in View Mode.
Image caption - Name of the image.
Transition effect - Image appearance effect.
Description - Here you can add multi-line rich-text description for the image.

Interface tab

Size

Gallery Width - Width of the gallery in pixels.
Gallery Height - Height of the gallery in pixels.
Thumbnail Width - Width of image thumbnails in pixels.
Thumbnail Height - Height of image thumbnails in pixels.

Interface

Interface Color - Main interface color.
Border Color - Interface borders(lines) color.
Interface Transparency - Transparency of interface elements(0-100).
Border Transparency - Transparency of interface borders(0-100).
Panel Bevel Transparency - Bevel effect transparency(0-100).
Preloader Type - Image preloader type.
Show Fullscreen Button - Show/hide "fullscreen" button.

Background

Background Color - Gallery background color.
Background Image URL - Gallery background image file URL.
Background Transparency - Background transparency.
Dropdown menu/tooltip Color - Dropdown menus and tooltips background color.
Image Layout - Layout of the background image.
Show Mute Button - Show/hide "mute" button.
Music Volume - Background music volume.
Music URL - Background music file URL.

Text

Font - General font type for the gallery.
Font Color - General font color.
Bold - Bold font style.
Italic - Italic font style.
Gallery Texts - Array of gallery texts.
Right Click Menu Texts - Array of right click menu texts.
Top Header - Top header caption.

View mode tab

View Mode Parameters

Enable View Mode - Enable/disable view mode of the gallery.
Bottom Panel Auto Hide - On/off auto hide function of the bottom panel.
Show Categories Button - Show/hide "categories" button.
Show Back To Browse Button - Show/hide "back to browse mode" button.
Slideshow AutoPlay - On/off autoplay for slideshow.
Slideshow Delay - Slideshow delay in seconds.
Transition overlay - Transition image overlay.

Image

Zoom Mode - Image zoom mode.
Rounded Corners - On/off image rounded corners.
Show Image Description - Show/hide image description.
Show Image Caption - Show/hide image caption.
Description Margin - Image description margin.
Show Border - Show/hide image border.
Border Size - Image border size.
Border Color - Image border color.

Image Controls

Show Play/Prev/Next - Show/hide Play/Prev/Next control buttons.
Show Zoom Controls - Show/hide zoom control buttons.
Show Rotate Controls - Show/hide rotate control buttons.

Carousel

Enable Thumbnail Carousel - Enable/disable thumbnail carousel.
Selected Thumbnail - Selected thumbnail(number) by default.
Thumbnail Animation - Thumbnail rollover animation.
Thumbnail Margin - Margin between thumbnails.
Thumbnail Frame Color - Thumbnail frame color.
Thumbnail Frame Transparency - Thumbnail frame transparency.
Enable On-click Fullscreen - Enable/disable on-click fullscreen.
Carousel Speed - Scrolling speed of carousel thumbnails.

Browse mode tab

Browse Mode Parameters

Enable Browse Mode - Enable/disable browse mode.
Thumbnail Margin - Margin between thumbnails.
Show Folder Panel - Show/hide folder panel.
Show Calendar Panel - Show/hide calendar panel.
Show Search Panel - Show/hide search panel.
Show Modify Panel - Show/hide modify panel.
Show Preview Panel - Show/hide preview panel.
Show Info Panel - Show/hide info panel.
Calendar Month Names - Array of calendar month names.
Calendar Day Names - Array of calendar day names.
Search Texts - Array of search texts.

Branding tab

Customize Watermark Logo

Enable Watermark Logo - Enable/disable watermark logo.
Watermark Text - Text of the watermark.
Watermark Layout - Layout of the watermark text.
Watermark Transparency - Transparency of the watermark text.
Watermark Font - Font of the watermark text.
Watermark Font Size - Font size of the watermark text.
Watermark Font Italic - Italic style of the watermark text.
Watermark Font Bold - Bold style of the watermark text.

Customize Right Click Menu

Enable Right Click Menu - Enable/disable right click menu.
Menu Text - Right click menu text.
Menu Link - Menu item link.
Link Target - Menu item link target.

User interface command buttons

Press the "Insert/Update" button after all changes are made. The necessary code will be inserted into the page, all required files will be inserted in the folder "Gallery_files".

How To Create A Simple Joomla Site

In this tutorial I’m going to show you how to create simple presentation site with a few presentation pages, a blog and a contact form. First of all you’ll have to install Joomla and then follow the outlined steps.

I won’t use any third party modules as this is a simple site and our objective is achievable with what Joomla offers.

Part 1: The clean-up.

1. Now that all the extensions are installed, the first thing you should do is erase all the content items that remain from the Joomla installation. You can do this by going to the menu, hovering on “Content” and then clicking “All Content Items”. After the page loads check the box on the left of the “Title” field and then click on the “Trash” icon in the top right of the page.

Go to the same menu but now click on “Static Content Manager” and delete all the items there.

To complete the deletion you must go to the administration index page, click on “Trash Manager” and delete the pages from there also.

2. You should erase the categories and sections too (in this order) unless you plan to use them with their current names. Although you could always rename them I find it much easier to delete the categories I don’t need and start fresh. Erasing the categories and sections is the same as with the content: hover over “Content” and then select either “Category Manager” or “Section Manager”; after the manager loads you can delete all or just the ones you don’t plan on using.

3. Time to clean up the menus! Go to the administration index page an click on the “Menu Manager” icon.

Here we are going to do multiple modifications:

• click the radio button next to the “othermenu” and then click delete in the top right part of the page. This menu has links to various Joomla sites that might be less than interesting to many visitors.
• back at the Menu Manager click on the icon to the right of “mainmenu”. Now check the boxes for every item except “Home” and “Contact Us”.

• do the same as above for the “topmenu”, but delete the “News” and “Links” items.

4. Let’s unpublish some modules now; note that we’ll unpublish them, not delete, because they might prove useful. In the administration backend hover over the “Modules” menu and then click on “Site Modules”.

After the Module Manager loads check the boxes next to the following modules: Banners, Login Form, Polls, Who’s Online, Latest News and Popular. After the boxes are checked click the “Unpublish” icon in the top right menu.

Part 2: Site layout and pages.

Ok, now that we have a practically brand new installation it’s time to build our site. First, let’s think about what pages we need: Home (index), Services, Products, Blog, About Us and Contact Us. The “Blog” link will lead to a part of the site that acts as, well, a blog and “Contact Us” will be a form. The rest are simply pages, with no special functions or abilities.

1. We need to create a section that will hold the content categories, and then create the categories which will hold the content. In the administration index click on “Section Manager” and then the “New” icon to create a new section. In “Title” and “Section Name” you can write Content for example; click the “Save” icon and then return to the administration index page.

Next we create the categories. Click on “Category Manager” and create a category named “Blog”.

2. To create the pages go back to the administration index and click on “Static Content Manager”. After the manager loads click on “New” in the top right part of the page. Create the pages we talked about earlier: Services, Products, Blog, About Us and Contact Us.

After you write the content (but before you save it) the best thing to do is to link these static pages to the menu. You do this by selecting the “Link to menu” tab that’s to the right of the text editor, selecting “mainmenu” and filling in a menu item name (this should be the name of the page you are creating). Click on the “Link to Menu” button and then save the page.

Note: there are differences between static content and other content types, but the main one is that static content exists outside the typical Joomla taxonomy (sections and categories).

3. Creating blog entries is just as easy as creating static content – the difference is that in the administration backend you have to click on the “Content Items Manager” icon and then create new pages. Also, when creating non-static content you have to select a section and a category to which that content will belong (in our case the section is “Content” and the category is “Blog”).

4. The contact form is an important part of all sites and ours is already made. If not, it is easy to create a new one. Go to Components -> Contacts -> Manage Contacts. After the Contact Manager loads you should see one contact form; click it and then edit the text boxes so the details that you want appear on the form.

When creating a new form you have all the same options as when editing one, and it is a breeze to edit or create them as all the fields are self explanatory. One more thing: the form will email the results to the email address that is specified in Global Configuration -> Mail.

5. The newsflash module will list the last x number (this is configurable) of items from a specified category. To edit the options go to Modules -> Site Modules and then click on the “Newsflash” module. I suggest modifying the category option (choose “Content/Blog” in our case) and then the number of options (5 or 6 should be enough).

This is the end of the tutorial – I hope it has helped you understand Joomla better!