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

[The Rocketeer]

Originally Posted by Wayne Luke

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

Hey Wayne Do you know anyway to add like a forward or backward button to this thing?

[biancolaw]

Can someone tell me how I would center the picture? I tried making the pics 430x270 but my homepage uses 75% for the middle column so the pics are aligned left. No matter what I edit, it seems I cannot center the picture.

[Wayne Luke]

Originally Posted by The Rocketeer

Hey Wayne Do you know anyway to add like a forward or backward button to this thing?

Sorry.. Haven't looked into this functionality yet. Have been busy building a movie library within the vBulletin Framework. It isn't quite complete yet but getting there.

http://www.wayneflix.com/movies.php

Once I get done with the movie library, I am going to rewrite this using some PHP to pull articles marked as "featured" in the database. Don't know if I'll be able to distribute it though.

Originally Posted by biancolaw

Can someone tell me how I would center the picture? I tried making the pics 430x270 but my homepage uses 75% for the middle column so the pics are aligned left. No matter what I edit, it seems I cannot center the picture.

Enclose your slider within a div container and do something like:

<style>
.slcenter {width: 540px;margin-left: auto;margin-right: auto;}
</style>

Mine looks like:

<div class="slcenter">
    <ul id="slider">
        <li>Image 1</li>
        <li>Image 2</li>
        <li>Image 3</li>
    </ul>
</div>

[negrowarez]

This one work with the 4.1.5?

[stev35555]

Hi,

Slideshow works great in 4.1.6. How can I stop the title showing and the grey background http://www.thechristianchatroom.com/ ?

[pantani]

nice one thanks you

[Popa Andrei]

how can we make this rezise pictures to a predefined size bu us given?

[Dr.osamA]

thank you bro

installed

[Popa Andrei]

Originally Posted by Popa Andrei

how can we make this rezise pictures to a predefined size bu us given?

anyone can help me with this?

[mrt12345]

works great on 4.1.12
but i found working with a photo 650x335 and play with the width and heit in the code and you will do fine, for fluid templates.

I don’t have any fixed but you would have to make adjustments.