jQuery in Action
208
CHAPTER 7
Extending jQuery with custom plugins
Because we have a non-trivial number of parameters to control the operation of
the Photomatic (many of which can be defaulted), we utilize an object hash to
pass them in as outlined in section 7.2.3. The possible settings that we can specify
are shown in table 7.1.
the Photomatic (many of which can be defaulted), we utilize an object hash to
pass them in as outlined in section 7.2.3. The possible settings that we can specify
are shown in table 7.1.
With a nod to the notion of test-driven development, let's create the test page for this
plugin before we dive into creating the Photomatic Plugin itself. The code for this
page, available in the file chapter7/photomatic/photomatic.html, is shown in list-
ing 7.5.
plugin before we dive into creating the Photomatic Plugin itself. The code for this
page, available in the file chapter7/photomatic/photomatic.html, is shown in list-
ing 7.5.
<html>
<head>
<title>Photomatic Test</title>
<link rel="stylesheet" type="text/css" href="../../common.css">
<link rel="stylesheet" type="text/css" href="photomatic.css">
<script type="text/javascript"
src="../../scripts/jquery-1.2.1.js"></script>
<script type="text/javascript"
src="jquery.jqia.photomatic.js"></script>
<script type="text/javascript">
$(function(){
$('#thumbnails img').photomatic({
Table 7.1 The settings properties for the
Photomatic()
plugin command
Setting name
Description
firstControl
(String|Object) Either a reference to or jQuery selector that identifies the DOM
element(s) to serve as a first control. If omitted, no control is instrumented.
element(s) to serve as a first control. If omitted, no control is instrumented.
lastControl
(String|Object) Either a reference to or jQuery selector that identifies the DOM
element(s) to serve as a last control. If omitted, no control is instrumented.
element(s) to serve as a last control. If omitted, no control is instrumented.
nextControl
(String|Object) Either a reference to or jQuery selector that identifies the DOM
element(s) to serve as a next control. If omitted, no control is instrumented.
element(s) to serve as a next control. If omitted, no control is instrumented.
photoElement
(String|Object) Either a reference to or jQuery selector that identifies the <img>
element that's to serve as the full-sized photo display. If omitted, defaults to the
jQuery selector '#photomaticPhoto'.
element that's to serve as the full-sized photo display. If omitted, defaults to the
jQuery selector '#photomaticPhoto'.
previousControl
(String|Object) Either a reference to or jQuery selector that identifies the DOM
element(s) to serve as a previous control. If omitted, no control is instrumented.
element(s) to serve as a previous control. If omitted, no control is instrumented.
transformer
(Function) A function used to transform the URL of a thumbnail image into the
URL of its corresponding full-sized photo image. If omitted, the default transforma-
tion substitutes all instances of thumbnail with photo in the URL.
URL of its corresponding full-sized photo image. If omitted, the default transforma-
tion substitutes all instances of thumbnail with photo in the URL.
Listing 7.5
The test page that creates the Photomatic display shown in figure 7.2
Invokes the
Photomatic Plugin
Photomatic Plugin
b