Sidebar Slideshow widget with text [closed]

Question

Can anyone suggest me some good sidebar slideshow widget? I need to add some text file along with each sides and show the image along with the text.

Eg:http://misys.com/products/bankfusion-universal-banking.aspx. Please see the widget given here in the bottom of the sidebar.

Answer 1

I don't think this StackExchange is meant to recommend plugins. However, I happen to have built this for a client before. It uses jQuery's "jCaroussel" plugin, and you can see it in action on Oelers Makelaardij.

Scoop up the minified version, it contains all plugins like Autoscrolling, Controls, etc.

CSS

Most of the CSS is provided with the plugin. Add it to your style.css and change it to your needs.

JavaScript

$(document).ready(function(){

    $('#slider').jcarousel({ // initiate the slider on this element
        'animation':    { 'duration': 800, 'easing': 'swing' },
        'wrap':         'circular',
        'vertical':     true
    });

    $('#slider').jcarouselAutoscroll({ autostart: true });
    $('.jcarousel-prev').jcarouselControl({ target: '-=1' });
    $('.jcarousel-next').jcarouselControl({ target: '+=1' });

    $('#slider li img').each(function(){
        if($(this).attr('alt') != '') {
            var $caption = $(this).attr('alt');
            $caption = '<span class="caption">' + $caption + '</span>';
            $(this).before($caption);
        }
    });

}); 

The last function you see there is my custom code. It loops through all the slides in the slider, looks at the image's alt attribute, and extract the text therein. Then it injects a span element containing this text before the img element. With CSS styling I overlaid this text on the image.

.jcarousel li .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 70px;
    height: 1.5em;
    line-height: 1.5em;
    font-size: 0.9em;
    font-weight: bold;
    color: #f1f1f1;
    text-align: center;
    background: #c31d1d;
    background: rgba(195,29,29,0.7);
}

PHP / HTML

<a class="jcarousel-prev" href="#">Previous</a>
<div id="slider" class="jcarousel">
    <ul>
        <li>
            <img alt="Overlay" src="" width="" height="" />My text
        </li>
        <li>
            <img alt="Overlay" src="" width="" height="" />My text
        </li>
    </ul>
</div>
<a class="jcarousel-next" href="#">Next</a>

This is the basic HTML structure to contruct a slideshow, but if you want to build it using WordPress' WYSIWYG editor, you can use the following code instead:

<div id="slider" class="jcarousel">
<?php
    $my_postid = 35; // change this to the ID of the post that contains the list of slides in an Unordered Bullet List
    $content_post = get_post($my_postid);
    $content = $content_post->post_content;
    $content = apply_filters('the_content', $content);
    $content = str_replace(']]>', ']]&gt;', $content);
    echo $content;
?>

</div>

Now you can build an unordered list in a post, insert image thumbnails and add text. With additional CSS styling you can position all your elements, like on Oelers Makelaardij (link at beginning of answer for working example).