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

[Wood 20th*]

Originally Posted by tidus78

Is it available in forum?

If it is I can't find it..

[Wood 20th*]

Ok
I got it working. I was wondering if anyone could tell me how I would get pictures to pull from an created album instead of images/slider folder as it is now.

Anyone??

Thanks in advance

[SirSteve]

I'd like to see this one work on vb4: http://landofcoder.com/our-porfolios...ws-plugin.html

[The Rocketeer]

can you update it please? Currently we have to manually edit the images to a specific height..otherwise the text wont show

[Gamelobby]

Originally Posted by wander118

I put the widget on my CMS page, and one pic shows up with caption, but it doesnt switch to any of the other pictures i specified.
any help would be great.

Originally Posted by ArcadeSyndicate

had the same prob, just put it in an iframe.

I'm having the same issues..
But i think i'd rather than put it in an iframe (cuz im not sure that will change anything), id rather just get it working like its supposed to.

Anyone know what causes it to stay still, & not rotate.?

Originally Posted by The Rocketeer

can you update it please? Currently we have to manually edit the images to a specific height..otherwise the text wont show

That is what this is for, it is a slider that shows images that you put into it.
Did you want it to resize the images for you.? (you would still have to tell it what size, so you might as well just change the size of the images, or the slider window)

[fluidswork]

does this work with vb 4.1.2

[Trystan^]

Originally Posted by fluidswork

does this work with vb 4.1.2

Just put it fine into 4.1.2 all seems to be working, will play around with images height etc and let you know if any problems

[The Rocketeer]

works on 4.1.3

to the dev or anyone that knows how to work with the javascript, can you please add a prevButton / previous button or something or give us the code to it? So that we are able to slide back and forward ?

[oddmud]

This is a great looking slider, just needs a little more work to be completed. I'd donate if it worked properly.

[Wayne Luke]

Originally Posted by Gamelobby

Anyone know what causes it to stay still, & not rotate.?

Javascript error. Make sure you upload it properly. The problem could be a conflict with the included javascript and the jQuery included with vBulletin.

I put the mySlider.js in my clientscript/jquery folder and changed the code slightly. I didn't upload the include jquery.js file.

Put the css in the additional.css template:

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;
}

Put the javascript includes in my headinclude_bottom like this:

<vb:if condition="THIS_SCRIPT == 'vbcms'">
<script src="clientscript/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="clientscript/jquery/mySlider.js" type="text/javascript"></script>
</vb:if>

Finally my widget code looks like this:

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

        <li>
            <img src="images/slider/thor_movie.jpg" width="100%" alt="" />
            <div class="top">
                The powerful but arrogant warrior Thor is cast out of the fantastic realm of Asgard and sent to live amongst humans on Earth, where he soon becomes one of their finest defenders.
            </div>
        </li>
        <li>
            <img src="images/slider/on_stranger_tides.jpg" width="100%" alt="" />
            <div class="bottom">
                After crossing paths with a woman from his past, Captain Jack Sparrow  is swept aboard the Queen Anne's Revenge, the ship of the formidable pirate Blackbeard, on an unexpected mission to find the elusive fountain of youth.
            </div>
        </li>
        <li>

            <img src="images/slider/the-deathly-hallows.jpg" alt="" />
            <div class="bottom">
                The end begins as Harry, Ron, and Hermione go back to Hogwarts to find and destroy Voldemort's final horcruxes...
            </div>
        </li>
    </ul>

Still needs a little work but you can see it at the site that I am working on here:
http://wayneflix.com/content/1-box-office