Major Confusion :: Sharing the FUN with Serif software page footer: Kaptain-Chaos Designs ©2008 Major Confusion :: Sharing the FUN with Serif software Page Header : Kaptain-Chaos Designs ©2008 Major Confusion navbar Links: Kaptain-Chaos Designs ©2008 Major Confusion navbar Contact me: Kaptain-Chaos Designs ©2008 Major Confusion navbar: Kaptain-Chaos Designs ©2008 Major Confusion navbar: Kaptain-Chaos Designs ©2008 Major Confusion navbar Gallery: Kaptain-Chaos Designs ©2008 Major Confusion navbar Tutorials: Kaptain-Chaos Designs ©2008 Major Confusion navbar Home: Kaptain-Chaos Designs ©2008
Kaptain-Chaos Designs

Home

Tutorials

Gallery

Links

Contact

Site map

Privacy Policy

Terms & Conditions

Major Confusion WebPlus and JAlbum Tutorial screenshots 02, 03 :: Kaptain-Chaos Designs ©2008 page border - right: Kaptain-Chaos Designs ©2008 page border - left: Kaptain-Chaos Designs ©2008

Incorporating a JAlbum Photo Gallery

Introduction

Having looked around at what free Photo Gallery software is currently on offer, in particular one that will sit well in any WebPlus designed website, I’ve opted for a Jalbum one. The important thing to bear in mind is the need for a ‘skin’ that is easily inserted into an iframe. “They all are” I hear someone heckle! Quite correct, however all are not equal, let me explain. The vast majority are fixed page sizes, this means when trying to fit a skin that is, for example, 900 x 600 minimum size into an iframe that is 500 x 400 there will be scroll bars needed to move the contents of the fixed page within the iframe. Ugly!


The skin I will be using for this tutorial will fit easily into almost any sized iframe and still look good, what is more, the skin can be edited to suit our own colour scheme and look as though it is an integral part of the site build. An added bonus is that this is a really simple solution!


We will also be looking at creating three galleries (to keep our image collections separate) with hyperlinks to each one. Each gallery will be placed in the iframe we create on our Gallery page and called up by clicking on the relevant link.

back to Major Confusion WebPlus Tutorials home page button: Kaptain-Chaos Designs ©2008 navbar Tutorials: Kaptain-Chaos Designs ©2008 back to Major Confusion PagePlus Tutorials home page button: Kaptain-Chaos Designs ©2008 top of page button: Kaptain-Chaos Designs ©2008 navbar right: Kaptain-Chaos Designs ©2008 navbar right: Kaptain-Chaos Designs ©2008

Step One: Installing JAlbum and the BananaAlbum skin

Our first step is to download and install the latest copy of JAlbum. There is the opportunity to add your own photo gallery to the JAlbum website, but for our purposes, we will be adding the pages to our own site. Installation is pretty straight forward and works like installing any other software.


Once JAlbum is installed we need to add the ‘BananaAlbum’ skin to our installation. Go to the link and press the install button, the skin is automatically installed and available in the JAlbum window. The Banana skin has ‘fluid’ pages, they automatically resize the contents to fit our iframe. There is an option to ‘donate’ towards the skin development, in which case the animation and Banana Skin link will be removed from the finished album or, as in the example site, the link and animation is left in and the skin is used for free.

One of the great opportunities of using Serif WebPlus is the ability to add external programs and scripts to the web page, enhancing our sites with some really useful (or novel) features. For this WebPlus tutorial we will be looking at incorporating a Photo Gallery that uses some Flash functions. There are many available to choose from; many hosting companies have the Fantastico suite of free software, included with this are Coppermine and Gallery. There are many other free tools available elsewhere, we will be taking a closer look at one of these. To see what we are aiming for with this tutorial, please see the Gallery page of the tutorial website

Step Two: Organising our Photo Gallery

There are a number of ways to collate our images and get JAlbum to set them up for our website, I am only going to go through one way. This is the way I have found to be the easiest to keep my head round, maintain and upload, you are free to adopt your own way. I would suggest using this method if it is your first time using this software; adapt once you have become familiar with it.

Following on from the website creation tutorial, we have our working folder set up with the rough_work and page_images folders. Now it’s time to add a new folder, called original_gallery, to house our galleries. Into this new folder add one new folder for each individual gallery and place copies of each collection of images in their relevant folder. For the example site the folders are ‘Holiday travels’, ‘Touring UK’ and ‘interesting images’. These are the three individual galleries that JAlbum will produce for me. I will be adding images included with various packages of Serif software for the example site.

Major Confusion WebPlus and JAlbum Tutorial screenshot 01 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 01 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 01 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 01 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 01 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 01 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 01 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 01 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 01 :: Kaptain-Chaos Designs ©2008

Step Three: Setting up JAlbum

With our images in position and receiving folder prepared we need to import each one into a separate Jalbum project. This way, whenever we want to add photos to any one album, their individual details are remembered and we only need to upload the changed project.

One last thing, press the ‘Make Jalbum’ button, wait while the album is created and then take a peak by hitting the Preview button. Our default browser window opens with our new album displayed in the standard window.

Major Confusion WebPlus and JAlbum Tutorial screenshots 02, 03 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshots 02, 03 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshots 02, 03 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshots 02, 03 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshots 02, 03 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshots 02, 03 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshots 02, 03 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshots 02, 03 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 02 :: Kaptain-Chaos Designs ©2008

Open JAlbum and create a New Album. Call the first album ‘Holiday travels’ (if you are creating a number of holiday albums, you may want to call this 2008 holidays, then a new album could be called 2009 holidays with the relevant images) and navigate to the ‘...My Website\gallery’ folder. JAlbum automatically creates a ‘Holiday travels’ folder for you and puts the relevant information in this new folder.

Major Confusion WebPlus and JAlbum Tutorial screenshot 03 :: Kaptain-Chaos Designs ©2008

Add a new folder under the ‘My Website’ folder called gallery, this will be used to hold each JAlbum project.

Major Confusion WebPlus and JAlbum Tutorial screenshot 04 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 04 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 04 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 04 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 04 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 04 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 04 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 04 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 04 :: Kaptain-Chaos Designs ©2008

Now go to the ‘Add’ button, navigate and open the ‘My Website\original_gallery\holiday travels’ folder. Select all of the images by left clicking on the last image, holding down the shift button and clicking on the first image in this open folder. Click this window’s add button. Our project window is filled with images from our selected folder. If we had just chosen the Holiday travels folder, a new sub folder would have been added and we would have a sub folder created in our album, this is not what we want to happen.

Major Confusion WebPlus and JAlbum Tutorial screenshot 05 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 05 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 05 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 05 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 05 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 05 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 05 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 05 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 05 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 06 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 06 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 06 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 06 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 06 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 06 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 06 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 06 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 06 :: Kaptain-Chaos Designs ©2008

 Have a little play and explore the basic window. We will customise this once the other albums have been created. For now, save the album and close.


If we take a peek at our folders using Windows explorer we will see all the folders and files created within our ‘Holiday travels’ folder under the main ‘gallery’ folder.


Repeat this process for any other galleries you are making. For the tutorial site there are the ‘Touring UK’ and ‘Interesting images’ albums. These will each be within their own folder in the main gallery folder.

Select the BananaAlbum Skin, leaving everything at the default settings for the time being.

Step Four: Setting up WebPlus

Our tutorial site is already set up with the Gallery page. We need to add an iframe and buttons to this page for displaying and navigating between our Photo Galleries. Before we begin, we’ll add a frame to contain our album. Remember on the index page we added a frame for our main text? We can copy and paste it onto this page. For those who are coming to this fresh, for the purpose of this tutorial, I will continue to use the colour scheme set out for the tutorial site, please use your own colour scheme as relevant. The steps for creating this quick shape frame are listed in step 14 on this WebPlus tutorial page. Repeat this for the side panel and the Gallery title as seen in the tutorial site. For the Image Export options, rename the main quickshape as gallery_content1.png, the navigation quickshape as navigation_content1.png using the page_images folder as in previous tutorials.

Into the navigation frame add an HTML text box containing the title of our gallery, one for each title. For the time being, we can leave creating the hyperlinks for these and the iframe, concentrating on customising the JAlbum(s). This is where we tie the album(s) into our colour scheme.

Step Five: Customising the JAlbum skin

Opening our JAlbum gallery (‘File>Open Recent Album Project’) and keeping our WebPlus site also open, we will cross over between the two programs to duplicate  our WebPlus colour scheme into the BananaSkin Album.

Major Confusion WebPlus and JAlbum Tutorial screenshot 07 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 07 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 07 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 07 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 07 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 07 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 07 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 07 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 07 :: Kaptain-Chaos Designs ©2008

The HTML colour settings are available through the Colour Scheme and clicking edit on the colour required. On the left hand panel is the hex numeric HTML value for the colour. Copy and paste this value into the relevant box.


The background and fill colours govern the background of each image as it fades or switches between each image. Having this set to the same background colour as our frame helps to make the transitions blend almost seamlessly with our page.


Ticking the two boxes enables the right click full screen option and a text link to a slideshow option (rather than having the slideshow auto-play). A 5 second interval is added for the slideshow control.

Open the ‘More tab to choose the various options like ‘Show Title’ and ‘Show Description’ if you wish. For the slideshow I added the ‘Fade Image’ ‘Smooth’ and ‘Enable Menu’ options for the tutorial Gallery. Position the thumbnails where you would like them, for the tutorial site, they are placed at the bottom. There are other options and tabs to play around with, but I am going to leave things set as they are for now and move onto adding captions. Close this window, our settings are saved, Press ‘Make Album’ and preview the changes we have made so far to this album.

Back on the main JAlbum gallery page, our gallery images are laid out. Right click the first image, select edit and a popup window appears with some image filters on the right panel and, running along the bottom, an area to enter a description of the image. If you have decided to add various descriptions for your album, now is the time to enter these details. In the bottom right corner of the window are the navigation and ‘enter controls. Check through your images for any spelling mistakes and amend accordingly. Once all editing is completed click on the ‘enter’ or ‘return’ button and ‘Make Preview’.


Our JAlbum is now complete, repeat these steps for any other album you will be using in your site, for this tutorial I will do so for the Touring UK and Interesting Images albums.

Step Six: Uploading our albums

Using our favourite ftp file uploading software, we navigate to our website folder (public_html, httdocs or something similar) and upload (copy) the ‘gallery’ folder and everything in it to our server. In a browser, navigate to www.[our website name].com and type in /gallery/[Holiday travels - or the name you have created]/album/index.html. Congratulations, our web gallery is now live!

Step Seven: Setting up the iframe and navigation in WebPlus

Let’s finish this off by adding the iframe and navigation in our Serif WebPlus site and linking these to our new web gallery.

Major Confusion WebPlus and JAlbum Tutorial screenshot 08 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 08 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 08 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 08 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 08 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 08 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 08 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 08 :: Kaptain-Chaos Designs ©2008 Major Confusion WebPlus and JAlbum Tutorial screenshot 08 :: Kaptain-Chaos Designs ©2008

Add an iframe to the page, the iframe tool is found on the left hand toolbar. It is called the ‘Framed Document tool’. Drag out an iframe onto the web page. As soon as the mouse button is released a pop-up window opens. In the left hand panel choose an Internet page, in the internet address copy and paste the address of the first gallery you would like to open when someone visits the gallery page. Un tick the ‘Show Border’ checkbox and OK out of the window.

With more than one gallery we need a way to navigate between these otherwise there will only ever be one showing. This is why we have the navigation text in our left hand frame. Right click on each text link in turn and add a hyperlink. Choose an Internet Page as before and add the page link as before. This time, a little further down the window is a drop down box, Target Window or Frame, choose Document Frame from this list. Automatically the ifrm1 becomes the target - this is our iframe. One of the great things about this skin is, as previously mentioned, it automatically resizes to fit our iframe, no worries about scrollbars and the like.


Repeat this process for each navigation hyperlink and the relevant gallery. Job done.


Test our site by previewing it in several browsers first, once we are satisfied that everything is to our liking, publish to web!

Just a final note about our images. The sample galleries contain images of varying sizes. Images that are over a set size (in this case 1024 pixels x 768 pixels automatically get resized to fit this largest size. If any images do not fit these dimensions, they are proportionately resized so that the longest size fits within this. Smaller images are not resized. To maintain conformity between images it may be - only may be - desirable to proportionately resize smaller images to fit this largest size. If one entire gallery is made up of panoramic images the image sizes and thumbnail sizes can be individually set to their scale e.g. 800x2000.

Keep watching this site, as more tutorials for WebPlus are added, the example site will be used to provide a visual example of what is being covered in each tutorial.


Remember to keep having FUN with Serif software!


Ken (Major Confusion)