jQuery plugin announcement

View source

<ul id="ticker">
    <li>
        Lorem ipsum dolor sit amet.
        <br />
        <strong>Ut enim ad:</strong> Minim veniam, quis nostrud exercitation ullamco.
        <br /> Duis aute irure dolor <a href="http://devs.forumvi.com" target="_blank">DEVs forumvi</a>.
    </li>
    <li>
        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </li>
    <li>
        jQuery plugin announcement
        <br /> By <a href="http://baivong.github.io" target="_blank">Zzbaivong</a>
    </li>
</ul>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>

<link href="dist/jquery.announcement.css" rel="stylesheet" type="text/css">
<script src="dist/jquery.announcement.min.js" type="text/javascript"></script>

<script>
$(function () {

    $('#ticker').announcement({

        title: 'Announcement', // String

        showToggle: true, // Boolean
        showClose: false, // Boolean

        autoHide: 'auto', // Number [s] (0: disable, 'auto': when finished slideshow)
        autoClose: 0, // Number [s] (0: disable, 'auto': when finished slideshow)

        position: 'bottom-right', // 'bottom-right' | 'bottom-left'

        width: 300, // 'auto' | Number [px]
        height: 'auto', // 'auto' | Number [px]
        zIndex: 99999, // Number

        speed: 10, // Number [s] (0: disable autorun)

        effect: 'fading' // 'fading'
            // 'zoom-in' | 'zoom-out'
            // 'rotate-left' | 'rotate-right'
            // 'move-top' | 'move-right' | 'move-bottom' | 'move-left'
            // 'skew-top' | 'skew-right' | 'skew-bottom' | 'skew-left'
            // 'random' | 'shuffle'

    });

});
</script>
Configure

title

show

autoHide

autoClose

position

width

height

zIndex

speed

effect

View source
