Vertical NewsTicker ( Marquee ) with Image and HyperLink using jQuery

Last Reply on May 21, 2013 12:00 AM By Mudassar

Posted on May 17, 2013 06:29 AM

I want to add marquee to my website i refer this link

http://jsfiddle.net/FWWEn/

but i want top to bottom text not left to right, how i can i modify it.

Posted on May 21, 2013 12:00 AM

Finally I got a jQuery plugin where you can display Image as well as HyperLink. Check the sample below

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link rel="stylesheet" href="http://www.htmldrive.net/edit_media/2010/201008/20100819/news-ticker/style.css" type="text/css" media="screen" />
    <script src="http://www.htmldrive.net/edit_media/2010/201008/20100819/news-ticker/jcarousellite_1.0.1c4.js"
        type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                $(".newsticker-jcarousellite").jCarouselLite({
                    vertical: true,
                    hoverPause: true,
                    visible: 3,
                    auto: 500,
                    speed: 1000
                });
            });
</script>
    <div class="newsticker-jcarousellite">
        <ul>
            <li>
                <div class="thumbnail">
                    <img src="http://www.htmldrive.net/edit_media/2010/201008/20100819/news-ticker/images/1.jpg">
                </div>
                <div class="info">
                    <a href="http://www.vladstudio.com/wallpaper/?knight_lady">The Knight and the Lady</a>
                    <span class="cat">Category: Illustrations</span>
                </div>
                <div class="clear">
                </div>
            </li>
            <li>
                <div class="thumbnail">
                    <img src="http://www.htmldrive.net/edit_media/2010/201008/20100819/news-ticker/images/2.jpg">
                </div>
                <div class="info">
                    <a href="http://www.vladstudio.com/wallpaper/?family_of_colors">The Family of Colors</a>
                    <span class="cat">Category: Creatures</span>
                </div>
                <div class="clear">
                </div>
            </li>
            <li>
                <div class="thumbnail">
                    <img src="http://www.htmldrive.net/edit_media/2010/201008/20100819/news-ticker/images/3.jpg">
                </div>
                <div class="info">
                    <a href="http://www.vladstudio.com/wallpaper/?teddybear_mac">Teddy Bear and MacBook</a>
                    <span class="cat">Category: Photos</span>
                </div>
                <div class="clear">
                </div>
            </li>
            <li>
                <div class="thumbnail">
                    <img src="http://www.htmldrive.net/edit_media/2010/201008/20100819/news-ticker/images/4.jpg">
                </div>
                <div class="info">
                    <a href="http://www.vladstudio.com/wallpaper/?rainbow_butterfly">Rainbow Butterfly</a>
                    <span class="cat">Category: Abstract art</span>
                </div>
                <div class="clear">
                </div>
            </li>
            <li>
                <div class="thumbnail">
                    <img src="http://www.htmldrive.net/edit_media/2010/201008/20100819/news-ticker/images/5.jpg">
                </div>
                <div class="info">
                    <a href="http://www.vladstudio.com/wallpaper/?space_travel">Space Travel</a> <span
                        class="cat">Category: Abstract art</span>
                </div>
                <div class="clear">
                </div>
            </li>
            <li>
                <div class="thumbnail">
                    <img src="http://www.htmldrive.net/edit_media/2010/201008/20100819/news-ticker/images/6.jpg">
                </div>
                <div class="info">
                    <a href="http://www.vladstudio.com/wallpaper/?traveling_tree">The Traveling Tree</a>
                    <span class="cat">Category: Creatures</span>
                </div>
                <div class="clear">
                </div>
            </li>
        </ul>
    </div>

Demo

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html