Test Index   ·   Photo Borders   ·   Table of sliced images - Rounded corners   ·   Sliced images and manually linked   ·   Overlap Images   ·   Create a Watermark   ·   Gif Png Transparency   ·   Buttons-Image Links   ·   Image Names   ·   Image Theft   ·   Lake Applet   ·   Other applets   ·   Slideshow1   ·   Slideshow2   ·   Slideshow3   ·   Galleries   ·   DD Thumbnail Viewer   ·   image map   ·   xara thumbnail   ·   Random Image   ·   LOGO BRANDING   ·   Animated Image   ·   photo with sound


Galleries:

There are so many different ways to display your images.
Consider my 2 designs Filmstrip and iFrame or one from Curtis
all were made to save your visitors
mouse clicks & have no pop-up windows!

Now 4 totally different styles to choose from!
1) Filmstrip (3 ways to do it)   
2) Mini-gallery                


 STYLE 1: FILMSTRIP

These three galleries have some terrific benefits:

Very easy if you can build one table in CSB.
Can add any comment you want under, beside photos or above large photos.  
Can have any color combination you want.
Can have any background image you want for the large image.
Your large picture can be a lot bigger than mine.
Only have to make 2 page styles!
The "index" with the thumbnail images, and
The "content" page that is copied several times-each content page has one large image.
Title of page appears on middle frame (I titled and named my pages the same as the picture number on film roll)
Once you get the format set, you can just clear the images and reload for a second gallery.
No code needed unless you want to change the colors of your scrollbars like I did and that's just changing colors!

Optimize/thumbnail photos outside of CSB!
To make QUICK  thumbnails, I recommend this free program:
Easy Thumbnails and KW has a simple tutorial

CLICK IMAGE TO SEE A GALLERY

 (My favorite style)
 
Thumbnail gallery with area for large images
1
THUMBNAIL RIGHT

Thumbnail section scrolls vertically because the thumbnail table is longer than the window.
Click on a thumbnail and the larger image appears in the larger section of screen

  
2
THUMBNAIL TOP
Thumbnail section scrolls vertically because you will insert 3 separate thumbnail tables in the top border
Click on a thumbnail
and the larger image appears in the lower section of screen
Should maximize browser
  
gallery 3 - thumbnail on bottom
3
THUMBNAIL BOTTOM
Thumbnail section scrolls horizontally because the thumbnail table is wider than the window.
Click on a thumbnail and the larger image appears in the upper section of screen


MAKE YOUR OWN GALLERY!   All the galleries use the same techniques:  

STEP A:  INDEX
Create an INDEX page.  This will be the home page (index) for the gallery.
Make a border at  right (1), top (2), bottom (3)    my samples have margins =1
Build a table inside that border to fit your thumbnails.  
Put one thumbnail in each cell  of the table.
You can put a small label under each thumbnail. I used numbers: 10 11
These are my settings, yours may be different to suit your images
Some people use much smaller thumbnails than I show.
And I had my monitor set to 800x600 while building.  
If you have a higher resolution, you can adjust as necessary to fit YOUR screen best
height or width
1 right
2 top
3 bottom
border
180px
190px
160px
table
145px wide
center
120px high
center
120px high
table at top edge of the border
how many
tables in border
 (for 15 images)
1 table:
15 row
1column
3 tables:
1 row
5 column
 with a blank line between each
1 table:
1 row
15 columns
cell width
145px
140px
140px
thumbnail width
135px
135px
135px
how the
scrollbar will look when I put my pictures in the thumbnail table(s)
table is longer
than window so it  causes a vertical scrollbar on the
right side (see pic)
multiple tables
put into the top border causes a short vertical scrollbar to appear on the right side
the table is wider than the window so it causes a bottom horizontal scrollbar
The middle section of the index page will have a description of the gallery or whatever message you want to have. (If you want to return to this page after you are done with the photos, make the last item in the last table cell link back to this index page. I included a way to get to a form and instruction to close the page when done.)
Here are my three index pages:  

STEP B:  CONTENT
Create a CONTENT page.  It's simply any other page in your tlx file that is different than your index page!  It will hold a large image. This page will load into the middle section when you click on a thumbnail.
Point to your map, right click and Insert page. That's all!
How should it look? That's totally up to you! You design it any way you want.  Choices for options like borders (use a border, 4 borders, no borders), background (use plain white, a color, or image) are completely up to you.    I used margins = 1 to maximize space.
 Please visit this page and glance at the map below!
For reference, take a look at my three versions:
1 right large image with border all around.  Equally attractive with no borders!
2 thumbnail on top   with bottom border 24 px for name of file
3 thumbnail on bottom  with top border 24 px for name of file.
Now make several copies of this empty content page:
Click the page on the map and right click your mouse, choose COPY (or Ctrl C)
Now point the mouse to the map and right click your mouse, choose PASTE  (or Ctrl V)
Paste another, Paste another, Paste another until you have one page for each of your thumbnail images (15 images, then you need 15 empty content pages).
Now give each of these content pages a different name
Right click, Properties > Page  Put the name in the short name field.
I used numbers as the name of the page:  10, 11, etc. (they are easiest and fastest to write).
More info: SHORT NAME FIELD
If left blank, the page receives a page name the same as the id #, id123.htm
If you enter a title in here, you get a page name (contacts or photos or pets, etc.) Your short title should NEVER be more than one word, unless you use an underline or dash to join them! CSB can be nice and put in the underline for you, but get into the habit of naming properly: newproducts,  new-products,  new_products are ok, but not new products.
Do NOT use other symbols in the short title field, (& $ #, etc)
Use lowercase names, and avoid CAPS when naming pages (images and uploaded files too). Many servers see Caps.htm, CAPS.htm, caPS.htm as three separate pages so caps can interefer with linking if you are not exact.
Now place a large image and description into each of the content pages.   Ex: Put large picture 10 in content page 10, etc..in the same order as your thumbnails you put in to the index page.  Include any description for the image on the content page too. (usually below the image)

This is the way your map should now look (without the notes of course, and no form page unless you want one).
STEP C:  LINK & PUBLISH
Set each thumbnail image to open in the MIDDLE frame of the index page.
On the index page, right click a thumbnail > Create a Link to URL
In CSB4: type in the url (use the page name) and use the target dropdown
example link:   10.htm              target drop down: TRLX_Middle
In CSB3 or Trellix:  type in your url (use the page name), then target behind, but do not close the quote.  The program will do it for you.
example link:  10.htm" target="TRLX_Middle

More info: RELATIVE LINKING
Absolute linking is a full URL address: http://www.nacf.org.uk/kingston/
This is necessary for any link coming in from offsite, or any link going out offsite. You may also choose to use this as the standard way you input links. That's fine.

Relative linking.... it's shorter, less typing.
It is telling the server to stay in the same website, and then do the following:
id123.htm
/photos/123.htm
 ../id123.htm
../gallery/123.htm
= to another page in the same directory
= to subdirectory photos, to page 123.htm
= go up to root directory to page 123.htm
= go up to root directory, to subdirectory gallery to page 123.htm (from one subdirectory to another)
This gallery uses the first example because all the pages are in the same tlx file, published to the same directory.
NOTE: You will receive a warning notice from the program because you will not be putting a full address into the field.  That's ok. Say YES you want to continue.

Publish this tlx file to a NEW subdirectory. I used:  gallery020103 as a subdirectory name so I know when the photos were taken.  
In the publishing options, check off that you want to publish to a subdirectory and name it
The very first time that you click to publish that tlx design file, CSB will connect to your website, check for your subdirectory and not find it.
CSB will make the folder then upload the web pages to your new subdirectory! Your main site is not disturbed.
YOU MUST PUBLISH WITH HTML FRAMES.  The gallery links will not work unless you have frames on.  Under the publishing options, check the box for FRAMES.  
(Want to understand more about frames?  Visit this page to see demos with and without frames, and more...)  
Tweak if necessary for the result you want.
Want to make more of these galleries?  Use  File  Save As  to create a new copy of the file.  Use Edit > Page Format to modify the color of the background etc FAST to make another gallery of the same style, but different color, or leave it the same and reload images.  Publish each gallery to it's own subdirectory!
(Thank you Colin for providing feedback on this tutorial, also provided the images used for XARA thumbnail page.)


Additonal options to make your gallery different:
OPTION 1:  Open your gallery in a larger window.  Open your gallery turning off menubar, etc. so the window is larger for better viewing.  Works well with Right and TOP formats.  (The scrollbar disappears under the start menu when used with Bottom but can still be done.) Load this code into an Insert > HTML and put the image you want to use as your clickable button into the webcomponent.  Change gallery and image:

<A HREF="javascript:void(0)"
ONCLICK="open('../gallery020103/', 'miniwin', 'toolbar=1, location=0, directories=0, status=0, menubar=0, scrollbars=1, resizable=1, width=790, height=560')"><img src="^GEMDIR/gallery3top-tn.jpg"></A>
OPTION 2:  Change your scroll bar colors. I made my track the same color as my page to blend.  The scrollbar is the same purple used in the page.  
Load this code into an Insert > HTML  Change scrollbar and track colors.

<style>
<!--
BODY{
scrollbar-face-color:#9898D0;
scrollbar-arrow-color:indigo;
scrollbar-track-color:#C0DCC0;
scrollbar-shadow-color:'';
scrollbar-highlight-color:'';
scrollbar-3dlight-color:'';
scrollbar-darkshadow-Color:'';
}
-->
</style>
 
 color schemes:
Samisite home page tones

Black with Cyan (blue)
    USING CSB4 or CSB5?        

You can download a tlx file that is ready for you to insert text, images and link thumbnails, with these built-in features:
thumbnail table with space for 15 images
RELOAD the gallery (back to start page) link
previous and next page links
scroll bar color script deisgned to compliment
enough pages pre-set for 15 large images (more can be added with copy paste method)
Notes included in the file with some links back to this page and others to assist with your gallery, including how to change the color quickly on all pages.
Earlier versions did not have all options!

Just click the image and Save file to Disk   (do not right click)
CSB4 users: These files were designed for you!
CSB 5 users:  On first use, you must open, FILE SAVE AS (give it a new name) and convert to the CSB 5 format, then use as normal.
Trellix and CSB 3 users must manually make their own galleries (as detailed here)

Send me an email message. I would really enjoy seeing your finished gallery! Or any suggestions!  
color schemes:
Dark Blue with Yellow

White with Cyan (blue)

Would you like to see other sites that have applied one of my filmstrip gallery designs (above)?
Beth has made several beautiful Scotland galleries (her own images) (for 800x600)

(These are temporarily offline for renovation...)
Rick shows off a dream in this gallery (unlike most of us, his ship really has come in...) (for 800x600 - full size page)
Kate Blake has this wonderful black and deep green version (for 800x600)



 STYLE 2: Implement A Mini Gallery Viewer from Curtis       

Mini Gallery version 1 -  Curtis
curtis mini gallery

Click a thumbnail, see larger image.



CODE: (use either)
Mini Gallery version 2 -  Sam
product mini gallery

Modifications:
click statement, see example - thumbnails are different than large image
no dotted line around linked image
center image starts on different image



 ^GEMDIR in code - put pictures into webcomponent
   To capture the code, press Select All then COPY the contents.
MUST change each gEMDIR to GEMDIR before using code!
Select All

<SCRIPT language=JavaScript>
<!-- Original:  Jenny Blewitt (webmaster@webdesignsdirect.com) -->
<!-- Web Site:  http://www.webdesignsdirect.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
   }
}
//  End -->
</SCRIPT>
<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->
      <CENTER>
      <TABLE cellSpacing=0 cellPadding=0 width=360 border=0>
        <TBODY>
        <TR>
          <TD><A href="javascript:doPic('^GEMDIR/p1.jpeg');"><IMG height=60
            src="^GEMDIR/p1.jpeg" width=90
          border=0></A></TD>
          <TD><A href="javascript:doPic('^GEMDIR/p2.jpeg');"><IMG height=60
            src="^GEMDIR/p2.jpeg" width=90
          border=0></A></TD>
          <TD><A href="javascript:doPic('^GEMDIR/p3.jpeg');"><IMG height=60
            src="^GEMDIR/p3.jpeg" width=90
          border=0></A></TD>
          <TD><A href="javascript:doPic('^GEMDIR/p4.jpeg');"><IMG height=60
            src="^GEMDIR/p4.jpeg" width=90
          border=0></A></TD></TR>
        <TR>
          <TD align=middle colSpan=4><IMG height=240
            src="^GEMDIR/p1.jpeg" width=360 border=0
            name=mainpic></TD></TR>
        <TR>
          <TD><A href="javascript:doPic('^GEMDIR/p5.jpeg');"><IMG height=60
            src="^GEMDIR/p5.jpeg" width=90
          border=0></A></TD>
          <TD><A href="javascript:doPic('^GEMDIR/p6.jpeg');"><IMG height=60
            src="^GEMDIR/p6.jpeg" width=90
          border=0></A></TD>
          <TD><A href="javascript:doPic('^GEMDIR/p7.jpeg');"><IMG height=60
            src="^GEMDIR/p7.jpeg" width=90
          border=0></A></TD>
          <TD><A href="javascript:doPic('^GEMDIR/p8.jpeg');"><IMG height=60
            src="^GEMDIR/p8.jpeg" width=90
          border=0></A></TD></TR></TBODY></TABLE></CENTER>


 manual ftp upload of folder galleryc
  To capture the code, press Select All then COPY the contents.
Select All

<SCRIPT language=JavaScript>
<!-- Original:  Jenny Blewitt (webmaster@webdesignsdirect.com) -->
<!-- Web Site:  http://www.webdesignsdirect.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
   }
}
//  End -->
</SCRIPT>
<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->
      <CENTER>
      <TABLE cellSpacing=0 cellPadding=0 width=360 border=0>
        <TBODY>
        <TR>
          <TD><A href="javascript:doPic('galleryc/p1.jpeg');"><IMG height=60
            src="galleryc/p1.jpeg" width=90
          border=0></A></TD>
          <TD><A href="javascript:doPic('galleryc/p2.jpeg');"><IMG height=60
            src="galleryc/p2.jpeg" width=90
          border=0></A></TD>
          <TD><A href="javascript:doPic('galleryc/p3.jpeg');"><IMG height=60
            src="galleryc/p3.jpeg" width=90
          border=0></A></TD>
          <TD><A href="javascript:doPic('galleryc/p4.jpeg');"><IMG height=60
            src="galleryc/p4.jpeg" width=90
          border=0></A></TD></TR>
        <TR>
          <TD align=middle colSpan=4><IMG height=240
            src="galleryc/p1.jpeg" width=360 border=0
            name=mainpic></TD></TR>
        <TR>
          <TD><A href="javascript:doPic('galleryc/p5.jpeg');"><IMG height=60
            src="galleryc/p5.jpeg" width=90
          border=0></A></TD>
          <TD><A href="javascript:doPic('galleryc/p6.jpeg');"><IMG height=60
            src="galleryc/p6.jpeg" width=90
          border=0></A></TD>
          <TD><A href="javascript:doPic('galleryc/p7.jpeg');"><IMG height=60
            src="galleryc/p7.jpeg" width=90
          border=0></A></TD>
          <TD><A href="javascript:doPic('galleryc/p8.jpeg');"><IMG height=60
            src="galleryc/p8.jpeg" width=90
          border=0></A></TD></TR></TBODY></TABLE></CENTER>

This script is modified.  Visit Curtis' website for his version.
(cmg02.com/scripts/gallery.htm is currently offline)


 3) iFrame Gallery is on a separate page without a top border to allow for more space.