Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question

1 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).

share|improve this answer
    
Thanks for the help. Let me try this. –  MidhuN Mar 21 '13 at 9:41

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.