[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?