SAPO::Widget.Thumbs->init

TracNav

Contents
Main

This method will render a thumbnail dialog box, either for a PDF or a Website Image.

Syntax

PDF

new SAPO.Widget.Thumbs({
    'type':'pdf',
    'url':'www.sapo.pt',
    'mail':true,
    'ondemand':true,
    'divid':'pdfplace'
    });

This will produce the following DOM tree (example with send by E-Mail, the most complex):

<div class="pdfthumb">
<div style="display: inline; height: 20px; width: 60px;" id="hiddenelement1201">

<a href="http://webthumbs.sapo.pt/images/t/05/8f/....pdf">
<img border="0" src="http://js.sapo.pt/Assets/Images/Thumbs/pdf.png"/>
</a>

<img border="0" src="http://js.sapo.pt/Assets/Images/Thumbs/enviar.png" onclick="..."/>

<form onsubmit="..." method="post" action="" id="mf4922" style="display: none;">
<input type="text" onfocus="..."
 autocomplete="off" style="color: rgb(192, 192, 192);"
 value="enviar por mail" name="m" size="15" id="mail4922"/>
</form>

</div>
</div>

Thumbnail

new SAPO.Widget.Thumbs({
    'type':'thumbnail',
    'url':'www.mini.com',
    'size':'1',
    'divid':'thumbplace'
    });

This will produce the following DOM tree:

<div class="webthumb">
<div style="display: inline; height: 82px; width: 111px;" id="hiddenelement9464">
<img width="111" height="82" src="http://webthumbs.sapo.pt/images/t/31/6d/..._1.png"
 style="border: 1px dotted rgb(0, 0, 0); position: relative; left: 0px; top: 0px;"/>
</div>
</div>

CSS Styles

You can manipulate both PDF or Thumbnail styles using CSS.

The PDF widget is embedded in <div class="pdfthumb">...</div>

The Image thumbnail is embedded in <div class="webthumb">...</div>

Here's an example css style for the PDFs:

<style type="text/css">
.pdfthumb {
        font: normal 10pt Arial, Helvetica, sans-serif;
        border:2px dotted #DCDDD5;background-color:#eee;
        width: 270px;
}

.pdfthumb img {
        width: 16px;
        height: 16px;
        border: none;
        padding-right: 5px;
        vertical-align: middle;
}
.pdfthumb a {
        padding-right: 5px;
        text-decoration: none;
}
.pdfthumb a:hover {
        text-decoration: underline;
}
</style>

Compatibility

All browsers

Yes

Depends

Input Parameters

PDF

(object) items : JSON object
- type: pdf
- url: url of the website to render ( http:// is optional)
- mail: if true, will show a send by e-mail form button (optional, default is false)
- ondemand: if true, will only start rendering after user says so (optional, default is false)
- divid: optional div name to render the object. If not specified, will render inline.

Image Thumbnail

(object) items : JSON object
- type: thumbnail
- url: url of the website to render ( http:// is optional)
- size: Size of the thumbnail 0 to 6 (see table)
- divid: optional div name to render the object. If not specified, will render inline.

Size table:

code	width	height
0	68	50
1	111	82
2	150	112
3	200	150
4	250	187
5	300	225
6	400	300

Sample

http://js.sapo.pt/SAPO/Widget/Thumbs/sample/thumbs.html

Other methods from this Class

Error: Failed to load processor ListTagged

No macro or processor named 'ListTagged' found

Community feedback

Error: Failed to load processor AddComment

No macro or processor named 'AddComment' found