rss_thumbpop

The rss_thumbpop plugin was conceived as I attempted to build a small image gallery. I wanted to create a thumbnail layout such as the one generated by the cgd_dynagallery plugin but also open a popup window with the full size image as with the dca_pop plugin.

After starting out with a bastardized combination of the two plugins, I decided to take the plunge and create my own so that I could add some additional bells and whistles.

Functionality Overview

• Generates a thumbnail gallery using a table or floated divs
• Allows all categories, multiple categories or use of the global category
• Thumbnails are hyperlinked
  • and shown in a popup of the full size image only
  • and shown in a popup page with the full size image and caption
  • and the full size image is shown on the same page after a reload
  • and the full size image is shown on the same page using javascript with no reload
• Can be used to automatically show a gallery based on the current article ID
• Supports paging
• Images can be ordered by name, caption, date asc, date desc or random
• Define the padding around the image in the popup window
• Define the number of images per row
• Optionally show image captions in thumbnail view
• Optionally show image alt text in thumbnail view
• Optionally include a header label in thumbnail view
• Optionally turn popups off
• Built in classes rssThumbs, rssThumbLabel, rssThumb, rssImg, rssThumbFloat for easy CSS styling

Notes

IMPORTANT: If you are using “float” mode you must add styling for the rssThumbFloat class. See the example at the bottom or check the Floatutorial.

IMPORTANT: If you are using the showpagelinks default setting with paging you must add styling for the rssThumbNav id. See the example at the bottom or check the Floatutorial.

TIP: Use the glx_admin_image plugin to make your life a lot easier.

Revision History

// Version 0.1 – 12/07/2004 – Initial Release
// Version 0.2 – 12/08/2004 – Added paging support with use of limit, showpagelinks, backlabel and nextlabel properties.
// Version 0.3 – 1/10/2005 – Added articlethumbs property to automatically show a gallery named “article-” + the current article ID.
// Version 0.4 – 1/10/2005 – Added orderby, pagepop using thumbpop.php, padheight, padwidth.
// Version 0.5 – 5/1/2005 – Added divpop, jpop, showblank, blankimg, clickonly, usearticle, catfield, addpermlink, fullontop, allcats, showalt, orderby alt + random, thumbpop.php is no longer needed.

Plugin Attributes

category
Accepts a comma separate list of categories. NO spaces. If currently browsing by category, the global category will be used as the default.
Default: ’$c’ (global category)
Example: category=”catOne,catTwo”

allcats
Displays images from all categories.
Default: ‘0’
Example: allcats=”1”

mode
Accepts one of two options, table or float. Table will surpirsingly enough layout the images in a table. Float will layout the images in a series of divs that can be floated as in Floatutorial: Tutorial 4.
Default: ‘table’
Example: mode=”float”

articlethumbs
Automatically displays a thumbpop gallery for the current article if a gallery exists using a cateogory name of “article-”+ArticleID. For example, to automatically show a gallery for article 39, create a category called “article-39”.
Default: ‘0’
Example: articlethumbs=”1”

limit
Limits the number of images shown per page.
Default: ‘’
Example: limit=”6”

orderby
The order in which the images will be returned.
Options: “name”, “caption”, “alt”, “dateasc”, “datedesc”, “random”
Default: ‘’
Example: orderby=”caption”

divpop
Displays the full size image on the same page as the thumbnails. The page will be reloaded.
Default: ‘0’
Example: divpop=”1”

jpop
Displays the full size image on the same page as the thumbnails using javascript using the onclick and onmouseover events. No page reloading is required. Based on Jeremy Keith’s Javascript Image Gallery.
Default: ‘0’
Example: jpop=”1”

fullontop
When using the divpop or jpop option, the full size image is displayed above the thumbnails. If set to “0”, it will be displayed below the thumbnails.
Default: ‘1’
Example: fullontop=”0”

blankimg
When using the jpop option, this placeholder image is shown where the full size image will appear before a thumbnail is clicked.
Default: ’/img/blankphoto.jpg’
Example: blankimg=”/images/blank.jpg”

showfullcaption
When using the jpop option, the caption will be shown under the full size image.
Default: ‘0’
Example: showfullcaption=”1”

showblank
When using the jpop option, determines whether the blank placeholder image will be shown. If not, the last photo in the gallery will be used as the initial full size image.
Default: ‘0’
Example: showblank=”1”

clickonly
When using the jpop option, the full size image will only be shown using the onclick event removing the use of onmouseover.
Default: ‘0’
Example: clickonly=”1”

usearticle
Uses an article field to determine the image category to use for the article. Any article field can be used. This would typically be used in an article list.
Default: ‘0’
Example: usearticle=”1”

catfield
When usearticle=”1”, this is the article field that stores the image category that will be used to create the gallery.
Default: ‘custom_1’
Example: catfield=”excerpt”

addpermlink
When usearticle=”1”, the thumbnails shown will be permlinked to the article that they belong to.
Default: ‘0’
Example: addpermlink=”1”

pagepop
Displays the image and its caption in a popup page.
Default: ‘0’
Example: pagepop=”1”

padheight
Pads the height of the popup window in pixels.
Default: ‘20’
Example: padheight=”100”

padwidth
Pads the width of the popup window in pixels.
Default: ‘20’
Example: padwidth=”100”

showpagelinks
Automatically outputs <txp:newer> and <txp:older> tags for paging as an unordered list below the images. If you turn this off you can manually add the <txp:newer> and <txp:older> tags to your page.
Default: ‘1’
Example: showpagelinks=”0”

backlabel
The text used for the previous page link.
Default: ‘Back’
Example: backlabel=”< back”

nextlabel
The text used for the next page link.
Default: ‘Next’
Example: nextlabel=”next >”

cols
The number of columns in the table or the number of images floated horizontally.
Default: ‘3’
Example: cols=”2”

label
A label that will be used as a table header or another div above the floats.
Default: ‘’
Example: label=”My Photos”

showcaption
Displays the image caption below the image.
Default: ‘1’
Example: showcaption=”0”

showalt
Displays the image’s alt text below the image.
Default: ‘0’
Example: showalt=”1”

nopop
The popup link will not be generated on the image. If dca_pop is not installed the popup will not be generated even if this is set to true.
Default: ‘0’
Example: nopop=”1”

Examples

.rssThumbFloat {
  float: left;
  width: 150px;
  border: 1px solid #999;
  margin: 0 15px 15px 0;
  padding: 5px;
  text-align: center;
  font-size: .85em;
}

My Pictures

Black Rock Cove

Black Sands Beach

Mars on Kauai

Somewhere over the...

The Iao Needle

Sample prev/next links styling:

ul#rssThumbNav {
list-style-type: none;
margin: 0;
padding: .5em 0;
border-top: 1px solid #666;
}
ul#rssThumbNav li a {
display: block;
width: 5em;
color: #FFF;
background-color: #036;
padding: .2em 0;
text-align: center;
text-decoration: none;
}
ul#rssThumbNav li a:hover {
color: #FFF;
background-color: #69C;
}
ul#rssThumbNav .left { float: left; }
ul#rssThumbNav .right { float: right; }