Ajax Libraries - Lemon Lion | ajax.lemonlion.net

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" />

Usage:


<body onload="prettyPrint()">



...



<code class="prettyprint">

//some code

</code>



<code class="prettyprint linenums">

//some code

</code>

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.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.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.hotkeys

version:

jquery.ifixpng

version:

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>

HTML:


<div id="slider" style="display: hidden">        

    <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.mousewheel

version:

jquery.nivo-slider

version:

Home: http://nivo.dev7studios.com/
Documentation: http://nivo.dev7studios.com/support/jquery-plugin-usage/
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;    

}

</style>

Html:




<div id="sliderWrapper">

    <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').nivoSlider({

        effect: 'sliceUpDown,sliceUpDownLeft', //boxRain,boxRainReverse,fade

        controlNav: false,

        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.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:

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>

Usage:


<script type="text/javascript">

/* <![CDATA[ */

$(function(){                    

    $('.rollover').rollover(); // or $.rollover('.rollover');                     

});

/* ]]> */

</script>

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.ui

version:

jquery.ui.nestedSortable

version:

jumploader

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>

swfobject

version: