Portfolio TBLA v1.0 [portfolio_tbla] - Photo Spot Viewer

Table viewer optimized to show images in a portfolio style.

Parameters

Open Method   [open]
• Lightbox [lightbox] Orders the images in the default image folder ordering.
• Open image in popup window [popup] Orders the images by their file name.
• Open link [link] Orders the images by their title, if there is one.
• Open link in popup window [linkpopup] Orders the images by date putting the newer ones first.
• Do not open [thumbnails] Orders the images by date putting the older ones first.

Titles & Links   [titles]
• Show title as text [show] Orders the images in the default image folder ordering.
• Show title as link [link] Orders the images by their file name.
• Show title as link and open in popup window [linkpopup] Orders the images by date putting the newer ones first.
• Do not show title [no] Orders the images by date putting the older ones first.

Show Pages   [pages]
If set, the page links will be shown.

Columns   [max_cols]
The number of columns in the table layout.
Example: 3

Max Rows   [max_rows]
Maximum rows in the table layout.
Example: 3

Thumbnail Width   [thumb_width]
The thumbnail width in pixels.
Example: 50

Thumbnail Height   [thumb_height]
The thumbnail height in pixels.
Example: 50

CSS File   [css_file]
A CSS file to be loaded with the gallery.
Example: images/stories/my_css_file.css

Example CSS

This viewer needs some support from CSS. Here is an example set up:

.ps_viewer_portfolio_tbla .colsplit {
	width: 1px;
	height: 1px;
}

.ps_viewer_portfolio_tbla .ps_cell {
	background: #000 url(images/cell.png) repeat-x left top;
}

.ps_viewer_portfolio_tbla .title_l1 .mod_title {
	color: #3399cc;
	font-size: 1.2em;
	margin: 0px 15px 0px 15px;
	padding: 0px 0px 0px 27px;
	line-height: 42px;
}
.ps_viewer_portfolio_tbla .title_l1 .mod_title .mod_word {
	color: #fff;
}

.ps_viewer_portfolio_tbla .title_l1 {
	background: #1f232a url(images/header_top.png) repeat-x left top;
}
.ps_viewer_portfolio_tbla .title_l2 {
	background: url(images/header_top2.png) no-repeat 14px 12px;
}
.ps_viewer_portfolio_tbla .title_l3 {
	background: url(images/header_top3.png) no-repeat right 17px;
}

.ps_viewer_portfolio_tbla .image {
	margin: 16px 0px 16px 0px;
	text-align: center;
}

.ps_viewer_portfolio_tbla .description {
	margin: 0px 15px 0px 15px;
}

.ps_viewer_portfolio_tbla .description a.readmore,
.ps_viewer_portfolio_tbla .description a.readmore:link,
.ps_viewer_portfolio_tbla .description a.readmore:visited,
.ps_viewer_portfolio_tbla .description a.readmore:hover {
	color: #3399cc;
	text-decoration: none;
	display: block;
}

.ps_viewer_portfolio_tbla .close {
	clear: both;
	height: 15px;
}

.ps_viewer_portfolio_tbla .footer {
	height: 1px;
	background: url(images/footer.png) no-repeat center top;
}

.ps_viewer_portfolio_tbla .pages {
	margin: 10px 0px 10px 0px;
	text-align: center;
}