Editing Image Rollovers (Poshytip)

[[Category:CMS Documentation]] [[Category:Littled Libraries]] [[Category:Albums CMS]] [[Category:jQuery/AJAX]] [[Category:Web Development]]     

== 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<br />`$('#listings-container').galleries('bindAlbumListingsHandlers')`<br />or<br />`$('#listings-container').galleries('bindGalleryButtons')`

<syntaxhighlight lang="javascript">
/* from /scripts/littled/gallery.js: */
$(lclSettings.previews.rolloverSelector).poshytip(lclSettings.previews);
</syntaxhighlight>

To override a setting: 

<syntaxhighlight lang="javascript">
$('.album-listings').galleries('bindAllbumListingsHandlers' {
	previews: {
		className: 'tip-yellowsimple'
	}
});
</syntaxhighlight>

Library settings: 

<pre>
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()
</pre>

== Markup==

=== PHP include file ===

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

=== Thumbnail `<nowiki><img></nowiki>` element ===

* `class="album-tn"` for album listings or `class="gal-ro" for gallery listings`<br />The `album-tn` and `gal-ro` classes are the hook for the jQuery/poshytip handlers. 
* This `<nowiki><img></nowiki>` 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:<br /><syntaxhighlight lang="html4strict">
<div class="error" style="text-align:center;">no thumbnail</div>
</syntaxhighlight>

=== Preview `<nowiki><img></nowiki>` element ===

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

== See also ==

* [[Album/Gallery Listings]]