1

Are there any jquery rotators out there that are both basic and flexible? I've tried a bunch of carousel ones and they are not what I want.

It should have pager ability and transitions if possible. Also I need to be able to put text on the images, but if that's not possible I could save the text into the images.

flag

2 Answers

2

I really like the cycle plugin because it's really flexible. You can really do a lot with it!

DEMO: http://webbymaid.net/snippets/rotator.html

HTML

 <div id="rotator">
    <div id="thumbnails">
    </div>
    <div id="slideshow-pager">
        <div class="slide">
            <div class="slide-info">
                <h1>
                    Those Snow Globes</h1>
                <p>
                    is all about elephants in their natural environment: the glittery snow globe that I won, but was recalled because it starts house fires when placed in the direct sun.</p>
            </div>
            <img src="images/rotator-slide-1.jpg" alt="slide one" />
        </div>
        <div class="slide">
            <div class="slide-info">
                <h1>
                    Shenanigans</h1>
                <p>
                    is a funny word, but not nearly as funny as shelay-lee.  I don't know how to spell that - I wish I had a stenograph writer and court room reporter skills.</p>
            </div>
            <img src="images/rotator-slide-2.jpg" alt="slide two" />
        </div>
        <div class="slide">
            <div class="slide-info">
                <h1>
                    Elephant Butts</h1>
                <p>
                    are five times as groovy than the leading brand of animal butt.</p>
            </div>
            <img src="images/rotator-slide-3.jpg" alt="slide three" />
        </div>
    </div>
</div>

CSS

<style type="text/css">

    #rotator
    {
        height: 281px;
        overflow: hidden; /* contain rotator while jquery and images load */
        position: relative;
        width: 665px;
    }

    #thumbnails
    {
        clear: both;
        display: block;
        left: 0;
        overflow: hidden; 
        position: absolute;
        top: 0;
        width: 100px;
    }
    #thumbnails a
    {
        clear: both;
        overflow: hidden;
        width: 100px;
    }
    #thumbnails a img
    {
        border: 0;
        margin-bottom: 1px;
        opacity: .4;
        filter: alpha(opacity=40);
    }
    #thumbnails a:hover img, #thumbnails a.activeSlide:hover img
    {
        opacity: .8;
        filter: alpha(opacity=80);
    }
    #thumbnails a.activeSlide img
    {
        opacity: 1;
        filter: alpha(opacity=100);
    }

    #slideshow-pager
    {
        display: block;
        margin: 0 0 0 100px;
        width: 500px;
    }

    .slide
    {
        height: 281px;
        overflow: hidden;
        position: relative;
        width: 500px;
    }
    .slide img
    {
        left: 0;
        position: absolute;
        top: 0;
    }

    .slide-info
    {
        background: #fff;
        bottom: 0;
        color: #000;
        display: block;
        font: 9pt Arial;
        height: 73px!important;
        height: 93px;
        opacity: .70;
        filter: alpha(opacity=70);
        left: 0;
        padding: 10px;
        position: absolute;
        width: 500px;
        z-index: 5;
    }
    .slide-info h1
    {
        font-size: 15pt;
    }
</style>

JQUERY

<script type="text/javascript">
    $(function() {

        $('#slideshow-pager').cycle({
            fx: 'fade',
            //timeout:  0,   //use this feature to stop the rotator from rotating without using the pager
            pager:   '#thumbnails',
            pagerAnchorBuilder: pagerFactory
        });

        function pagerFactory(idx, slide) {
            var s = idx > 2 ? ' style="display:none"' : '';
            return '<a href="#"><img src="images/rotator-slide-'+(idx+1)+'.jpg" alt="thumbnail" height="93" width="165" /></a>';
        };

    });
</script>
link|flag
0

I'm also using a similar script you can view at audinow.com. View the arouce to grab the plugin. I'll edit if I find the source for "Simple Gallery".

link|flag

Your Answer

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