I would like to replace the text "Print..." that appears in caption with option showPrint:true with an icon.

Is there an easy way to do this?

Yes, this can be easily done. The printText option is used to replaced the default "Print..." string and, despite what it's name might suggest, it can accept HTML markup.

I would imagine you would like the icon to appear in all print contexts, and not just for one particular link, so this option should probably be set in globalOptions in the options.js file, or per page in an fbPageOptions definition. Here's an example using fbPageOptions:

fbPageOptions = {
    printText: &#039;<img src="printIcon.png" height="24" width="24" />&#039;
};

Be sure to set the width and height properties on the img element so that Floatbox can size itself correctly.

Nice and quick.

I guess rollover with double gif image like close button or next or previous would be more tricky?

No more tricky than getting a rollover effect on any page element by using css.

In this case we will use the background of Floatbox's <a id="fbPrintText"> element.

Set the printText option to ' ' (a single space character). Then add something like the following to the css styles for the host page:

a.fbx#fbPrintText {
    display: inline-block;
    width: 25px;
    height: 25px;
    background: transparent url(print.png) no-repeat 0 0;
    text-decoration: none;
}
a.fbx#fbPrintText:hover {
    background-position: 0 -25px;
}

This example is using a css sprite image via background-position. Some implementations use a separate image for the hover effect and would in this case change the background-image assignment instead.

By the way, the css selector for the fbPrintText anchor is over-specified to ensure it takes precedence over the styles set in floatbox.css.

Great. I tried provided css code ant it works. I only have to set printText to '&nbsp' to get proper vertical align with fbItemNumber.

Thanks.

I want to update FB and my icon for printing is gone.

New link look something like this:

<a rel="nofloatbox" href="#" class="fbx" style="color: rgb(0, 0, 0); background-image: url(floatbox/graphics/blank.gif);" tabindex="999" id="fb_124">&nbsp;</a>

There is no more id="fbPrintText", but I notice that there is new background image. Can this be modified somewhere in config or css?

The <a> element link does not have a predictable id or className, but the <span> element that is the link's parent does. A css reference that targets the link is ".fbPrintLink a". You can also use the print span's id of "#fbPrintLink" if you only ever have one floatbox open at a time.

not working wit css ".fbPrintLink a"
working with css "#fbPrintLink a" but
- on initial FB display there is no background
- on hover there is always underline even with text-decoration:none

I'm not sure if this is by my css design. When I will have more time I will build a clean sample site to check where is the problem.

Probably need to crank up the specificity of the css selector for the className version. "#fbx .fbPrintLink a" should work.

Looking forward to your example.

Css selector "#fbx .fbPrintLink a" is working, but I can't get rid off hover underline.

I created temporary sample.

"text-decoration:none;" ????

Consider using the printText option to define what you want to appear as the text inside the print link - that's what it's there for. For example:

<script>
fbPageOptions = {
   printText: &#039;<img src="this.png" onmouseover="this.src=\&#039;that.png\&#039;" onmouseout="this.src=\&#039;this.png\&#039;" />&#039;
};
</script>

And of course you can sex that up with any style attribute you want/need.