Usage javascript:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
$('#menu').ll_menu({
'inSpeed': 150, //rýchlosť animácie pri zobrazení
'inTimeout': 0, //pozdržanie pred zobrazením
'inTransition': 'slide', //animácia pri zobrazení - none, fade, slide
'outSpeed': 200, //rýchlosť animácie pri skrytí
'outTimeout': 500, //pozdržanie pred skrytím
'outTransition': 'slide', //animácia pri skrytí - none, fade, slide
'hideOnChange': true, //skryť podmenu pri prebehnutí na iný prvok, bez čakania (nezostanú vyrolované viaceré podmenu)
'menuOffsetX': 0, //offset X všetkých submenu od top úrovne (pre horizont. od ľavého dolného okraju, pre vert. od pravého horného okraju)
'menuOffsetY': 0, //offset Y všetkých submenu od top úrovne (pre horizont. od ľavého dolného okraju, pre vert. od pravého horného okraju)
'offsetX': 0, //offset X podmenu navzájom
'offsetY': 0, //offset Y podmenu navzájom
'width': 200, //šírka podmenu
'addHeaderItem': false, //ak true, prida automaticky li.ll-menu-header do kazdeho ul na zaciatok
'addFooterItem': false, //ak true, prida automaticky li.ll-menu-footer do kazdeho ul na koniec
'orientation': 'vertical' //orientácia menu - vertical, horizontal
});
$('*[data-tooltip]').tooltip({
'background-color': 'black', //background of tooltip
'opacity': 0.7, //opcaity of tooltip
'offsetx': 0, //X offset of tooltip from target element
'offsety': 2, //Y offset of tooltip from target element
'position': 'top', //position of tooltip from target element, values "top", "bottom"
'delay': 400, //delay before tooltip is shown
'fadeIn': 200, //speed of fadeIn time, 0 = fadeIn off
'fadeOut': 200 //speed of fadeOut time, 0 = fadeOut off
});
});
/* ]]> */
</script>
HTML:
<a href="#a" title="In computing, a hyperlink (or link) is a reference to a document that the reader can directly follow, or that is followed automatically.">link 1</a> |
<a href="#b" title="Tooltip 2">link 2</a> |
<a href="#c" title="Tooltip 3">link 3</a> |
<a href="#d" title="Tooltip 4">link 4</a> |
<span data-tooltip="Tooltip 5">span tooltip</span> |
<div data-tooltip="dasdasdasdasasd asd asd as">span tooltip</div>
Html:
<div id="sliderWrapper" class="theme-default">
<div id="sliderItems" class="nivoSlider">
<img src="images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" alt="" title="#htmlCaption1" />
<img src="images/nemo.jpg" alt="" title="#htmlCaption2" />
</div>
<div id="htmlCaption1">
<strong>This</strong> is an example of a <em>HTML</em> caption1 with <a href="#">a link</a>.
</div>
<div id="htmlCaption2">
<strong>This</strong> is an example of a <em>HTML</em> caption2 with <a href="#">a link</a>.
</div>
</div>
Usage:
<script type="text/javascript">
/* <![CDATA[ */
imagePolyHighlight = new ll_imagePolyHighlight({
id: 'myCanvas', //[string] ID Canvas-u, napr 'myCanvas'
backgroundImage: 'image/bg.jpg', //[string] Cesta k obrazku pozadia, napr. 'image/bg.jpg'
width: 'auto', //[integer | 'auto'] Sirka v pixeloch (napr. 960), alebo 'auto' (pouzije sa sirka pozadia)
height: 'auto', //[integer | 'auto'] Vyska v pixeloch (napr. 512), alebo 'auto' (pouzije sa vyska pozadia)
defaultStyle: { //[object] Defaultne styly zvyraznenia
backgroundColor: 'rgba(255, 0, 0, 0.4)', //[string] Farba pozadia, mozno zadavat hodnoty ako v CSS, napr '#CACACA', 'black', 'rgb(255,128,0)', 'rgba(255,128,0, 0.5)',...
backgroundImage: null, //[string] Obrazok pozadaia vysvieteneho regionu, zobrazi sa ako pattern - nakopiruje sa do vsetkych smerov
borderWidth: 1, //[integer] Sirka ramika v piexloch
borderColor: 'red', //[string] Farba ramika, mozno zadavat hodnoty ako v CSS, napr '#CACACA', 'black', 'rgb(255,128,0)', 'rgba(255,128,0, 0.5)',...
fontColor: 'white', //[string] Farba textu, mozno zadavat hodnoty ako v CSS, napr '#CACACA', 'black', 'rgb(255,128,0)', 'rgba(255,128,0, 0.5)',...
fontSize: '14px', //[string] Velkost textu, mozno zadavat hodnoty ako v CSS, napr '16px', '10pt',...
fontAngle: 0, //[float] Otocenie textu o zadany pocet stupnov, aj zaporne hodnoty, napr. 90, -30, ...
fontOffsetX: 0, //[integer] Posun textu po X o zadany pocet pixelov, aj zaporne hodnoty, napr. 10, -20, ...
fontOffsetY: 0, //[integer] Posun textu po Y o zadany pocet pixelov, aj zaporne hodnoty, napr. 10, -20, ...
fontStyleItalic: false, //[boolean] Ak je true, tak textu bude stylom italic
fontStyleBold: true, //[boolean] Ak je true, tak textu bude stylom bold - tucne
fontFamily: 'Arial', //[string] Rodina fontu, napr 'Arial', 'Tahoma',....
},
defaultHoverStyle: { //[object] Defaultne styly zvyraznenia - hover
backgroundColor: 'rgba(0, 0, 255, 0.4)', //[string] Farba pozadia, mozno zadavat hodnoty ako v CSS, napr '#CACACA', 'black', 'rgb(255,128,0)', 'rgba(255,128,0, 0.5)',...
},
classes: {
'ruzova': {
backgroundColor: 'rgba(252, 123, 198, 0.3)', //[string] Farba pozadia, mozno zadavat hodnoty ako v CSS, napr '#CACACA', 'black', 'rgb(255,128,0)', 'rgba(255,128,0, 0.5)',...
},
'ramikZeleny': {
borderColor: 'green', //[string] Farba ramika, mozno zadavat hodnoty ako v CSS, napr '#CACACA', 'black', 'rgb(255,128,0)', 'rgba(255,128,0, 0.5)',...
},
'ramik5px': {
borderWidth: 5, //[integer] Sirka ramika v piexloch
}
}
});
imagePolyHighlight.addRegion({
//Suradnice bodov vo formate [X1, Y1, X2, Y2] alebo dvojrozmerne pole pre viactvary region [[X1, Y1, X2, Y2], [X3, Y3, X4, Y4]]
coords: [293,391,293,445,344,446,388,448,440,448,513,451,543,453,625,453,705,451,705,393,652,389,610,389,444,391],
//Akcia po kliknuti na region. Moze byt string - URL adresa alebo funkcia, ktora sa vykona po kliknuti
link: 'http://www.google.com',
style: {
backgroundImage: '../src/patterns/pattern-hatch-down.png', //Srafovanie pozadia
text: 'Prízemie' //Text ktory sa zobrazi v regione
},
hoverStyle: {
text: 'Prízemie (pre viac info klik...)' //Text ktory sa zobrazi v regione
}
});
//Pretazenie defaultnych stylov pre tento region
style: {
backgroundColor: 'rgba(50,255,50, 0.45)', //Ina farba pozadia
backgroundImage: '../src/patterns/pattern-hatch-up.png', //Srafovanie pozadia
fontAngle: -10, //Otocenie pisma o -10 stupnov
fontOffsetX: -140 //Posun pisma o 40 pixelov dolava
},
imagePolyHighlight.addRegion({
//Region zlozeny z viacerych tvarov
coords: [
[276,112,276,127,304,109,333,111,359,111,393,110,408,109,407,63,334,64],
[413,61,415,109,462,103,509,94,509,45,430,60],
[513,43,513,92,539,86,577,80,616,79,638,81,654,82,560,33]
],
coordsMasterShapeId: 1, //ID hlavneho tvaru v koordinatoch (v ktorom sa bude vykreslovat text). Defaultne = 0
// PreInit events, bound before any internal events
preinit: {
UploadFile: function(up, file) {
// You can override settings before the file is uploaded
// up.settings.url = 'upload.php?id=' + file.id;
// up.settings.multipart_params = {param1: 'value1', param2: 'value2'};
}
},
// Post init events, bound after the internal events
init: {
FileUploaded: function(up, file, info) {
// Called when a file has finished uploading
},
}
});
// PreInit events, bound before any internal events
preinit: {
UploadFile: function(up, file) {
// You can override settings before the file is uploaded
// up.settings.url = 'upload.php?id=' + file.id;
// up.settings.multipart_params = {param1: 'value1', param2: 'value2'};
}
},
// Post init events, bound after the internal events
init: {
FileUploaded: function(up, file, info) {
// Called when a file has finished uploading
},
}
});