Image Rollovers (Poshytip)

Overview

Documentation of rollover actions on thumbnail images causing larger versions of the images to appear to the side of the thumbnails.

JavaScript

• Requires “poshytip” JavaScript library in addition to the JQuery libraries.
• JQuery handlers
• Handler assigned within either
  $('#listings-container').galleries('bindAlbumListingsHandlers')
  or
  $('#listings-container').galleries('bindGalleryButtons')

/* from /scripts/littled/gallery.js: */
$(lclSettings.previews.rolloverSelector).poshytip(lclSettings.previews);

To override a setting:

$('.album-listings').galleries('bindAllbumListingsHandlers' {
	previews: {
		className: 'tip-yellowsimple'
	}
});

Library settings:

previews.rolloverSelector: '.gal-ro'
previews.className: 'tip-darkgray'
previews.alignTo: 'target'
previews.alignX: 'right'
previews.alignY: 'center'
previews.offsetX: 8
previews.followCursor: true
previews.content: function()

Markup

PHP include file

<? include (COMMON_TEMPLATE_DIR."content/albums/rollover_thumbnail.php"); ?>

Thumbnail `<img> element

• class="album-tn" for album listings or class="gal-ro" for gallery listings
The album-tn and gal-ro classes are the hook for the jQuery/poshytip handlers.
• This <img> element must have a title` attribute with some non-empty string value. If not, a JavaScript error is thrown within the PosyTip library.
• When no thumbnail is available for the record:
  

  <div class="error" style="text-align:center;">no thumbnail</div>

Preview `<img> element

• Follow the thumbnail <img class="album-tn"> element with an <img> element containing the medium or full-sized image wrapped in <span> tags, depending on which size should appear on rollover.
  • <span> tag attributes:
  • <span class="tooltip-content">
The tooltip-content` class will hide the full-sized image until a rollover event is captured by the thumbnail.

See also

• Album/Gallery Listings