vBulletin CMS Widgets - Slider Widget s3slider

Here is a lite slider for vbulletin CMS
Login into Admin Panel(Admincp)
Open up vBulletin CMS in Sidebar click Widgets when page opens click Create New Widget near bottom page
Then a new page will come up and choose the following options:

Widget Type: Static HTML
Title: Slider
Description: Content Slider

click save
now you will see a widget called slider click configure and paste the following into the Enter Static HTML Box Edit the pictures you want and then Click save and you done.
Edit your Layout to show the widget where you want i would choose the Middle box in Home Layout

<style type="text/css">
ul#slider {
    width: 430px;
    height: 270px;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

ul#slider li {
    float: left;
    position: relative;
    /*display: none;*/
}

ul#slider li div {
    position: absolute;
    width: 373px;
    background-color: #000;
    color: #fff;
    left: 0;
    /*display: none;*/
    padding: 10px;
}

.top {
    top: 0;
}

.bottom {
    bottom: 0;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/mySlider.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#slider").mySlider({
            timeOut: 4000,
            captionOpacity: .7            
        });
    });
</script>
    <ul id="slider">

        <li>
            <img src="images/slider/2.jpg" alt="" />
            <div class="top">
                Some nice text captions..
            </div>
        </li>
        <li>
            <img src="images/slider/3.jpg" alt="" />
            <div class="bottom">

                Some nice text captions..
            </div>
        </li>
        <li>

            <img src="images/slider/4.jpg" alt="" />
            <div class="bottom">
                Some nice text captions..
            </div>
        </li>
    </ul>

Developer of the slider is Creative Commons Attribution

[CrazyProgrammer]

This was intial release will try to get article slider rather than a thread slider give some time thank u for comments so far

[NFLfbJunkie]

Originally Posted by basilrath

Theres a nifty software that creates the effect im using ..........diplayed here on my cms

Where can one find the software you're using on your message board? Thanks.

[NFLfbJunkie]

How do you get the caption to show on the bottom? Your existing code only shows a top caption for the first image; the other two don't have a caption.

[CrazyProgrammer]

<div class="bottom">

is for bottom make sure u remove

<div class="top">

[NFLfbJunkie]

I have changed all three instances of <div class="top"> to <div class="bottom"> but now no captions show. Your existing code outputs the first image with a top caption and the other two images don't have captions.

[CrazyProgrammer]

pm me ur code u got there let me see

[ZGeek]

Does this pull content automatically? From the code it looks like you have to manually ad it.

[NFLfbJunkie]

You have to manually add the images, but would be nice if it would pull from image attachments in a specified forum, and making the image link to the forum thread the image is in.

[pablete]

Where to put the folder js included in zip??

Thank's

[Wild Bronco]

I got it to show the photos and I love it and you can add links to images and text like this

<a href="http://www.google.com"><img src="images/slider/2.jpg" alt="" /></a>

and to text like

<div class="top">
                <a href="http://www.microsoft.com">Microsoft
            </a></div>