. The width is retrieved from the backend as a parameter value (pval) based on the image thumbnail's width. A within the
receives the image caption from the backend.
: width: px; text-align: center;
*/
div.captioned-image-center p {
/*float: left;*/
}
/* Taglet note (5): When a captioned image's alignment is floated-left
: */
div.captioned-image-outer-wrapper.floating-image-left {
/*float: left;
border: 0px solid #A9A9A9;
margin: 0px;*/
}
/* Taglet note (6): When a captioned image's alignment is floated-right
: */
div.captioned-image-outer-wrapper.floating-image-right {
/*float: right;*/
}
div.captioned-image-outer-wrapper {
/*width: 188px;
float: left;
border: 0px;*/
}
div.captioned-image-inner-wrapper a:hover {
border: 0px;
}
/* Taglet note (7): an image's URL is needed for the source attribute eg: 
. This is retrieved from the backend as a parameter value (pval)
: ![]()
Taglet note (8): an image's caption is needed for the alternate text attribute eg: ![?]()
. A receives the caption from the backend.
: */
.captioned-image-inner-wrapper {
/*float: left;
margin: 0px;
padding: 0px;
width: 188px;
height: 145px;
border: 0px;*/
}
.captioned-image-inner-wrapper img {
/*position: absolute;*/
}
/* Taglet note (9): a style attribute is applied to the image caption's paragraph eg: . The width is retrieved from the backend as a parameter value (pval) based on the image thumbnail's width. A within the
receives the image caption from the backend.
: width: px; text-align: center;
*/
.captioned-image-inner-wrapper p {
/*background: url(../images/bg_caption.png) repeat-x;
background-position: bottom;
height: 30px;
position: relative;
text-transform: uppercase;*/
font-size: 12px;
line-height: 17px;
padding: 2px 0px 10px 0px;
width: 216px;
}
/* The .inline-block class is used to add inline-block display elements for caption wrappers. For more info:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/ */
.inline-block {
/*display: -moz-inline-stack;
display: inline-block;
zoom: 1;
*display: inline;*/
z-index:2;
}
/* @end captioned image */
/* @group Image - Lightbox */
/* TAGLET NAME: Image - Lightbox
TAGLET GROUP: Images and Media
Taglet note (1): an anchor for the lightbox image eg: ...
:
Taglet note (2): ...has an 'onClick' attribute which calls a 'showLightbox' Javascript function eg:
: showLightbox
Taglet note (3): ...the anchor also has a title attribute which uses an image's caption which is retrieved from the backend as a parameter value (pval)
: */
a.lightbox-image-link {
}
/* Taglet note (4): the lightbox image's source attribute eg: needs the image's URL, this is retrieved from the backend as a parameter value (pval)
: ![]()
Taglet note (5): an image's caption is needed for the alternate text attribute eg: ![?]()
. This is retrieved from the backend as a parameter value (pval)
: */
a.lightbox-image-link img {
}
/* Taglets (advanced): What are the and
The part of a taglet:
Sometimes when an interactive AJAX page is generated, it is necessary to pre-load some content into page, but hide it until it is needed eg: the lightbox feature is hidden until the user clicks on an image. Any tags in the part of a taglet will be generated into a template's tag - but remain hidden until they are required. Most often, a user will click on an element with an 'onClick' attribute which activates a Javascript function to show the content. In this taglet we have:
: part of a taglet:
Some taglets have JavaScript code that needs to be run when a page is loaded. Any scripts that are placed in the part of a taglet will be inserted into a template's tag allowing them to be executed when a page is loaded. Indigo manages all Javascript libraries and functions for designers - all designers need to do is include the tag in the head of every template */
/* Taglet note (6): in the section of this taglet for hidden content, an underlay div has the following styles
:
*/
div#lightbox-underlay {
}
/* Taglet note (7): in the section of this taglet for hidden content, an overlay div has the following styles
: