cookieconsent

version:

Informačný box ohľadom používania Cookies.

Home: https://cookieconsent.insites.com/
Demo: https://cookieconsent.insites.com/demos/
Config: https://cookieconsent.insites.com/download/

<!-- {lib_name} {version} -->
<link href="{lib_path}cookieconsent.min.css" rel="stylesheet" type="text/css" />
<!-- {lib_name} {version} -->
<script src="{lib_path}cookieconsent.min.js" type="text/javascript"></script>

excanvas

version:

flotr2

version:

font-awesome

version:

font-lemonlion

version:

Init:
<!-- {lib_name} {version} -->
<link href="{lib_path}css/font-lemonlion.css" rel="stylesheet" type="text/css" />

Usage:
<i class="fll fll-lemonlion"></i> ... Lemon Lion<br />
<i class="fll fll-webicek"></i> ... webicek.sk<br />
<br />    
<i class="fll fll-liocard"></i> ... lioCARD<br />
<i class="fll fll-lioeshop"></i> ... lioESHOP<br />
<i class="fll fll-liokb"></i> ... lioKB<br />    
<i class="fll fll-liomarketing"></i> ... lioMARKETING<br />    
<i class="fll fll-lioreality"></i> ... lioREALITY<br />
<br />
<i class="fll fll-liohosting"></i> ... lioHOSTING<br />    
<i class="fll fll-liohosting-mini"></i> ... lioHOSTINGmini<br />
<i class="fll fll-liohosting-miniplus"></i> ... lioHOSTINGmini+<br />
<i class="fll fll-liohosting-standard"></i> ... lioHOSTINGstandard<br />
<i class="fll fll-liohosting-maxi"></i> ... lioHOSTINGmaxi<br />    

google-code-prettify

version:

Documentation: http://code.google.com/p/google-code-prettify/

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}google-code-prettify.min.js" type="text/javascript"></script>

<!-- {lib_name} theme -->
<link href="{lib_path}themes/base/google-code-prettify.css" rel="stylesheet" type="text/css" />
<!-- {lib_name} theme for print -->
<link href="{lib_path}themes/base/google-code-prettify-print.css" rel="stylesheet" type="text/css" />

Usage:
<body onload="prettyPrint()">

...

<code class="prettyprint">
//some code
</code>

<code class="prettyprint linenums">
//some code
</code>

html5-IE-fix

version:

Init:
<!--[if lte IE 8]>
<link href="{lib_path}html5-IE-fix.css" rel="stylesheet" type="text/css" />
<script src="{lib_path}html5-IE-fix.min.js" type="text/javascript"></script>
<![endif]-->

jquery

version:

Documentation: http://docs.jquery.com/Main_Page

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.min.js" type="text/javascript"></script>

Usage:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
                    
});
/* ]]> */
</script>

jquery.blockui

version:

Home: http://jquery.malsup.com/block/
Documentation: http://jquery.malsup.com/block/#options
Demo: http://jquery.malsup.com/block/#demos

<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.blockui.min.js" type="text/javascript"></script>

jquery.color

version:

Home: https://github.com/jquery/jquery-color/
Demo: http://jsfiddle.net/eEtuH/11/

<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.color.min.js" type="text/javascript"></script>

jquery.colorbox

version:

jquery.cross-slide

version:

Home: http://tobia.github.com/CrossSlide/

<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.cross-slide.min.js" type="text/javascript"></script>

Usage:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
    $('#placeholder').crossSlide({
        sleep: 3,
        fade: 1
    }, [
        { src: 'images/slide01.jpg'},
        { src: 'images/slide02.jpg'},
        { src: 'images/slide03.jpg'}
    ]);               
});
/* ]]> */
</script>

jquery.easing

version:

Home: http://gsgd.co.uk/sandbox/jquery/easing/

<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.easing.min.js" type="text/javascript"></script>

jquery.elevatezoom

version:

Documentation: http://www.elevateweb.co.uk/image-zoom/configuration
Examples: http://www.elevateweb.co.uk/image-zoom/examples

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.elevatezoom.min.js" type="text/javascript"></script>

HTML:
<body>
        <img id="zoom_01" src="small.jpg" data-zoom-image="large.jpg"/>
</body>
Usage:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
    $("#zoom_01").elevateZoom({scrollZoom: true,
        zoomWindowWidth: 350,
        zoomWindowHeight: 350,
        borderSize: 1,
        cursor: "pointer"
        });                    
});
/* ]]> */
</script>

jquery.fancybox

version:

Home: http://fancybox.net/
Documentation: http://fancybox.net/api
Demo: http://fancybox.net/

<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.fancybox.min.js" type="text/javascript"></script>

<link href="{lib_path}themes/base/jquery.fancybox.css" rel="stylesheet" type="text/css" />

jquery.farbtastic

version:

Documentation: http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/

Init:
<!-- {lib_name} {version} -->
<link href="{lib_path}jquery.farbtastic.css" rel="stylesheet" type="text/css" />
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.farbtastic.min.js" type="text/javascript"></script>

Html:
<input type="text" id="color" name="color" value="#123456" />
<div id="colorpicker"></div>

JS:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
    $("#colorpicker").farbtastic("#color");                    
});
/* ]]> */
</script>

jquery.hotkeys

version:

jquery.ifixpng

version:

jquery.jscrollpane

version:

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.jscrollpane.min.js" type="text/javascript"></script>
<link href="{lib_path}jquery.jscrollpane.css" rel="stylesheet" type="text/css" />

jquery.ll.aimg

version:

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.ll.aimg.min.js" type="text/javascript"></script>

Usage javascript:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
    $('.aimg').aimg({
        'direction' : 'x',    //Direction of scroll 'x' or 'y', default 'x'
        'timeout': 3000,       //Timeout between slides in ms, default 3000
        'slides': 4           //Number of slides, default -1 = unknown
    });                        
});
/* ]]> */
</script>

HTML:
<div class="aimg" style="width: 300px; height: 174px; background: url(images/aimg.jpg);"></div>

jquery.ll.equalHeight

version:

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.ll.equalHeight.min.js" type="text/javascript"></script>

HTML:

<div class="box">A</div>
<div class="box">B<br />B</div>
<div class="box">C<br />C<br />C</div>

Usage:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){                    
    $('.box').ll_equalHeight();
    //$('.box').ll_equalHeight(true);                     
});
/* ]]> */
</script>

jquery.ll.lytebox

version:

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.ll.lytebox.min.js" type="text/javascript"></script>
<link href="{lib_path}jquery.ll.lytebox.min.css" rel="stylesheet" type="text/css" />

Usage javascript:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
    $('.group1').ll_lytebox({
            slideSideBoundry:    '0.5%',        //napr. 10%, 20px
            slideCloseBoundry:    '30%',        //napr. 10%, 20px            
            buttonFullscreen:    false,        //true | false
    });
    
    $('.group2').ll_lytebox();
    
});
/* ]]> */
</script>

CSS:


HTML:

<a href="images/gallery1/image-1.jpg" class="gallery1" title="Prešetrovala a obávajú udalostí nevie požiadať pozná tejto pre d"><img src="images/gallery1/tn-image-1.jpg" alt="" /></a>
<a href="images/gallery1/image-2.jpg" class="gallery1" title="test2"><img src="images/gallery1/tn-image-2.jpg" alt="" /></a>
<a href="images/gallery1/image-3.jpg" class="gallery1"><img src="images/gallery1/tn-image-3.jpg" alt="" /></a>

<br /><br />

<a href="images/gallery2/image-1.jpg" class="gallery2" title="Prešetrovala a obávajú udalostí nevie požiadať pozná tejto pre d"><img src="images/gallery2/tn-image-1.jpg" alt="" /></a>
<a href="images/gallery2/image-2.jpg" class="gallery2" title="test2"><img src="images/gallery2/tn-image-2.jpg" alt="" /></a>
<a href="images/gallery2/image-3.jpg" class="gallery2"><img src="images/gallery2/tn-image-3.jpg" alt="" /></a>

jquery.ll.menu

version:

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.ll.menu.min.js" type="text/javascript"></script>
<link href="{lib_path}jquery.ll.menu.min.css" rel="stylesheet" type="text/css" />

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
    });
    
});
/* ]]> */
</script>

CSS:

.ll-menu li ul {
    background: red;    
}

HTML:

<ul id="menu">
    <li>
        <a href="#">Súbor</a>
        <ul>
            <li><a href="#">Otvoriť</a></li>
            <li><a href="#">Uložiť</a></li>
            <li>----------------</li>
            <li>
                <a href="#">Naposledny otvorene</a>
                <ul>
                    <li><a href="#">C:\test1\</a></li>
                    <li><a href="#">C:\test2\</a></li>                        
                    <li><a href="#">C:\test3\</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Úpravy</a>
        <ul>
            <li><a href="#">Kopírovať</a></li>
            <li><a href="#">Vystrihnúť</a></li>                        
            <li><a href="#">Vložiť</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Zatvoriť</a>
    </li>
</ul>

jquery.ll.responsive

version:

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.ll.responsive.min.js" type="text/javascript"></script>

Usage javascript:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
    $.ll_responsive({
        width: [240, 320, 640, 980],      //Responzivne rozlisenia, default [240, 320, 640, 980]
        prefix: 'width',                  //Prefix classy, ktora sa bude priradzovat do body, priklad: width-240, width-320... default "width"
        viewport: 'width=device-width',   //Hodnota ktora sa priradi pri inicializacii do <meta name="viewport" content="..." />, default "width=device-width"
        afterResize: function(opt) {      //Metoda, ktora sa vykona po zmene rozlisenia na niektory z definovanych rozmerov
            $('#class').html(opt.bodyClass);
            $('#log').append('<br />Zmena rozlíšenie z '+opt.prevWidth+' na '+opt.width);
        } 
    });
    
});
/* ]]> */
</script>

CSS:

#testBox {
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
}

.width-240 #testBox {
    background: #FFEAC4;
}

.width-320 #testBox {
    background: #FCD68F;
}

.width-640 #testBox {
    background: #FCBB44;
}

.width-980 #testBox {
    background: #FFA500;
}

HTML:

<div id="testBox"></div>

<strong>Body class: </strong><span id="class"></span>
<br />
<div id="log">
    <strong>Log:</strong>
</div>

jquery.ll.rollover

version:

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.ll.rollover.min.js" type="text/javascript"></script>

Documentation:
  • v1.4: now it is possible to define over state image in "data-over-image" attribute instead of using "-normal", "-over" postfixes
  • Image filename "[NAME]-normal.[EXT]" for normal state ("normal" is lowercase).
  • Image filename "[NAME]-over.[EXT]" for over state ("over" is lowercase).
  • Add class to rollovers (eg. "rollover")
  • call "$.ll_rollover()" function with selector as argument (eg. $.ll_rollover('.rollover');)
  • call "$(document).ll_rollover('preloadHoverImages');" to preload all images in ":hover" state in document
  • or call "$().ll_rollover()" function with selector as jquery argument (eg. $('.rollover').ll_rollover();)
  • All rollovers will be preloaded and swapped on mouse hover
  • If item has "selected" class, then it's initialised with over state
  • On mouse over class "hover" is added to element
  • Works with CSS style "background" for non IMG tags


Image filename format:
  • Home-normal.png //Button, normal state
  • Home-over.png //Button, over state
  • Contact-normal.png //Button, normal state
  • Contact-over.png //Button, over state
  • Google-ico-normal.png //Icon, normal state
  • Google-ico-over.png //Icon, over state


HTML:
<img src="images/Home-normal.png" class="rollover" />
<img src="images/Contact-normal.png" class="rollover selected" />
<a href="http://www.google.com/" style="background: url(images/Google-ico-normal.png) no-repeat;" class="rollover">Google</a>

New feature (v1.4 and later):
<img src="images/normalImage.png" data-over-image="images/overImage.png" class="rollover" />

Usage:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){                    
    $('.rollover').ll_rollover();
    $(document).ll_rollover('preloadHoverImages');                     
});
/* ]]> */
</script>

jquery.ll.slider

version:

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.ll.slider.min.js" type="text/javascript"></script>

Usage javascript:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
    $('#slider').slider({
        'speed' : 5,        //Speed of timer in  ms
        'step': 0.15        //Step for each tick of timer
    });                        
});
/* ]]> */
</script>

Css:

HTML:
<style type="text/css">
#slider {
    height: 176px;    
    width: 800px;
    display: none;
}
</style> <div id="slider">        
    <img src="images/image.jpg" alt="1" />        
    <a href="http://www.google.com/"><img src="images/image.jpg" alt="2" /></a>
    <p>Lorem ipsum dolor sit amet<br />consectetuer Duis fames Phasellus nec Phasellus.</p>
    <img src="images/image.jpg" alt="4" />
    <img src="images/image.jpg" alt="5" />
    <img src="images/image.jpg" alt="6" />
    <img src="images/image.jpg" alt="7" />
    <img src="images/image.jpg" alt="8" />
    <img src="images/image.jpg" alt="9" />
    <img src="images/image.jpg" alt="10" />        
</div>

jquery.ll.tooltip

version:

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.ll.tooltip.min.js" type="text/javascript"></script>
<link href="{lib_path}jquery.ll.tooltip.css" rel="stylesheet" type="text/css" />

Usage javascript:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
    $('a').tooltip();
    
    $('*[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>

jquery.mousewheel

version:

jquery.nivo-slider

version:

Home: http://nivo.dev7studios.com/
Documentation: http://dev7studios.com/nivo-slider/#/documentation
Demo: http://nivo.dev7studios.com/demos/

Init:

<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.nivo-slider.min.js" type="text/javascript"></script>

<link href="{lib_path}jquery.nivo-slider.css" rel="stylesheet" type="text/css" />
<link href="{lib_path}themes/default/default.css" rel="stylesheet" type="text/css" />

Styles:

<style type="text/css">
#sliderWrapper {    
    height: 250px;
    width: 900px;        
}

.theme-default .nivoSlider {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
</style>

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>

Javscript:

$(window).load(function() {        
    $('#sliderItems').addClass('theme-default').nivoSlider({
        effect: 'sliceUpDown,sliceUpDownLeft', //boxRain,boxRainReverse,fade
        controlNav: false,
        directionNav: true,
        animSpeed: 500,
        pauseTime: 5000
    });
});    

jquery.orchestra

version:

Documentation:
addCss(cssPath); //Add dynamicly css
parsePrice(price); //Parse string price into float
formatPrice(value, decimals = 2, decimalSeparator = "," , thousandsSeparator = " ") //Format float value into price

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.orchestra.min.js" type="text/javascript"></script>

Usage:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
    parsePrice("- 12 000,32 €");
    document.write(formatPrice(1200, 2, ",", " "));
    addCss("default.css");
});
/* ]]> */
</script>

jquery.pickadate

version:

jquery.qtip

version:

qtip 1 documentation: http://craigsworks.com/projects/qtip/docs/
qtip 2 documentation: http://craigsworks.com/projects/qtip2/docs/


Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.qtip.min.js" type="text/javascript"></script>

<!-- {lib_name} {version} -->
<link href="{lib_path}jquery.qtip.min.css" rel="stylesheet" type="text/css" />

jquery.rollover

version:

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.rollover.min.js" type="text/javascript"></script>

Documentation:
  • v1.4: now it is possible to define over state image in "data-over-image" attribute instead of using "-normal", "-over" postfixes
  • Image filename "[NAME]-normal.[EXT]" for normal state ("normal" is lowercase).
  • Image filename "[NAME]-over.[EXT]" for over state ("over" is lowercase).
  • Add class to rollovers (eg. "rollover")
  • call "$.rollover()" function with selector as argument (eg. $.rollover('.rollover');)
  • or call "$().rollover()" function with selector as jquery argument (eg. $('.rollover').rollover();)
  • All rollovers will be preloaded and swapped on mouse hover
  • If item has "selected" class, then it's initialised with over state
  • On mouse over class "hover" is added to element
  • Works with CSS style "background" for non IMG tags


Image filename format:
  • Home-normal.png //Button, normal state
  • Home-over.png //Button, over state
  • Contact-normal.png //Button, normal state
  • Contact-over.png //Button, over state
  • Google-ico-normal.png //Icon, normal state
  • Google-ico-over.png //Icon, over state


HTML:
<img src="images/Home-normal.png" class="rollover" />
<img src="images/Contact-normal.png" class="rollover selected" />
<a href="http://www.google.com/" style="background: url(images/Google-ico-normal.png) no-repeat;" class="rollover">Google</a>

New feature (v1.4 and later):
<img src="images/normalImage.png" data-over-image="images/overImage.png" class="rollover" />

Usage:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){                    
    $('.rollover').rollover(); // or $.rollover('.rollover');                     
});
/* ]]> */
</script>

jquery.select2

version:

jquery.selectBox

version:

Homepage: http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/
Demo: http://labs.abeautifulsite.net/projects/js/jquery/selectBox/

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.selectBox.min.js" type="text/javascript"></script>

<!-- {lib_name} theme -->
<link href="{lib_path}themes/default/jquery.selectBox.css" rel="stylesheet" type="text/css" />

Usage:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
    $("SELECT").selectBox();                    
});
/* ]]> */
</script>

jquery.sparkline

version:

jquery.ui

version:

Documentation: http://jqueryui.com/

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}jquery.ui.min.js" type="text/javascript"></script>
<!-- {lib_name} localisation -->
<script src="{lib_path}i18n/jquery.ui.datepicker-sk.js" type="text/javascript"></script>

Style:
<!-- {lib_name} {version} -->
<link href="{lib_path}themes/[THEME]/jquery.ui.css" rel="stylesheet" type="text/css" />

-> replace [THEME] for required theme name:
ver. 1.8.12: base, ui-lightness
ver. 1.8.13: smoothness, ui-lightness
ver. 1.8.17: smoothness, ui-blue-dim, ui-darkness, ui-lightness
ver. 1.8.23: smoothness, start
ver. 1.10.0: smoothness
ver. 1.10.1: smoothness
ver. 1.11.4: smoothness

Usage:
<script type="text/javascript">
/* <![CDATA[ */
$(function(){
                    
});
/* ]]> */
</script>

jquery.ui.nestedSortable

version:

js.ll.imagePolyHighlight

version:

Init:
<!-- {lib_name} {version} -->
<script src="{lib_path}js.ll.imagePolyHighlight.min.js" type="text/javascript"></script>

Obrázky pre srafovanie:
Nachádzajú sa na adrese http:////ajax.lemonlion.net/libs/js.ll.imagePolyHighlight/1.0/patterns/...:
  • pattern-hatch-down.png
  • pattern-hatch-up.png


CSS:

#myCanvas {
    /* Zmenou tychto rozmerov menime velkost canvasu, pricom zostava responzivne zachovany obsah */
    /*
    width: 450px;
    height: 283px;
    */
}

HTML:

<canvas id="myCanvas"></canvas>

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, ....
        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
        }
    });
    
    imagePolyHighlight.addRegion({
        coords: [302,318,276,324,275,390,303,389,390,389,437,388,487,388,541,388,593,388,634,389,662,389,684,391,722,393,745,394,744,326,649,311,616,309,588,309,562,309,510,313,459,317,389,318,354,319],
        
        //Ukazka funkcie pri kliknuti na region
        link: function(region) {
            alert(region.text);
        },
        hoverStyle: {
            text: '1. Poschodie'
        }
    });
    
    imagePolyHighlight.addRegion({
        coords: [302,256,274,268,275,325,303,318,388,318,439,317,476,317,515,314,569,311,607,309,638,311,651,313,744,325,744,269,648,246,616,241,588,242,544,246,500,251,468,254,432,256,373,258],
        link: 'http://www.google.com',
        
        //Ukazka class
        classes: ['ruzova', 'ramikZeleny'],
        hoverClasses: ['ramik5px'],
        
        hoverStyle: {
            text: '2. Poschodie'
        }
    });
    
    imagePolyHighlight.addRegion({
        coords: [300,194,276,211,276,267,302,255,383,256,420,256,467,254,522,248,579,241,612,241,625,243,649,246,683,254,743,268,743,211,651,180,632,175,611,175,584,173,557,177,526,181,490,187,455,193,425,196,366,197],
        link: 'http://www.google.com',
        hoverStyle: {
            text: '3. Poschodie'
        }
    });
    
    imagePolyHighlight.addRegion({
        coords: [276,133,275,212,303,193,390,194,440,192,478,188,530,180,574,173,597,171,616,173,643,176,653,179,681,187,743,210,743,131,653,87,627,81,612,80,604,78,577,79,553,85,502,94,472,102,432,106,400,111,360,111,306,108],
        link: 'http://www.google.com',
        hoverStyle: {
            text: '4. Poschodie',
            backgroundImage: '../src/patterns/pattern-hatch-up.png',        //Srafovanie pozadia
        }
    });
    
    imagePolyHighlight.addRegion({
        coords: [276,110,332,64,386,64,415,61,451,56,503,47,544,37,561,33,696,102,693,106,636,82,616,78,591,77,560,81,537,86,487,97,446,105,398,110,354,110,307,107,278,130],
        link: 'http://www.google.com',        
        
        //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: -40                                //Posun pisma o 40 pixelov dolava
        },
        hoverStyle: {
            text: 'Podkrovie',
            backgroundColor: 'rgba(50,255,50, 0.8)',        //Ina farba pozadia
        }
    });
    
    //Vynuti prekreslenie canvasu
    imagePolyHighlight.redraw();
    
    /* ]]> */
</script>

jumploader

version:

llUtils

version:

plupload

version:

Home: http://www.plupload.com/
Documentation: http://www.plupload.com/documentation.php
Demo: http://www.plupload.com/example_queuewidget.php

Init full
<!-- Yahoo Browser Plus 2.4.21 -->
<script src="http://bp.yahooapis.com/2.4.21/browserplus-min.js" type="text/javascript"></script>

<!-- {lib_name} full {version} -->
<script src="{lib_path}plupload.full.min.js" type="text/javascript"></script>
<!-- {lib_name} queue {version} -->
<script src="{lib_path}jquery.plupload.queue/jquery.plupload.queue.min.js" type="text/javascript"></script>
<!-- {lib_name} CSS -->
<link href="{lib_path}jquery.plupload.queue/css/jquery.plupload.queue.css" rel="stylesheet" type="text/css" />

$("#uploader").pluploadQueue({
    // General settings       
    runtimes: 'flash,html5,gears,browserplus,silverlight,html4',
    url: 'upload.php',
    max_file_size: '10mb',
    chunk_size: '1mb',
    unique_names: true,
    multiple_queues : true,

    // Resize images on clientside if we can
    resize: {width: 320, height: 240, quality: 90},

    // Specify what files to browse for
    filters: [
        {title: "Image files", extensions: "jpg,gif,png"},
        {title: "Zip files", extensions: "zip"}
    ],

    // Flash/Silverlight paths
    flash_swf_url: '{lib_path}plupload.flash.swf',
    silverlight_xap_url: '{lib_path}plupload.silverlight.xap',

    // 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
        },
    }
});

html:
<div id="uploader" style="width: 650px; height: 330px;">You browser doesn't support upload.</div>

/crossdomain.xml:
<?xml version="1.0"?>
<cross-domain-policy>
    <allow-access-from domain="*.lemonlion.sk" />
    <allow-access-from domain="*.lemonlion.net" />
    <allow-access-from domain="*.lioweb.sk" />
</cross-domain-policy>

plupload2

version:

Home: http://www.plupload.com/
Documentation: http://www.plupload.com/documentation.php
Demo: http://www.plupload.com/example_queuewidget.php

Init full
<!-- {lib_name} full {version} -->
<script src="{lib_path}plupload.full.min.js" type="text/javascript"></script>
<!-- {lib_name} localization -->
<script src="{lib_path}i18n/sk.js" type="text/javascript"></script>
<!-- {lib_name} queue {version} -->
<script src="{lib_path}jquery.plupload.queue/jquery.plupload.queue.min.js" type="text/javascript"></script>
<!-- {lib_name} CSS -->
<link href="{lib_path}jquery.plupload.queue/css/jquery.plupload.queue.css" rel="stylesheet" type="text/css" />

$("#uploader").pluploadQueue({
    // General settings       
    runtimes : 'html5,flash,silverlight,html4',
    url: 'upload.php',
    max_file_size: '10mb',
    chunk_size: '1mb',
    unique_names: true,
    multiple_queues : true,

    // Resize images on clientside if we can
    resize: {width: 320, height: 240, quality: 90},

    // Specify what files to browse for
    filters: [
        {title: "Image files", extensions: "jpg,gif,png"},
        {title: "Zip files", extensions: "zip"}
    ],

    // Flash/Silverlight paths
    flash_swf_url: '{lib_path}Moxie.swf',
    silverlight_xap_url: '{lib_path}Moxie.xap',

    // 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
        },
    }
});

html:
<div id="uploader" style="width: 650px; height: 330px;">You browser doesn't support upload.</div>

/crossdomain.xml:
<?xml version="1.0"?>
<cross-domain-policy>
    <allow-access-from domain="*.lemonlion.sk" />
    <allow-access-from domain="*.lemonlion.net" />
    <allow-access-from domain="*.lioweb.sk" />
</cross-domain-policy>

swfobject

version: